After upgrading to tns 3.4.0 , nativescript-dev-webpack 0.9.0 and bundling with --env.aot Can't resolve *.*.css.shim.ngstyle

[milansar]

I updated my existing project to NativeScript 3.4.0 and followed all instructions given on
https://www.nativescript.org/blog/nativescript-webpack-0.9.0-what-changed-and-how-to-upgrade

When I prepare build using bundle and AOT, webpack gives following error for all components in my project. sample error for one component

ERROR in ./components/add-new-card/add-new-card.component.ngfactory.js
Module not found: Error: Can't resolve './add-new-card.component.css.shim.ngstyle' in 'G:\xxxx\xxxxx\xxxx\app\components\add-new-card'
@ ./components/add-new-card/add-new-card.component.ngfactory.js 9:9-61
@ ./app.module.ngfactory.js
@ ./main.aot.ts

Bundle without AOT works fine. Prior to upgrade, AOT build worked fine using ns-bundle command

Not sure what is problem

[ButterMeWaffle]

actually that doesnt look like a plugin. my bad. please post the @component info for one of these component files. might need to add the moduleId

[milansar]

Thanks @SamuelReeder for looking into it, I already have moduleId in component , here you go

@component({
moduleId: module.id,
selector: "ns-add-new-card",
templateUrl: "add-new-card.component.html",
styleUrls: ["add-new-card.component.css"],
})

[ButterMeWaffle]

hmm its not the issue I thought it was. Im not quite sure whats happening

[milansar]

Tested with sample grocery app https://github.com/NativeScript/sample-Groceries

Received similar error when run tns build android --bundle --env.aot so it appears that problem is with not my project but in general when building with aot option

[opennewsdev]

I just used the cli (3.4.0) to create a brand new project, installed the webpack and ran the build, it said: 'Can't resolve './tabs.component.css''.

I checked the webpack.config.js.

// tns-core-modules reads the app.css and its imports using css-loader
{ test: /\/app\.css$/, use: "css-loader?url=false" },
{ test: /\/app\.scss$/, use: ["css-loader?url=false", "sass-loader"] },

// Angular components reference css files and their imports using raw-loader
{ test: /\.css$/, exclude: /\/app\.css$/, use: "raw-loader" },
{ test: /\.scss$/, exclude: /\/app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },

The actual file we have:

• _tabs.component.scss
• tabs.component.android.scss
• tabs.component.ios.scss

How to change the config to make it work?

[skhye05]

I have the same issue

[milansar]

@NickIliev , can you please look into this as well. it appears --env.aot is not working as it should be. I am using windows 10 so it could be that it is related to only windows

[Burgov]

Same here. Every css file generates an error like Module not found: Error: Can't resolve './sizegrid.component.css.shim.ngstyle' in 'C:\mobile\app\product' (using windows 10 as well if it's relevant)

[jogboms]

@opennewsdev @skhye05 could you try if changing module.id to __filename would do it for you?

[mustafacagataytulun]

@jogboms Even if I tried with either module.id or __filename, neither worked. I can confirm that it is working perfectly without --env.aot parameter.

I use Windows 10, too, like others.

[jogboms]

Okay @Beawolf then I think it'll be good to keep track of this issue seeing it's been labeled as a bug.