ng-tools/webpack unable to resolve app.module.ts.ngfactory

OS?

Mac OSX (El Capitan)

Versions.

ng-tools/webpack: 1.2.4 node: v5.11.0 angular-cli: 2.4.4 webpack: 2.2.0

Repro steps.

Using a custom made webpack config file. Trying to use ng-tools/webpack plugin to generate a build using AOT.

The log given by the failure.

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: ./src/client/app.ts
Module not found: Error: Can't resolve './aot/src/client/app.module.ts.ngfactory' in '/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client'
resolve './aot/src/client/app.module.ts.ngfactory' in '/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client'
  using description file: /Volumes/User/oliver/htdocs/tu-prestamo-2/package.json (relative path: ./src/client)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Volumes/User/oliver/htdocs/tu-prestamo-2/package.json (relative path: ./src/client)
    using description file: /Volumes/User/oliver/htdocs/tu-prestamo-2/package.json (relative path: ./src/client/aot/src/client/app.module.ts.ngfactory
)
      as directory
        /Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory.ts doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        /Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory.scss doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory.json doesn't exist
[/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory]
[/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory]
[/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory.js]
[/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory.ts]
[/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory.scss]
[/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/aot/src/client/app.module.ts.ngfactory.json]
 @ ./src/client/app.ts 3:0-78

Mention any other details that might be useful.

app.module.ts:

import './polyfills.ts';

import { AppModule } from './app.module';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

declare var ENVIRONMENT: string; // Webpack DefinePlugin.

if (ENVIRONMENT === "production") {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

tsconfig.aot.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "angularCompilerOptions": {
   "skipMetadataEmit" : true,
   "genDir": "./src/client/aot",
   "debug": true
 }
}

webpack.config:

...
  plugins: [
    new AotPlugin({
      tsConfigPath: './tsconfig.aot.json',
      entryModule: __dirname + '/src/client/app.module.ts#AppModule',
    }),
...

---

Would like to provide more useful information. But the trace stack is not very helpful.

[trekhleb]

@olivercs, I had similar error that was caused by .ts file extension that I’ve mentioned in entryModule configuration (it doesn’t matter whether entryModule is configured in webpack.config.js or in tsconfig.json).

So after I’ve removed .ts extension from my tsconfig.json entryModule configuration the error was gone.

Before:

"angularCompilerOptions": {
    "entryModule": "src/app/app.module.ts#AppModule"
}

After:

"angularCompilerOptions": {
    "entryModule": "src/app/app.module#AppModule"
}

I hope this info would be helpful to you.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}