Angular 2 AOT-引用尚未创建AppModuleNgFactory

我在一个模块中有一组组件，在同一个项目的不同模块下有一个示例应用程序。我有一个运行良好的现有JIT构建，我正在尝试过渡到AOT构建，在这里我遇到了一些问题。具体来说，

/src/index.aot.ts（2,34）：找不到模块'./aot/app/examples/app.module.ngfactory'

如何使用

AotPlugin

设置webpack，以便将我的应用程序的AOT版本正确构建到本地

dist

目录

/src/index.aot.ts

在此文件中，AppModuleNgFactory无法解析，因为它不存在。目前任何aot目录都没有生成任何内容，我不知道为什么

import 'core-js/client/shim';
import 'zone.js/dist/zone';

import '@angular/common';
import 'rxjs';

import {enableProdMode} from '@angular/core';
import {AppModuleNgFactory} from '../aot/app/examples/app.module.ngfactory';
import {platformBrowser} from '@angular/platform-browser';

enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

/tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [
      "node_modules/@types/"
    ],
    "target": "ES5",
    "types": [
      "node",
      "jasmine",
      "es6-shim"
    ]
  },
  "compileOnSave": false,
  "filesGlob": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "!node_modules/**"
  ],
  "exclude": [
    "node_modules",
    "dist/",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot/",
    "skipMetadataEmit": true
  }
}

webpack-dist.conf

...imports     
module.exports = {
  entry: {
    app: './src/index.aot.ts'
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loaders: [
          'json-loader'
        ]
      },
      {
        test: /\.(ttf|otf|eot|svg|png|jpg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'tslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.css$/,
        loaders: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?minimize!sass-loader!postcss-loader'
        })
      },
      {
        test: /\.scss$/,
        loaders: ['raw-loader', 'sass-loader']
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loaders: [
          '@ngtools/webpack'
        ]
      },
      {
        test: /\.html$/,
        loaders: [
          'html-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    FailPlugin,
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      conf.paths.src
    ),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new ExtractTextPlugin('index-[contenthash].css'),
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => [autoprefixer],
        resolve: {},
        ts: {
          configFileName: 'tsconfig.json'
        },
        tslint: {
          configuration: require('../tslint.json')
        }
      }
    }),
    new CopyWebpackPlugin([
      {from: 'index.html'}
    ]),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Tether: 'tether'
    }),
    new AotPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: './src/app/examples/index.ts#AppModule'
    }),
    new webpack.optimize.UglifyJsPlugin({
      output: {comments: false},
      compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase
    })
  ],
  output: {
    path: path.join(process.cwd(), conf.paths.dist, 'aot'),
    filename: '[name]-[hash].js'
  },
  resolve: {
    extensions: [
      '.webpack.js',
      '.web.js',
      '.js',
      '.ts'
    ]
  }
};

我错过了什么？为什么我需要引用像

index.aot.ts

这样的引导文件中不存在的文件

完整错误输出：

ERROR in ~/work/project/src/index.aot.ts (2,34): Cannot find module './aot/app/examples/app.module.ngfactory'.

ERROR in Could not resolve "./src/app/examples/app.module" from "./src/app/examples/app.module".

ERROR in ./src/index.aot.ts
Module not found: Error: Can't resolve './aot/app/examples/app.module.ngfactory' in '~/work/project/src'
 @ ./src/index.aot.ts 4:29-79

编辑：删除platformBrowser（）和生成的导入后，我发现了一个无法解释的错误：

ERROR in ./src/index.ts
Module not found: Error: Can't resolve './../$$_gendir/src/app/examples/app.module.ts.ngfactory'

---

您不需要将以下内容放入

main.ts

：

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

您必须在

main.ts中保留与非AOT生成相同的引导代码：

platformBrowserDynamic().bootstrapModule(AppModule)

生成AOT构建时，Angular AOT loader将代码重构为
bootstrapModuleFactory
。看见重要的是，
skipCodeGeneration
选项应该是
false
，这是默认值。
删除了1级错误，引用的源代码似乎表明这是正确的，但我离此还有一步之遥，其中一个原始错误仍然存在。中的错误无法从“/src/app/examples/index.ts”解析“/src/app/examples/index.ts”。未找到./src/index.ts模块中的错误：错误：无法解析'/Users/a554173/work/angular2学生贷款组件/src'中的'/../aot/src/app/examples/index.ts.ngfactory'.@./src/index.ts 8:27-82似乎我确实需要一个entryModule定义，尽管我不确定我所拥有的东西到底出了什么问题。@StefanKendall，这个错误似乎超出了这个问题的范围。您是否可以创建另一个问题来显示应用程序的项目结构？通常，您不需要做任何特殊的事情就可以使用AOT插件获得构建AOT。我通过创建新的angular cli项目，然后运行
ng eject
，然后修改新的AOT插件选项（删除skipCodeGeneration），然后运行
npm build
成功地构建了项目，并没有成功构建。但我目前正在剥离该项目，以尝试创建一个最小的错误。