在angular-cli下使用指令和ng build --prod进行Angular2构建 [英] Angular2 build under angular-cli with directive and ng build --prod

问题描述

我有一个angular-cli应用程序

I have an 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网站

并在 app.module.ts 中将其导入

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

并将其添加到声明部分 ng build --prod 失败，并出现此错误

and add it to declarations section ng build --prod fails with this error

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构建?

however when I build with just ng build without --prod then all build fine. Does anyone know what could be the reason? Or any other way I can import this npm package so it does not fail PROD build?

推荐答案

问题在于AOT编译.使用--prod标志时，默认情况下会发生AOT.

The issue is with AOT compilation. AOT happens by default when using --prod flag.

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

如果您查看 tsconfig.js文件特别是"module": "commonjs".您会看到该指令转换为的模块为commonjs 如果在C:/coding/workspace/myapp/myapp-web/node_modules/angular2-auto-scroll/lib/下的项目中查看，则会看到TS类型定义.d.ts，.js和.map文件. js文件是一个commonjs模块.

If you look at the tsconfig.js file specifically "module": "commonjs". you'll see that the module this directive transpiles to is commonjs If you look in your project under C:/coding/workspace/myapp/myapp-web/node_modules/angular2-auto-scroll/lib/ you'll see a TS type definition .d.ts, a .js and a .map file. the js file is a commonjs module.

AOT不喜欢commonjs模块，您可以自己研究，它需要es5或es6模块.

AOT does not like commonjs modules, you can research that on your own, it needs either an es5 or es6 module.

所有这些，这里有一些解决方案

• 从源github ="nofollow noreferrer"> angular2-auto-scroll.directive.ts 并删除依赖项.
• 或，您可以向仓库发出请求，要求将"module": "commonjs"更改为"module": "es6"注意:我为此问题

• Copy the directive TS file from the source github angular2-auto-scroll.directive.ts to your prject and remove the dependency.
• or you can make a pull request to the repo asking to change the "module": "commonjs" to "module": "es6" note: I opened an issue for it here
• or if you do not care for aot, (which is highly recommended btw), you can cancel it by running buildcommand with --aot=false read here on build options

希望这会有所帮助.

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

Resources on AOT: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html https://github.com/angular/angular-cli/issues/1732

这篇关于在angular-cli下使用指令和ng build --prod进行Angular2构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！