node.js - Angular2 在 angular-cli 下使用指令和 ng build --prod 进行构建

Question

我有一个 angular-cli 应用程序，

npm -v 3.10.8
node -v v6.9.1
angular2 ^2.4.0
angular/cli 1.0.0-beta.32.3

当我添加到package.json时

"angular2-auto-scroll": "1.0.12"

angular2-auto-scrol website

并在app.module.ts中导入它

import { Angular2AutoScroll } from "angular2-auto-scroll/lib/angular2-auto-scroll.directive";

并将其添加到声明部分ng build --prod失败并出现此错误

ERROR in Unexpected value 'Angular2AutoScroll in C:/coding/workspace/myapp/myapp-web/node_modules/angular2-auto-scroll/lib/angular2-auto-scroll.directive.d.ts' declared by the module 'AppModule in C:/coding/workspace/myapp/myapp-web/app_code/app/app.module.ts'
ERROR in ./app_code/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\coding\workspace\myapp\myapp-web\app_code'
 @ ./app_code/main.ts 6:0-74
 @ multi ./app_code/main.ts

但是，当我仅使用 ng build 构建而不使用 --prod 时，一切都会构建良好。有谁知道可能是什么原因？或者我可以通过任何其他方式导入此 npm 包，这样它就不会导致 PROD 构建失败？

Answer 1

问题出在 AOT 编译上。使用 --prod 标志时默认会发生 AOT。

看一下 angular2-auto-scroll 的源代码该项目在 src/angular2-auto-scroll.directive.ts 中定义了一个 TS 文件。

如果你看tsconfig.js file特别是“module”:“commonjs”。你会看到该指令转换为的模块是commonjs如果您在 C:/coding/workspace/myapp/myapp-web/node_modules/angular2-auto-scroll/lib/ 下查看项目，您将看到 TS 类型定义 .d .ts、一个 .js 和一个 .map 文件。 js 文件是一个 commonjs 模块。

AOT 不喜欢 commonjs 模块，你可以自己研究一下，它需要 es5 或 es6 模块。

综上所述，这里有一些修复它的选项

• 从源github复制指令TS文件angular2-auto-scroll.directive.ts添加到您的项目并删除依赖项。
• 或者您可以向存储库发出拉取请求，要求将 "module": "commonjs" 更改为 "module": "es6" 注意:我为其打开了一个问题 here
• 或如果您不关心 aot(顺便说一句强烈推荐)，您可以通过使用 --aot= 运行 build 命令来取消它假 read here关于构建选项

希望这有帮助。

AOT 资源: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html https://github.com/angular/angular-cli/issues/1732