1

我们最近从 angular 4 升级到了 angular 5。我们还升级到了 webpack 3。通过摆脱 main.aot.ts 并直接指向 main.ts 来管理我们的 aot 构建工作，但我们无法加载构建. 我们看到“未定义 AppService”错误。有人可以帮忙吗？

main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

webpack.config.js

module.exports = {
bail: true,
resolve: {
    extensions: ['.js', '.ts'],
    alias: {
        jquery: "jquery/src/jquery"
    }
},

entry: {
    'app': './app/main.ts',
},
output: {
    path: './compiled',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
},

plugins: [
    new ngToolsWebpack.AngularCompilerPlugin({
        tsConfigPath: './tsaotconfig.json',
        entryModule: __dirname + '/../app/app.module#AppModule'
    }),
  ]
}

错误

Uncaught ReferenceError: AppService is not defined
at e.ctorParameters (http://localhost:4200/bundle/app.js:1:915567)
at e._ownParameters (http://localhost:4200/bundle/app.js:1:60309)
at e.parameters (http://localhost:4200/bundle/app.js:1:60727)
at e.parameters (http://localhost:4200/bundle/app.js:1:1250184)
at e._getDependenciesMetadata (http://localhost:4200/bundle/app.js:1:1439376)
at e._getTypeMetadata (http://localhost:4200/bundle/app.js:1:1438259)
at e.getNonNormalizedDirectiveMetadata (http://localhost:4200/bundle/app.js:1:1431328)
at e._getEntryComponentMetadata (http://localhost:4200/bundle/app.js:1:1442081)
at http://localhost:4200/bundle/app.js:1:1441836
at Array.forEach (native)
4

1 回答 1

1

我能够制作一个示例 angular5 应用程序内置AOT

https://github.com/tomalex0/angularx-aot-jit

我创建了一个示例 angular5 应用程序，它生成AOT和JIT，可能与您的结构不同，但可以工作

https://github.com/tomalex0/angularx-aot-jit

这种提交差异将更好地了解我在更新到 angular5 时所做的所有更改 https://github.com/tomalex0/angularx-aot-jit/commit/1435fddf1a6336f05e63f30062cb4cd2d0ba771f

tsconfig-aot.json 用于 angular5

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "mapRoot": "",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "outDir": "aot",
    "skipLibCheck": true,
    "rootDir": "."
  }
}
  1. 不再需要"angularCompilerOptions": {"genDir": "aot" }|
  2. 在 webpack 配置中将条目设置为entry: './js/ng2/app/main.jit.ts'
  3. 在 webpack const { AngularCompilerPlugin } = require('@ngtools/webpack');和插件中作为new AngularCompilerPlugin({tsConfigPath: './tsconfig-aot.json', entryModule: ...})
于 2017-12-05T18:25:33.660 回答