使用指令和 ng build --prod 在 angular-cli 下构建 Angular2

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 That project defines one TS file in the src/angular2-auto-scroll.directive.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，（强烈推荐顺便说一下），你可以通过运行 build命令取消它--aot=false read here 构建选项

希望这对您有所帮助。

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

使用指令和 ng build --prod 在 angular-cli 下构建 Angular2

Angular2 build under angular-cli with directive and ng build --prod

node.js

angular

npm

angular-cli

autoscroll