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

我有一个angular度的应用程序,

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网站

并在app.module.ts中导入它

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

并将其添加到声明部分构build – 生产失败,这个错误

 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来构build没有–prod时,所有的构build都很好。 有谁知道可能是什么原因? 或者任何其他方式,我可以导入这个NPM包,所以它不会失败PROD构build?

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

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

如果你看一下tsconfig.js文件,特别是"module": "commonjs" 。 你会发现这个指令转换的模块是commonjs如果你在C:/coding/workspace/myapp/myapp-web/node_modules/angular2-auto-scroll/lib/下查看你的项目,你会看到一个TStypes定义.d.ts.js.map文件。 js文件是一个commonjs模块。

AOT不喜欢commonjs模块,你可以自己研究,它需要一个es5es6模块。

所有这一切,这里有一些选项来解决它

  • 将指令TS文件从源github angular2-auto-scroll.directive.ts复制到您的prject并删除相关性。
  • 或者你可以向repo请求改变"module": "commonjs""module": "es6"注意:我在这里打开了一个问题
  • 或者如果你不关心aot,(强烈推荐btw),你可以通过运行build命令来取消它 – --aot=false 在这里阅读 --aot=false选项

希望这可以帮助。

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

Interesting Posts