Angularjs 提前编译的角度2给出错误“；已创建具有不同配置的平台。”；

我想弄清楚这整个想法。我相信这些好处，但实际上这样做的过程让我头疼

我正在尽可能地关注食谱。可能唯一的区别是他们的

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/

中，并且似乎在所有平台上都能正常工作。老实说，关于那个文件，没有什么是真正的角度特定的。如果你需要的话，我会把它贴出来，但我会尽量保持干净

在我运行

npm run aot

后，它成功完成，我运行

http服务器aot

来提供文件夹，我在控制台中收到以下错误：

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

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

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

---

我正在运行Angular 2.1.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));

和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编译，并且

rollup config.js

中引用了

boot aot.ts