AppModule中的Angular 4 @ ngtools / webpack錯誤不是NgModule

Question

我在這里失去希望...不知道出什么問題了，我似乎找不到合適的解決方案。 我正在嘗試使用@ ngtools / webpack實現Aot，但遇到此錯誤， ERROR in AppModule is not an NgModule ，看來我做了什么，沒有任何幫助。 有一些關於如何使用angular-cli解決此問題的示例，但它們似乎不適用於webpack。

是否有人遇到此問題或知道解決方案？

我的webpack配置：

 const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const Aot =  require('@ngtools/webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    rules: [
        {
            test: /\.json$/,
            loaders: [
              'json-loader'
            ]
        },
        {
            test: /\.(css|scss)$/,
            loaders: [
              'style-loader',
              'css-loader',
              'sass-loader',
              'postcss-loader'
            ]
        },
        {
            test: /\.ts$/,
            loader: '@ngtools/webpack',
        },
        {
            test: /\.html$/,
            loaders: [
              'html-loader'
            ]
        }
    ]
  },
  plugins: [
    new Aot.AotPlugin({
        tsConfigPath: '../ui/tsconfig.json',
        entryModule: __dirname + '/../src/index.ts#AppModule'
    }),
    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.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)@angular/,
      path.resolve(__dirname, '../src')
    )
  ],
  devtool: 'source-map',
  output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: 'index.js'
  },
  resolve: {
    extensions: [
      '.webpack.js',
      '.web.js',
      '.js',
      '.ts'
    ]
  },
  entry: `./${conf.path.src('index')}`
};

Package.json文件：

{
  "name": "stiqqs",
  "version": "1.0.0",
  "description": "",
  "license": "",
  "dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/common": "^4.1.0",
    "@angular/compiler": "^4.1.0",
    "@angular/compiler-cli": "^4.4.0-RC.0",
    "@angular/core": "^4.1.0",
    "@angular/forms": "^4.1.0",
    "@angular/http": "^4.1.0",
    "@angular/platform-browser": "^4.1.0",
    "@angular/platform-browser-dynamic": "^4.1.0",
    "@angular/router": "^4.1.0",
    "@ngtools/webpack": "^1.6.2",
    "@types/node": "^7.0.16",
    "angular2-notifications": "^0.7.3",
    "core-js": "*",
    "gulp": "github:gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-hub": "github:frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "hammerjs": "^2.0.8",
    "ng2-completer": "^1.4.0",
    "ng2-metadata": "^1.4.2-final",
    "ngx-modal": "0.0.29",
    "ngx-pagination": "^3.0.0",
    "rxjs": "^5.3.1",
    "time-ago-pipe": "^1.2.1",
    "tslint-loader": "^3.5.3",
    "typescript": "^2.3.2",
    "webpack": "^2.5.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@types/es6-shim": "^0.31.32",
    "@types/jasmine": "^2.5.43",
    "@types/node": "^7.0.5",
    "autoprefixer": "^6.7.3",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.3.2",
    "browser-sync": "^2.18.8",
    "browser-sync-spa": "^1.0.3",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.26.1",
    "del": "^2.2.2",
    "es6-shim": "^0.35.3",
    "eslint": "^3.15.0",
    "eslint-config-xo-space": "^0.15.0",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-babel": "^4.0.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-filter": "^5.0.0",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-sass": "^3.1.0",
    "gulp-util": "^3.0.8",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.3.1",
    "rimraf": "^2.5.1",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "tslint": "^4.4.2",
    "tslint-loader": "^3.4.2",
    "typescript": "^2.1.5",
    "webpack": "^2.5.0",
    "webpack-deploy": "github:productboard/webpack-deploy",
    "webpack-fail-plugin": "^1.0.5"
  },
  "scripts": {
    "build": "rimraf dist && webpack --progress --profile --bail --config ./conf/webpack-dist.conf.js && cp -r ./src/css ./dist && cp -r ./src/img ./dist && mkdir -p ./dist/app/views && cp -r ./src/app/views/* ./dist/app/views/",
    "serve": "gulp serve watch",
    "serve:dist": "gulp serve:dist",
    "test": "gulp test",
    "test:auto": "gulp test:auto",
    "deploy": "webpack -p --config ./conf/webpack-dist.conf.js"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "jasmine": true
    },
    "parser": "babel-eslint",
    "extends": [
      "xo-space/esnext"
    ]
  },
  "repository": {}
}

索引

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

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

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/index';

declare var process: any;
if (process.env.NODE_ENV === 'production') {
  enableProdMode();
} else {
  Error['stackTraceLimit'] = Infinity; // tslint:disable-line:no-string-literal
  require('zone.js/dist/long-stack-trace-zone'); // tslint:disable-line:no-var-requires
}

platformBrowserDynamic().bootstrapModule(AppModule);

編輯：

好了，除去index.ts＃的AppModule .TS在entryModule ：

new Aot.AotPlugin({
        tsConfigPath: '../ui/tsconfig.json',
        entryModule: __dirname + '/../src/app/index#AppModule' <-- HERE
    }),

似乎可以消除該錯誤，但是該應用似乎沒有被編譯為aot。 文件大小從1.92mb跳到了4.42mb，類似於tsc 。 （開發中無壓縮或壓縮）。 我感覺與以下因素有關：

entry: `./${conf.path.src('index')}`

但不確定如何解決它:)

Answer 1

相信在進行AOT構建時，我希望您可以將webpack與生成的ngFactory模塊一起使用，此外，您還希望使用platform-b​​rowser而不是platform-b​​rowser-dynamic。 我沒有使用@ngtools-webpack ，但我建議您查看一個Angular Starter項目，該項目為您完成了許多樣板工作。 我們正在使用https://github.com/AngularClass/angular-starter

這是我們在進行AOT構建時使用的index.ts的示例：

import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from '../compiled/src/app/app.module.ngfactory';

export function main(): Promise<any> {
  return platformBrowser()
    .bootstrapModuleFactory(AppModuleNgFactory)
  .catch((err: Error) => {
    document.write(err.message);
  });
}

switch (document.readyState) {
  case 'loading':
    document.addEventListener('DOMContentLoaded', _domReadyHandler, false);
    break;
  case 'interactive':
  case 'complete':
  default:
    main();
}

function _domReadyHandler() {
  document.removeEventListener('DOMContentLoaded', _domReadyHandler, false);
  main();
}

強調：

1. 從編譯/轉譯的結果中導入AppModuleNgFactory
2. 導入平台瀏覽器並使用platformBrowser().boostrapModuleFactory()