angularjs - 提前编译的 Angular 2 给出错误 "A platform with a different configuration has been created."

Question

我想弄清楚这整个 compile Ahead-of-Time主意。我对这些好处很满意，但实际操作的过程让我很头疼。

我正在尽可能地遵循食谱。可能唯一的大区别是他们的 main.ts是我的boot.ts但是我的boot.ts字面上是剪切和粘贴他们的 main.ts .我的 package.json 中有他们说要安装的所有内容和以下任务:

"ngc": "ngc -p tsconfig-aot.json",
"rollup": "rollup -c rollup-config.js",
"copy-dist-files": "node build-scripts/copy-dist-files.js",
"aot": "npm run ngc && npm run rollup && npm run copy-dist-files"

tsconfig-aot.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "inlineSourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "pretty": false
  },
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

rollup-config.js:

import rollup from 'rollup';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';

export default {
  entry: 'aot/app/boot.js',
  dest: 'aot/app/bundle.js', // output a single application bundle
  moduleName: 'aot', // no idea what I'm SUPPOSED to put here, the rollup complained without it though
  sourceMap: false,
  format: 'iife',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      uglify()
  ]
}

我的 copy-dist-files.js只是一个节点脚本，用于将我的 css 和图像移动到 aot/ 中的位置并且似乎在所有平台上都运行良好。老实说，该文件没有任何内容是特定于 Angular 的。如果您需要它，我会发布它，但我正在努力保持整洁。

在我运行 npm run aot 之后它成功完成，我运行 http-server aot提供文件夹，我在控制台中收到此错误:

Uncaught Error: A platform with a different configuration has been created. Please destroy it first.

我从未使用 JiT 编译收到过错误。我不知道这是从哪里来的。每次我用谷歌搜索时，我都会发现人们询问与测试有关的问题，但这是关于在浏览器中运行的 bundle 。这些问题绕过了实际的错误文本，因为问题出在 their testing scaffolding 上。 .我不认为我正在加载任何其他平台，我不知道如何销毁它。特别奇怪的是，该网站似乎完全正常运行和运行。

不丑化 bundle.js 并没有帮助，因为错误似乎是在 Angular 的内部部分中抛出的，我没有写，也不想编辑。

我正在运行 Angular 2.1.1，所有浏览器都显示错误。这是怎么回事？

Answer 1

我想通了，很遗憾，因为我不了解我正在处理的过程，所以我没有在问题中提供足够的信息。

我在同一个文件 (boot.ts) 中定义我的模块并引导它，所以当我按照说明书创建一个 boot-aot.ts 时，它指向对于我的旧 boot.ts，仍然有对 @angular/platform-b​​rowser-dynamic 的引用和调用(特定于 JIT)，然后还有对 @ 的调用angular/platform-b​​rowser(特定于 AOT)。这就是创建两个平台的方式。

解决方法是在 module.ts 中定义我的模块，并有两个超简单的引导:

boot.ts:

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

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch((err: any) => console.error(err));

和 boot-aot.ts:

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory)
  .catch((err: any) => console.error(err));

boot.ts 将在调试时用于 JIT 编译，boot-aot.ts 在 rollup-config.js 中被引用.