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
模块,你可以自己研究,它需要一个es5
或es6
模块。
所有这一切,这里有一些选项来解决它
- 将指令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