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.

[NickIliev]

@Beawolf @jogboms @milansar @Burgov @skhye05 @opennewsdev @SamuelReeder confirming this one as a bug reproducible only on Windows. Stay tuned for updates (the info will be updated here)

[MartoYankov]

@opennewsdev The current versions of the starter templates are not fully compatible with webpack. Check out this PR - https://github.com/NativeScript/template-tab-navigation-ng/pull/51 . Basically, you must update your dependencies and change your components to directly reference the .scss files. You can also create a new project from the branch like this:

tns create my-app-name --template https://github.com/NativeScript/template-tab-navigation-ng#ns-3.4

[berchik]

@NickIliev - yes, windows only.
tns run android --bundle --env.aot --env.uglify --env.snapshot seem to work well on OSX.

[ManuelSch]

I have the same issue. I upgraded with the migration guide and it works fine with
tns run android --bundle --env.uglify --env.snapshot,
but as soon as I add the --env.aot flag, the '...shim.ngstyle' error occurs.

I'm running onWindows 10. Also I use sass (indented syntax, not scss!).

[RoyiNamir]

Happens here also : win 10 after upgrade to latest .

@berchik BTW how do you handle AOT bundles for modules ? there are many common (http.js) files for example. I've heard that if a module is lazy loaded then it can not remove those libraries. Is it true ?

[crutchcorn]

I'm experincing this issue as well. Running Windows 10

[Rossie]

This bug is confirmed from windows 10 also:
package.json:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.BeePakKalendar",
    "tns-android": {
      "version": "3.4.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~5.0.0",
    "@angular/common": "~5.0.0",
    "@angular/compiler": "~5.0.0",
    "@angular/core": "~5.0.0",
    "@angular/forms": "~5.0.0",
    "@angular/http": "~5.0.0",
    "@angular/platform-browser": "~5.0.0",
    "@angular/platform-browser-dynamic": "~5.0.0",
    "@angular/router": "~5.0.0",
    "@types/lodash": "^4.14.92",
    "allow-publish": "^1.0.4",
    "lodash": "^4.17.4",
    "moment": "^2.20.1",
    "nativescript-angular": "next",
    "nativescript-exit": "^1.0.1",
    "nativescript-imagecropper": "^0.1.2",
    "nativescript-imagepicker": "^4.0.1",
    "nativescript-screenshot": "0.0.2",
    "nativescript-social-share": "^1.5.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toast": "^1.4.6",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.5.2",
    "tns-core-modules": "next",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~5.0.0",
    "@ngtools/webpack": "~1.8.2",
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "copy-webpack-plugin": "~4.0.1",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.0",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^1.3.5",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "^0.10.0-2018-01-02-01",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.0",
    "sass-loader": "~6.0.6",
    "typescript": "~2.4.2",
    "webpack": "~3.8.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1"
  }
}

Errors:

ERROR in ./closeable/closeable.component.ngfactory.js
Module not found: Error: Can't resolve './closeable.component.scss.shim.ngstyle' in 'D:\Rossie\www\beepak-calendar\BeePakKalendar\app\closeable'
 @ ./closeable/closeable.component.ngfactory.js 9:9-59
 @ ./image-calendar/image-calendar.component.ngfactory.js
 @ ./app.module.ngfactory.js
 @ ./main.aot.ts

ERROR in ./day-marker/day-marker.component.ngfactory.js
Module not found: Error: Can't resolve './day-marker.component.android.scss.shim.ngstyle' in 'D:\Rossie\www\beepak-calendar\BeePakKalendar\app\day-marker'
 @ ./day-marker/day-marker.component.ngfactory.js 9:9-68
 @ ./app.module.ngfactory.js
 @ ./main.aot.ts

ERROR in ./image-calendar/image-calendar.component.ngfactory.js
Module not found: Error: Can't resolve './image-calendar.component.scss.shim.ngstyle' in 'D:\Rossie\www\beepak-calendar\BeePakKalendar\app\image-calendar'
 @ ./image-calendar/image-calendar.component.ngfactory.js 9:9-64
 @ ./app.module.ngfactory.js
 @ ./main.aot.ts

ERROR in ./image-crop/image-crop.component.ngfactory.js
Module not found: Error: Can't resolve './image-crop.component.android.css.shim.ngstyle' in 'D:\Rossie\www\beepak-calendar\BeePakKalendar\app\image-crop'
 @ ./image-crop/image-crop.component.ngfactory.js 9:9-67
 @ ./app.module.ngfactory.js
 @ ./main.aot.ts

ERROR in ./image-result/image-result.component.ngfactory.js
Module not found: Error: Can't resolve './image-result.component.android.css.shim.ngstyle' in 'D:\Rossie\www\beepak-calendar\BeePakKalendar\app\image-result'
 @ ./image-result/image-result.component.ngfactory.js 9:9-69
 @ ./app.module.ngfactory.js
 @ ./main.aot.ts

ERROR in ./image-select/image-select.component.ngfactory.js
Module not found: Error: Can't resolve './image-select.component.android.css.shim.ngstyle' in 'D:\Rossie\www\beepak-calendar\BeePakKalendar\app\image-select'
 @ ./image-select/image-select.component.ngfactory.js 9:9-69
 @ ./app.module.ngfactory.js
 @ ./main.aot.ts

ERROR in ./message-win/message-win.component.ngfactory.js
Module not found: Error: Can't resolve './message-win.component.scss.shim.ngstyle' in 'D:\Rossie\www\beepak-calendar\BeePakKalendar\app\message-win'
 @ ./message-win/message-win.component.ngfactory.js 9:9-61
 @ ./image-select/image-select.component.ngfactory.js
 @ ./app.module.ngfactory.js
 @ ./main.aot.ts

ERROR in ./pan-and-scale/pan-and-scale.component.ngfactory.js
Module not found: Error: Can't resolve './pan-and-scale.component.scss.shim.ngstyle' in 'D:\Rossie\www\beepak-calendar\BeePakKalendar\app\pan-and-scale'
 @ ./pan-and-scale/pan-and-scale.component.ngfactory.js 9:9-63
 @ ./image-calendar/image-calendar.component.ngfactory.js
 @ ./app.module.ngfactory.js
 @ ./main.aot.ts

ERROR in ./view-month/view-month.component.ngfactory.js
Module not found: Error: Can't resolve './view-month.component.android.scss.shim.ngstyle' in 'D:\Rossie\www\beepak-calendar\BeePakKalendar\app\view-month'
 @ ./view-month/view-month.component.ngfactory.js 9:9-68
 @ ./image-calendar/image-calendar.component.ngfactory.js
 @ ./app.module.ngfactory.js
 @ ./main.aot.ts

[carrbrpoa]

Same problem. Windows 8.1 here.

[Seanitzel]

Having the same issue in Ubuntu 18.04...