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";

并将其添加到 declarations 部分 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 模块。

说了这么多，这里有一些解决方法

• 将指令 TS 文件从源 github angular2-auto-scroll.directive.ts 复制到您的项目并删除依赖项。
• 或您可以向 repo 发出拉取请求，要求将 "module": "commonjs" 更改为 "module": "es6" 注意：我为它打开了一个问题 here
• 或如果您不关心 aot，（强烈推荐顺便说一句），您可以通过在构建选项上运行 buildcommand 和 --aot=false read here 来取消它

希望这会有所帮助。

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