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
  }
}

汇总-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 具体的。如果你需要它，我会 post 但我正在努力保持清洁。

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

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

一个我从未收到过使用 JiT 编译的错误。我不知道这是从哪里来的。每次我 google 它时，我都会发现人们询问它与测试有关，但这是关于运行ning 在浏览器中的捆绑包。这些问题绕过实际的错误文本，因为问题出在。我不认为我正在加载任何其他平台，我不知道如何销毁它。特别奇怪的是，该网站似乎运行并且功能完全正常。

不丑化 bundle.js 也无济于事，因为这个错误似乎是 Angular 内部的部分，我没有写，也不想编辑。

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

Answer 1

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

我正在定义我的模块并在同一个文件中引导它 (boot.ts) 所以当我按照食谱创建一个指向我的旧 boot.ts 的 boot-aot.ts 时，有仍然引用和调用 @angular/platform-browser-dynamic（特定于 JIT），然后调用 @angular/platform-browser（特定于 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));

并启动-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.

中被引用

Angular 2 提前编译报错"A platform with a different configuration has been created."

Angular 2 compiled ahead of time gives error "A platform with a different configuration has been created."

angularjs

angular2-aot