Question

我只是想知道AOT流程有多成熟，以便使用它或尝试不同的方法。我问，因为我在尝试应用这个例子时遇到了很多麻烦 https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

到我的应用。我收到了数百个错误。看起来它需要所有对象的类型化类。我正在使用像d3这样的库和时刻，因此修复“未打字”问题并不容易。我也遇到了relative paths的问题。

因此，它不会生成js文件，也无法运行汇总。

是否有任何文档需要阅读才能配置编译器来解决这些问题？

应用程序在“DEV”模式下运行没有问题。

Answer 1

要解决您的编译问题，请确保您已安装@types/d3

npm install @types/d3

要解决AOT相对路径问题（假设您指的是相对模板网址），您应该在使用rollup之前将模板文件内联为预构建步骤。

例如，使用Gulp和名为inlineNg2Template的工具内联HTML组件模板：

gulp.task('compile:es6', function () {
  return gulp.src(['./src/**/*.ts'])
    .pipe(inlineNg2Template({ base: '/src', useRelativePaths:true }))
    .pipe(tsc({
      "target": "es5",
      "module": "es6",
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["es6", "dom"]
    }))
    .pipe(gulp.dest('./dist/src'));
});

注意：module系统必须es6才能生成汇总。

然后您的rollup Gulp任务可以创建UMD，AMD和CJS捆绑包：

gulp.task('rollup:module', function() {
  return rollup.rollup({
    entry: pkg.main,
    onwarn: function (warning) {
      // Skip certain warnings

      // should intercept ... but doesn't in some rollup versions
      if (warning.code === 'THIS_IS_UNDEFINED') { return; }
      // intercepts in some rollup versions
      if ( warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }

      if ( warning.message.indexOf("treating it as an external dependency") > -1 ) { return; }

      if (warning.message.indexOf("No name was provided for external module") > -1) { return; }

      // console.warn everything else
      console.warn(warning.message);
    }

  }).then( function ( bundle ) {
    bundle.write({
      dest: `dist/${pkg.name}.bundle.umd.js`,
      format: 'umd',
      exports: 'named',
      moduleName: pkg.name,
      globals: {
      }
    });
    bundle.write({
      dest: `dist/${pkg.name}.bundle.cjs.js`,
      format: 'cjs',
      exports: 'named',
      moduleName: pkg.name,
      globals: {
      }
    });
    bundle.write({
      dest: `dist/${pkg.name}.bundle.amd.js`,
      format: 'amd',
      exports: 'named',
      moduleName: pkg.name,
      globals: {
      }
    });    
  });
});

Demo Starter App with AOT

Answer 2

使用AOT进行编译会对包大小和加载时间产生很大影响。我现在已经将它用于了几个项目并且运行良好。你说你使用其他库，我已经解决了这个问题，将它们编译成jspm sfx包，除了角度aot包之外我加载它（使用全局导出 - 见下文）。

我创建了一个带有AOT包的工作示例应用程序（使用ngc和汇总），您可以在此处找到https://github.com/fintechneo/angular2-templates/

该示例使用material2并显示SVG图表，其中属性由Angular2控制。

不幸的是，在这个例子中没有外部库（一切都被编译成一个生产包） - 但这里是一个jspm命令，我用来在另一个项目中创建一个库包。

jspm bundle-sfx somelib somelib.min.js --skip-source-map --format global --minify --global-name SomeLib

您只需在aot包之前加载带有脚本标记的包，并使用该库在typescript文件中声明名称为SomeLib的var。

Angular AOT成熟度

2 个答案: