Question

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

＆＃13;

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

＆＃13;

执行ngc会产生一个名为＆＃34; aot＆＃34;的文件夹。它还有一个＆＃34; node_modules＆＃34;文件夹如下

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的当前行为，我们可以将这些工厂暴露给ES5吗？

Answer 1

是的，考虑到ngc的当前行为，你可以将这些工厂暴露给ES5。

你不必在ngc之后运行tsc，因为ngc会为你运行tsc。您应该在outDir（out-tsc）而不是genDir（aot）中查看最终结果。如果使用Angular 5你甚至看不到那个dir。

还建议将“模块”参数设置为“es2015”而不是“commonjs”，然后运行汇总以进行树状抖动和最终es5捆绑。

您不需要node_modules / aot的排除项，因为这些需要使用最终的bundle进行编译。

您可以在此处查看包含ngc和汇总的完整示例：

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

目前升级到Angular 5，但是如果你看一下以前的版本，你可以按照配置回到Angular 2。

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

1 个答案: