我在这里失去了希望......不知道什么是错的，我似乎找不到合适的解决方案。我试图用@ 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": {}
}
index.ts
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);
修改
好的，所以从{。{1}}中的index.ts＃AppModule中删除.ts：
entryModule似乎删除了该错误，但该应用程序似乎没有被编译为aot。文件大小从1.92mb跳到4.42mb，类似于new Aot.AotPlugin({
tsConfigPath: '../ui/tsconfig.json',
entryModule: __dirname + '/../src/app/index#AppModule' <-- HERE
}),
。 （在开发中没有压缩或缩小）。我感觉它与它有关：
tsc但不确定如何解决它:)
答案 0 :(得分：0)
在进行AOT构建时，我相信您需要让webpack与生成的ngFactory模块一起工作，此外，您还需要使用平台浏览器而不是平台浏览器动态。我没有使用@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();
}
亮点：
platformBrowser().boostrapModuleFactory()