无法使用 ngc 和 tsc 创建 AOT ES5 兼容代码

Question

我相信在来这里提问之前我已经尝试了几种选择。我有一个 angular2 库，我使用 ngc 编译了 AOT。我正在使用普通的 npm 脚本，目前没有 webpack。下面是使用的tsconfig，

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": ["dom","es2015"],
    "outDir": "tsc-out"
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*",
    "aot/",
    "app/boot-aot.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot/",
    "strictMetadataEmit" : true
  }
}

执行 ngc 会生成一个名为 "aot" 的文件夹，其中还有一个 "node_modules" 文件夹，如下所示

aot 文件夹内容

app
node_modules
 @angular
 @ngbootstrap 
 rxjs

到目前为止，工厂看起来都还不错，但它们是 ts 文件。但我打算对此输出执行 tsc，以便我可以在原生 ES5 环境中使用这些工厂。所以我想我可以运行使用不同的 tsconfig 文件在此文件夹上创建一个 tsc。

此步骤不会生成 node_modules 文件夹。由于这个原因，一些生成的工厂文件不正确，因为它仍然引用应该生成的 node_modules 文件夹。例如，生成的 app.module.ngfactory.js（在 app 文件夹内）有类似

的引用

var import59 = require("../node_modules/@ng-bootstrap/ng-
bootstrap/tooltip/tooltip.ngfactory");
var import60 = require("../node_modules/@ng-bootstrap/ng-
bootstrap/typeahead/typeahead-window.ngfactory");

我是不是搞错了什么？我尝试了几种不同的组合，但似乎我在这里遗漏了一些信息。鉴于 ngc 和 tsc 的当前行为，我们能否将这些 aot 工厂暴露给 ES5？

Answer 1

是的，鉴于 ngc 的当前行为，您可以将这些 aot 工厂暴露给 ES5。

您不必在 ngc 之后运行 tsc，因为 ngc 运行s tsc 适合您。您应该在 outDir (out-tsc) 而不是 genDir (aot) 中查看最终结果。如果使用 Angular 5 你甚至看不到那个 aot 目录。

还建议将 "module" 参数设置为 "es2015" 而不是 "commonjs"，然后运行 rollup 进行 tree-shaking 和最终的 es5 捆绑。

您不需要 node_modules/aot 的排除项，因为这些需要与最终包一起编译。

您可以在此处查看带有 ngc 和 rollup 的完整示例：

https://github.com/fintechneo/angular2-templates

目前升级到Angular5，但是如果你看以前的版本可以按照配置回Angular2.

无法使用 ngc 和 tsc 创建 AOT ES5 兼容代码

Unable to create AOT ES5 compatible code using ngc and tsc

aot

typescript

angular