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

[olivercs]

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.

[Meligy]

Is trying Node 6 an option? I remember one of these dependencies had issues with Node 5 (not sure if current or potential / future).

[olivercs]

@Meligy I changed to node 6 using nvm and run "npm rebuild node-sass".
I'm still getting the same error.

[deecm22]

dito.

[olivercs]

Looks like i found the issue. But still don't know how to solve it.

I set a console.log to the emitPath in node_modules/@angular/compiler-cli/src:38

CodeGenerator.prototype.codegen = function () {
var _this = this;
return this.compiler
.compileAll(this.program.getSourceFiles().map(function (sf) { return _this.ngCompilerHost.getCanonicalFileName(sf.fileName); }))
.then(function (generatedModules) {
generatedModules.forEach(function (generatedModule) {
var sourceFile = _this.program.getSourceFile(generatedModule.srcFileUrl);
var emitPath = _this.ngCompilerHost.calculateEmitPath(generatedModule.genFileUrl);
var source = GENERATED_META_FILES.test(emitPath) ? generatedModule.source :
PREAMBLE + generatedModule.source;

            console.log('emitPath:',emitPath );
    
            _this.host.writeFile(emitPath, source, false, function () { }, [sourceFile]);
        });
    });
};

the emitted path is:
src/client/aot/src/client/app.module.ngfactory.ts

But ngtools or webpack is looking for:
./aot/src/client/app.module.ts.ngfactory in /Volumes/User/oliver/htdocs/tu-prestamo-2/

Now i have to figure out why this is happening.

aot is the genDir.

[olivercs]

I set genDir to "." and remove the file extension in ngtools parameters. Now the emitted path from compiler-cli is:

/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/app.module.ngfactory.ts

and I still getting the same errors including:

...

Field 'browser' doesn't contain a valid alias configuration
/Volumes/User/oliver/htdocs/tu-prestamo-2/src/client/app.module.ngfactory.ts doesn't ex
ist.

...

Both path are the same. I don't understand why i still getting the same error.

[olivercs]

Found the problem.

packages/@ngtools/webpack/src/loaders.ts:38

I replaced:

const entryModuleFileName = path.normalize(entryModule.path + '.ngfactory');

with:

const entryModuleFileName = path.normalize(entryModule.path.replace(/.ts$/, '.ngfactory.ts'));

This fix solved my problem.

[jkuri]

@olivercs your fix does not seem to work for me.
Make sure that ngc runs without problems first, so ngfactory gets generated. in my case I had some additional .ts files in some other folder and ngc wants to compile those too but running this with @ngtools/webpack does not emit errors and just try to bundle it forward even if ngc fails.
my solution was to add "include": ["src/**/*.ts"] to tsconfig.json.

[keodime]

any update on that ?

[jeffreys-cat]

i still getting the same error...

[keodime]

We finally found that, Dllreferenceplugin is the source of that problem in my case.

[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.