Error in [at-loader] Cannot find module './app.component.ngfactory'

Question

My error is as follows:

ERROR in [at-loader] assets\app\app.module.ngfactory.ts:28:27 Cannot find module './app.component.ngfactory'.

After I ran npm run build the app.module.ngfactory.ts was created as expected but it created a reference to a module I don't have/can't find:

import * as import21 from './app.component.ngfactory';

Looking at the aot-complier link I see the following in the Compiling the application section:

The curious can open the aot/app.component.ngfactory.ts to see the original Angular template syntax in its intermediate, compiled-to-TypeScript form.

I think that my problem might be coming from the fact that when I run

"node_modules/.bin/ngc" -p tsconfig-aot.json

It wants a name assigned to the component it is creating and I'm not sure if that name can be anything, or if it needs to be something specific. I have tried the names NgFactory, app.component.ngfactory and the name of my project but none of these have made any changes I can see . I also do no see a folder being specified as genDir in my tsconfig-aot.json file, only outDir.

After ngc completes, look for a collection of NgFactory files in the aot folder (the folder specified as genDir in tsconfig-aot.json).

The following is what my tsconfig-aot.json currently contains:

    {
    "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "./public/js/app"
    },
    "exclude": [
    "node_modules",
    "dist",
    "assets/app/polyfills.ts"
    ],

    "angularCompilerOptions": {
    "skipMetadataEmit" : true
    }

}

Please let me know if you need any additional information. I haven't been able to find anything on this and I've been looking for two days now.

Answer 1

I finally got app.component.ngfactory to build/my entire aot folder. I looked more closely at angular cookbook aot-compiler and decided to re-do some of the instantiations and the following is what made it work:

npm install @angular/compiler-cli @angular/platform-server --save

I'm guessing it either didn't properly install the first time or something else happened. After I installed this I was able to run the following and it generated the aot folder:

"node_modules/.bin/ngc" -p tsconfig.aot.json

I also changed my tsconfig.aot.json file to the following:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "./public/js/app"
  },

  "files": [
    "app/app.module.ts",
    "app/main.aot.ts"
  ],

  "exclude": [
    "node_modules",
    "dist",
    "assets/app/polyfills.ts"
  ],

  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}