title: Angular 5 webpack 3 aot
body: <p>I'm trying to make an aot build with webpack 3 and angular 5, but there are so many tutorials on the net and none show complete example without questions, so far I've got the following configuration:
  (For those who have questions about paths - I use it in the java app)</p>
  
  <p>webpack.config.aot.js:</p>
  
  <pre><code>const webpack = require("webpack");
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  const ngToolsWebpack = require('@ngtools/webpack');
  
  module.exports = {
      context: __dirname + "/src/main/webapp/resources/script/",
      entry: {
          app: "./core/main.aot.ts",
          vendor: "./vendor.ts",
          polyfills: "./polyfills.ts"
      },
      output: {
          filename: 'js/[name].js',
          chunkFilename: "js/chunks/[id].chunk.js",
          publicPath: "resources/compiled/",
          path: __dirname + '/src/main/webapp/resources/compiled'
      },
      resolve: {
          alias: {
              STYLES: __dirname + "/src/main/webapp/resources/css/",
              SCRIPT: __dirname + "/src/main/webapp/script/"
          },
          extensions: [".js", ".json", ".scss", ".ts"]
      },
      module: {
          rules: [
              {
                  test: /[\/]angular\.js$/,
                  loader: 'exports-loader?angular'
              },
              {
                  test: /\.html$/,
                  loader: 'raw-loader'
              },
              {
                  test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                  loader: '@ngtools/webpack'
              }
          ]
      },
      plugins: [
          new ngToolsWebpack.AngularCompilerPlugin({
              tsConfigPath: './tsconfig.aot.json',
              entryModule: './src/main/webapp/resources/script/core/i18n/app.module.en#AppModule'
          })
      ]
  };
  </code></pre>
  
  <p>tsconfig.aot.json:</p>
  
  <pre><code>{
    "compilerOptions": {
      "module": "es2015",
      "moduleResolution": "node",
      "target": "es5",
      "noImplicitAny": false,
      "sourceMap": true,
      "mapRoot": "",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [
        "es2015",
        "dom"
      ],
      "outDir": "lib",
      "skipLibCheck": true,
      "rootDir": "."
    },
    "exclude": [
      "node_modules/*",
      "target/*"
    ],
    "angularCompilerOptions": {
      "genDir": "./src/main/webapp/resources/script/factory",
      "rootDir": ".",
      "baseUrl": "/"
    }
  }
  </code></pre>
  
  <p>main.aot.ts:</p>
  
  <pre><code>import {platformBrowser} from '@angular/platform-browser';
  import {enableProdMode} from "@angular/core";
  import {AppModuleNgFactory} from '../factory/app/app.module.ngfactory';
  
  enableProdMode();
  
  platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
  </code></pre>
  
  <p>File structure(simplified):</p>
  
  <pre><code>- webpack.config.aot.js
  - tsconfig.aot.js
  - src/
    - main/
      - webapp/
        - resources/
          - script/
            - vendor.ts
            - polyfills.ts
            - core/
              - main.aot.ts
              - i18n/
                - app.module.en.ts
  </code></pre>
  
  <p>(Please let me know if I haven't showed something relevant)</p>
  
  <p>So when I'm tring to build it using <code>webpack -p --config ./webpack.config.aot.js</code></p>
  
  <p>I get following error: </p>
  
  <pre><code>ERROR in src/main/webapp/resources/script/core/main.aot.ts(5,34): error TS2307: Cannot find module '../factory/app/app.module.ngfactory'.
  </code></pre>
  
  <p>Which sound pretty legitimate as there is no AppModuleNgFactory there, but as i looked in tutorials it is supposed to be generated upon aot build, using genDir, am I right? (please not that if i omit app/ folder, so path looks '../factory/app.module.ngfactory' i get the same error)</p>
  
  <p><strong>Is it right to point at the non-existing AppModuleNgFactory on the aot build with @ngtools/webpack?</strong></p>
  
  <p><strong>What is that AppModuleNgFactory? There is little to no documentation about anythig of it on the angular site</strong></p>
  
  <p><strong>What should I change in my config to successfully generate aot build?</strong></p>
  
  <p>If I change main file to bootstrap AppModule itself, it builds successfully, but in browser i get <code>NullInjectorError: No provider for t!</code> error</p>
  
  <p>Without minification it shows: <code>No provider for CompilerFactory!</code></p>