3

我试图弄清楚整个编译提前的想法。我被这些好处所推销，但实际这样做的过程让我头疼。

我尽可能地遵循食谱。可能唯一的大区别是他们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/并且似乎在所有平台上都可以正常工作。老实说，关于该文件的任何内容都不是特定于角度的。如果您需要它，我会发布它，但我会尽量保持清洁。

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

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

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

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

我正在运行 Angular 2.1.1，并且所有浏览器中都显示错误。这里发生了什么？

4

1 回答 1

2

我想通了，可悲的是，因为我不了解我正在处理的过程，我没有在问题中提供足够的信息。

我正在定义我的模块并在同一个文件boot.ts中引导它（）。这就是创建两个平台的方式。boot-aot.tsboot.ts@angular/platform-browser-dynamic@angular/platform-browser

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

引导.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.

于 2016-10-26T13:12:46.337 回答