AOT Compile Error

[Robert Lavoie]

Does this loader do the AOT for you? If so I am having some trouble getting it to compile. This is my error.

ERROR in ./src/app/app.routing.ts
Module not found: Error: Can't resolve '../../compiled/src/app/modules/intro/intro.module.ngfactory'

Webpack Module Rules:

rules: [
      {
        test: /\.ts$/,
	     use:[
		     { loader: 'awesome-typescript-loader', 
                           options: { configFileName: 'tsconfig.json' }},
		     { loader: 'angular2-template-loader' },
		     { loader: 'angular-router-loader', 
                           options: { aot: true, genDir: 'compiled' }}
	     ]
      }
]

tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": [
      "es2015", "dom"
    ],
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "suppressExcessPropertyErrors": true,
    "allowSyntheticDefaultImports" : true
  },
  "exclude": [
    "node_modules"
  ],
  "angularCompilerOptions": {
    "genDir": "compiled",
    "skipMetadataEmit" : true
  }
}

App Router:

import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '', loadChildren: './modules/intro/intro.module#IntroModule' }
];

export const AppRouter: ModuleWithProviders = RouterModule.forRoot(routes);

Folder Structure:

[Brandon Roberts]

No, this loader does not do AOT for you. You run the AOT compilation using the command line before you use this loader with webpack to bundle up your app.

An alternative to using this loader and the awesome-typescript-loader is to use the @ngtools/webpack loader from the CLI. It does compilation in webpack and looks for lazy loading.

https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack