ERROR in Entry module not found: Error: Can't resolve './app.css' in...

[caferrari]

Output:

Running tns prepare...
Executing before-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/before-prepare/nativescript-dev-typescript.js
Executing before-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/before-prepare/nativescript-plugin-firebase.js
Preparing project...
Project successfully prepared (android)
Executing after-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/after-prepare/firebase-build-gradle.js
Configure firebase
Executing after-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/after-prepare/firebase-copy-google-services.js
Copy /home/caferrari/projetos/abrafarma-mobile/app/App_Resources/Android/google-services.json to /home/caferrari/projetos/abrafarma-mobile/platforms/android/google-services.json.
Executing after-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/after-prepare/nativescript-dev-sass.js
All SASS source files removed from app package
Executing after-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/after-prepare/nativescript-plugin-firebase.js
Running webpack for android...
 94% asset optimization[copy-webpack-plugin] WARNING - unable to locate 'app.css' at '/home/caferrari/projetos/abrafarma-mobile/app/app.css'
Hash: 3151ad8c262af46ce444
Version: webpack 3.2.0
Time: 5690ms
                  Asset       Size  Chunks                    Chunk Names
              bundle.js  881 bytes       0  [emitted]         bundle
              vendor.js    3.03 MB       1  [emitted]  [big]  vendor
  fonts/FontAwesome.ttf     166 kB          [emitted]         
     fonts/OpenSans.ttf     217 kB          [emitted]         
fonts/MaterialIcons.ttf     261 kB          [emitted]  [big]  
       fonts/Roboto.ttf     161 kB          [emitted]         
       images/apple.jpg     277 kB          [emitted]  [big]  
           package.json  149 bytes          [emitted]         
             starter.js   39 bytes          [emitted]         
    tns-java-classes.js    0 bytes          [emitted]         
 [110] .. lazy 160 bytes {1} [built]
 [158] ./main.aot.ts 465 bytes {0} [built]
 [202] ./vendor.ts 523 bytes {1} [built]
 [203] ./vendor-platform.android.ts 465 bytes {1} [built]
    + 254 hidden modules

ERROR in Entry module not found: Error: Can't resolve './app.css' in '/home/caferrari/projetos/abrafarma-mobile/app'

ERROR in ENOENT: no such file or directory, open '/home/caferrari/projetos/abrafarma-mobile/app/components/speaker-list-item.android.css'

ERROR in ./main.aot.ts
Module not found: Error: Can't resolve './app.module.ngfactory' in '/home/caferrari/projetos/abrafarma-mobile/app'
 @ ./main.aot.ts 5:29-62

ERROR in [copy-webpack-plugin] unable to locate 'app.css' at '/home/caferrari/projetos/abrafarma-mobile/app/app.css'
Child app/components/activity-tabs.html:
       1 module
Child app/components/speaker-list-item.html:
       1 module
Child app/components/activity-list.html:
       1 module
Child app/components/activity-list-item.html:
       1 module
Child app/pages/login/login.html:
       [0] ./pages/login/login.html 1.02 kB {0} [built]
Child app/components/favorite.html:
       1 module
Child app/pages/event/event.html:
       [0] ./pages/event/event.html 1.2 kB {0} [built]
Child app/pages/event-dashboard/event-dashboard.html:
       [0] ./pages/event-dashboard/event-dashboard.html 2.33 kB {0} [built]
Child app/components/side-drawer.html:
       1 module
Child app/pages/activity/activity.html:
       [0] ./pages/activity/activity.html 518 bytes {0} [built]
Child app/pages/schedule/schedule.html:
       [0] ./pages/schedule/schedule.html 941 bytes {0} [built]
Child app/pages/speaker/speaker.html:
       [0] ./pages/speaker/speaker.html 663 bytes {0} [built]
Child app/pages/speaker-detail/speaker-detail.html:
       [0] ./pages/speaker-detail/speaker-detail.html 1.5 kB {0} [built]
Child app/pages/talk/talk.html:
       [0] ./pages/talk/talk.html 2.51 kB {0} [built]
Child app/pages/satisfaction-survey/satisfaction-survey.html:
       [0] ./pages/satisfaction-survey/satisfaction-survey.html 1.18 kB {0} [built]
Child app/pages/activity-question/activity-question.html:
       [0] ./pages/activity-question/activity-question.html 1.63 kB {0} [built]
Child app/pages/activity-question-detail/activity-question-detail.html:
       [0] ./pages/activity-question-detail/activity-question-detail.html 2.13 kB {0} [built]
Child app/pages/profile/profile.html:
       [0] ./pages/profile/profile.html 5.69 kB {0} [built]
Webpack Bundle Analyzer saved stats file to /home/caferrari/projetos/abrafarma-mobile/report/stats.json
Webpack Bundle Analyzer saved report to /home/caferrari/projetos/abrafarma-mobile/report/report.html
child process exited with code 2

webpack.config.js:

const {
  resolve,
  join
} = require("path");

const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const {
  BundleAnalyzerPlugin
} = require("webpack-bundle-analyzer");

const {
  AotPlugin
} = require("@ngtools/webpack");

const mainSheet = `app.css`;

module.exports = env => {
  const platform = getPlatform(env);

  // Default destination inside platforms/<platform>/...
  const path = resolve(nsWebpack.getAppPath(platform));

  const entry = {
    // Discover entry module from package.json
    bundle: `./${nsWebpack.getEntryModule()}`,

    // Vendor entry with third-party libraries
    vendor: `./vendor`,

    // Entry for stylesheet with global application styles
    [mainSheet]: `./${mainSheet}`,
  };

  const rules = getRules();
  const plugins = getPlugins(platform, env);
  const extensions = getExtensions(platform);

  const config = {
    context: resolve("./app"),
    target: nativescriptTarget,
    entry,
    output: {
      pathinfo: true,
      path,
      libraryTarget: "commonjs2",
      filename: "[name].js",
    },
    resolve: {
      extensions,

      // Resolve {N} system modules from tns-core-modules
      modules: [
        "node_modules/tns-core-modules",
        "node_modules",
      ],

      alias: {
        '~': resolve("./app")
      },
    },
    node: {
      // Disable node shims that conflict with NativeScript
      "http": false,
      "timers": false,
      "setImmediate": false,
      "fs": "empty",
    },
    module: {
      rules
    },
    plugins,
  };

  if (env.snapshot) {
    plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
      chunk: "vendor",
      projectRoot: __dirname,
      webpackConfig: config,
      targetArchs: ["arm", "arm64", "ia32"],
      tnsJavaClassesOptions: {
        packages: ["tns-core-modules"]
      },
      useLibs: false
    }));
  }

  return config;
};


function getPlatform(env) {
  return env.android ? "android" :
    env.ios ? "ios" :
    () => {
      throw new Error("You need to provide a target platform!")
    };
}

function getRules() {
  return [{
      test: /\.html$|\.xml$/,
      use: [
        "raw-loader",
      ]
    },
    // Root stylesheet gets extracted with bundled dependencies
    {
      test: new RegExp(mainSheet),
      use: ExtractTextPlugin.extract([{
          loader: "resolve-url-loader",
          options: {
            silent: true
          },
        },
        {
          loader: "nativescript-css-loader",
          options: {
            minimize: false
          }
        },
        "nativescript-dev-webpack/platform-css-loader",
      ]),
    },
    // Other CSS files get bundled using the raw loader
    {
      test: /\.css$/,
      exclude: new RegExp(mainSheet),
      use: [
        "raw-loader",
      ]
    },
    // SASS support
    {
      test: /\.scss$/,
      use: [
        "raw-loader",
        "resolve-url-loader",
        "sass-loader",
      ]
    },


    // Compile TypeScript files with ahead-of-time compiler.
    {
      test: /\.ts$/,
      loaders: [
        "nativescript-dev-webpack/tns-aot-loader",
        "@ngtools/webpack",
      ]
    }

  ];
}

function getPlugins(platform, env) {
  let plugins = [
    new ExtractTextPlugin(mainSheet),

    // Vendor libs go to the vendor.js chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: ["vendor"],
    }),

    // Define useful constants like TNS_WEBPACK
    new webpack.DefinePlugin({
      "global.TNS_WEBPACK": "true",
    }),

    // Copy assets to out dir. Add your own globs as needed.
    new CopyWebpackPlugin([{
        from: mainSheet
      },
      {
        from: "css/**"
      },
      {
        from: "fonts/**"
      },
      {
        from: "**/*.jpg"
      },
      {
        from: "**/*.png"
      },
      {
        from: "**/*.xml"
      },
    ], {
      ignore: ["App_Resources/**"]
    }),

    // Generate a bundle starter script and activate it in package.json
    new nsWebpack.GenerateBundleStarterPlugin([
      "./vendor",
      "./bundle",
    ]),

    // Generate report files for bundles content
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false,
      generateStatsFile: true,
      reportFilename: join(__dirname, "report", `report.html`),
      statsFilename: join(__dirname, "report", `stats.json`),
    }),

    // Angular AOT compiler
    new AotPlugin({
      tsConfigPath: "tsconfig.aot.json",
      entryModule: resolve(__dirname, "app/app.module#AppModule"),
      typeChecking: false
    }),

    // Resolve .ios.css and .android.css component stylesheets, and .ios.html and .android component views
    new nsWebpack.UrlResolvePlugin({
      platform: platform,
      resolveStylesUrls: true,
      resolveTemplateUrl: true
    }),

  ];

  if (env.uglify) {
    plugins.push(new webpack.LoaderOptionsPlugin({
      minimize: true
    }));

    // Work around an Android issue by setting compress = false
    const compress = platform !== "android";
    plugins.push(new webpack.optimize.UglifyJsPlugin({
      mangle: {
        except: nsWebpack.uglifyMangleExcludes
      },
      compress,
    }));
  }

  return plugins;
}

// Resolve platform-specific modules like module.android.js
function getExtensions(platform) {
  return Object.freeze([
    `.${platform}.ts`,
    `.${platform}.js`,
    ".aot.ts",
    ".ts",
    ".js",
    ".css",
    `.${platform}.css`,
  ]);
}

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "br.com.abr.ex",
    "tns-android": {
      "version": "3.1.1"
    },
    "tns-ios": {
      "version": "3.1.0"
    }
  },
  "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/router": "4.1.3",
    "nativescript-angular": "3.1.3",
    "nativescript-bitmap-factory": "1.7.1",
    "nativescript-cardview": "2.0.2",
    "nativescript-imagepicker": "3.0.2",
    "nativescript-loading-indicator": "2.3.2",
    "nativescript-local-notifications": "1.2.1",
    "nativescript-permissions": "1.2.3",
    "nativescript-plugin-firebase": "4.0.5",
    "nativescript-telerik-ui-pro": "file:nativescript-ui-pro.tgz",
    "nativescript-theme-core": "1.0.4",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "string-mask": "0.3.0",
    "tns-core-modules": "3.1.0",
    "tns-platform-declarations": "3.1.0",
    "zone.js": "0.8.14"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.1.3",
    "@ngtools/webpack": "1.5.0",
    "babel-traverse": "6.25.0",
    "babel-types": "6.25.0",
    "babylon": "6.17.4",
    "copy-webpack-plugin": "4.0.1",
    "extract-text-webpack-plugin": "3.0.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "0.26.0",
    "nativescript-dev-sass": "1.2.0",
    "nativescript-dev-typescript": "0.5.0",
    "nativescript-dev-webpack": "0.7.3",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "2.1.0",
    "tslib": "1.7.1",
    "typescript": "2.3.4",
    "webpack": "3.2.0",
    "webpack-bundle-analyzer": "2.8.2",
    "webpack-sources": "1.0.1"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }
}

I have same problem.
Do you have any idea?
Thanx

[shayfriedman]

Look at the solution here: https://discourse.nativescript.org/t/nativescript-webpack-version-dont-load-platform-css/2294

[leocaseiro]

The solution from https://github.com/NativeScript/template-master-detail-ng/pull/64 by @vakrilov worked for me.

PS: Make sure you install sass-loader:

"sass-loader": "^6.0.6"

UPDATE!
With this solution, you're not able to run the app with livesync in regards to the .scss files on your components.

[berardo]

There's a chance of the pull request I made (#268) gets anybody else's problem fixed.
Worked for me. This has only to do with platform specific main sheets (app.ios.css and app.android.css).
Regarding the fact of being written in sass or less, I'd suggest to run via tns first (in order to generate all css files) and then run any npm script.
Bare in mind this plugin is mainly focused on production therefore imho changes like in NativeScript/template-master-detail-ng#64 seem to be creating more problems than actually fixing (if I'm not missing the point there).

[JohanBeumer]

I'm having the exact same problem as @caferrari and have no clue of what to do. Any help/suggestion would be appreciated.

I noticed that "tns build" compiles .scss to .css.
"npm run build-android-bundle" doesn't do the scss compile and therefor gives the error.
I thought sass-loader would compile the scss-files, is that right?

The repo https://github.com/sis0k0/nativescript-webpack-sass of @sis0k0 has all .css files in it, should I do that also?

[mozi22]

@JohanBeumer I am having the same issue. You managed to solve it ?

[NickIliev]

@mozi22 have you updated to the latest nativescript-dev-webpack as described here. If so please post the content of your package.json and the versions you are using (NativeScript, Webpack, tns-core-modules, tns runtimes)

[mozi22]

Hi @NickIliev, I somehow managed to pass that issue using your advice but I am still getting a problem saying Failed to find module: "nativescript-angular/platform", relative to: app/tns_modules/ could you please help me with this ?

Here's my package.json.

{
  "name": "angular-seed-advanced",
  "version": "0.0.0",
  "nativescript": {
    "id": "com.maxtoolbox.vrsta",
    "tns-android": {
      "version": "3.3.0"
    },
    "tns-ios": {
      "version": "3.3.0"
    }
  },
  "scripts": {
    "preinstall": "mkdirp app",
    "clean": "rimraf platforms node_modules lib hooks app && mkdirp app",
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  },
  "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/router": "~5.0.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.3",
    "@ngrx/store": "^2.2.2",
    "@ngx-translate/core": "~7.0.0",
    "@ngx-translate/http-loader": "~0.1.0",
    "angulartics2": "^2.2.2",
    "lodash": "^4.17.4",
    "nativescript-angular": "^5.0.0",
    "nativescript-background-http": "^3.1.0",
    "nativescript-camera": "^3.1.4",
    "nativescript-checkbox": "^3.0.1",
    "nativescript-fingerprint-auth": "^5.0.0",
    "nativescript-imagepicker": "^4.0.1",
    "nativescript-iqkeyboardmanager": "^1.1.0",
    "nativescript-localstorage": "^1.1.2",
    "nativescript-mediafilepicker": "^1.0.4",
    "nativescript-pdf-view": "^2.0.1",
    "nativescript-plugin-firebase": "^4.2.1",
    "nativescript-pro-ui": "^3.2.0",
    "nativescript-purchase": "^1.0.5",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-toast": "^1.4.6",
    "nativescript-videoplayer": "^3.1.0",
    "ngrx-store-freeze": "0.1.9",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.5.0",
    "tns-core-modules": "^3.3.0",
    "zone.js": "^0.8.4",
    "@angular/platform-browser-dynamic": "~5.0.0"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.0.0 || ~4.1.0",
    "@ngrx/store-devtools": "~3.2.4",
    "@ngtools/webpack": "~1.8.2",
    "@types/jasmine": "2.5.41",
    "@types/lodash": "4.14.63",
    "babel-traverse": "6.11.4",
    "babel-types": "6.11.1",
    "babylon": "6.8.4",
    "codelyzer": "^3.0.1",
    "copy-webpack-plugin": "~4.0.1",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.0",
    "fs-extra": "^0.30.0",
    "glob": "^7.0.5",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-android-snapshot": "^0.0.9",
    "nativescript-dev-sass": "^1.1.1",
    "nativescript-dev-webpack": "^0.9.0",
    "nativescript-worker-loader": "~0.8.1",
    "opener": "^1.4.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.0",
    "rimraf": "^2.5.3",
    "sass-loader": "~6.0.6",
    "tar.gz": "^1.0.5",
    "tns-platform-declarations": "^3.0.1",
    "tslint": "^5.2.0",
    "typescript": "~2.4.2",
    "webpack": "~3.8.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1"
  }
}

[mozi22]

yes @jogboms it is being referenced in app.ts but shouldn't it be like that ?

[jogboms]

oh yeah. @mozi22 you mean main.ts. Have you tried cleaning up your node_modules folder?

[mozi22]

@jogboms I removed node_modules and did a fresh npm install but that didn't helped. As you can see in my directory structure. It's app.ts.

[jogboms]

There are somethings wrong with some files i can see. You don't seem to be following the official app directory structure. Where did you get vendor.platform.js.android?

[mozi22]

I am using angular-seed-advanced for the development.

The file you mentioned is generated when I am running the following command from root.

npm run nativescript-install && gulp build.tns && concurrently --kill-others \"gulp build.tns.watch\" \"cd nativescript && tns debug android --emulator\"

[jogboms]

At this point, I don't think I'd be able to help. Seeing the seed library hasn't been following the recent upgrades, i can't say for sure what could be causing this particular issue.
I'd advice you create a fresh issue stating the exact new problem either in nativescript-angular or in the seed repo.

[mozi22]

thanks @jogboms, I'll do that.