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

问题描述

我有一个 angular-cli 应用程序，

npm -v 3.10.8节点 -v v6.9.1角 2 ^2.4.0角度/cli 1.0.0-beta.32.3

当我添加到 package.json 这个

"angular2-auto-scroll": "1.0.12"

angular2-auto-scroll 网站

并在 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' 声明C:/coding/workspace/myapp/myapp-web/app_code/app/app.module.ts 中的模块AppModule"未找到 ./app_code/main.ts 模块中的错误:错误:无法解析 'C:\coding\workspace\myapp\myapp-web\app_code 中的 './$$_gendir/app/app.module.ngfactory''@ ./app_code/main.ts 6:0-74@多 ./app_code/main.ts

但是，当我仅使用 ng build 构建而没有 --prod 时，所有构建都很好.有谁知道可能是什么原因?或者我可以通过任何其他方式导入这个 npm 包，这样它就不会导致 PROD 构建失败?

解决方案

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

看一下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 模块.

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

说了这么多，这里有一些解决方法

• 从源 github 复制指令 TS 文件 angular2-auto-scroll.directive.ts 到您的项目并删除依赖项.
• 或您可以向存储库发出拉取请求，要求将 "module": "commonjs" 更改为 "module": "es6" 注意:我为它打开了一个问题 here
• 或者如果你不关心aot(顺便说一句强烈推荐)，你可以通过运行build命令和--aot=来取消它false 阅读此处关于构建选项

希望这会有所帮助.

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

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

when I add to package.json this

"angular2-auto-scroll": "1.0.12"

angular2-auto-scrol website

and in app.module.ts import it

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

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

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?

解决方案

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

take a look at the source code for angular2-auto-scroll That project defines one TS file in the src/angular2-auto-scroll.directive.ts

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 does not like commonjs modules, you can research that on your own, it needs either an es5 or es6 module.

All that said, here are some options to fix it

• 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

hope this helps.

Resources on 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！