Question

我有一个angular-cli app，

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模块。

所有这一切，以下是一些解决方法

将指令TS文件从源github angular2-auto-scroll.directive.ts复制到您的prject并删除依赖项。
或您可以向回购请求提出拉取请求，要求将"module": "commonjs"更改为"module": "es6"注释：我为它开了一个问题here
或如果您不关心aot（强烈推荐btw），您可以通过build read here运行--aot=false命令取消它关于构建选项

希望这会有所帮助。

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

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

1 个答案: