【Angular项目生产环境构建问题集锦1】--ERROR in Type XX is part of the declarations of 2 modules;

生产环境构建命令:

本项目中用output-path命令改变了构建后的输出文件夹名称

ng build --prod --output-path=prod --base-href ./

详细错误信息示例:

ERROR in Type SafeHtmlPipe in E:/Hepburn‘s desk/graduate-FrontEnd/src/app/workspace/notice/my-notice/keep-htm
l.pipe.ts is part of the declarations of 2 modules: MyNoticeModule in E:/Hepburn‘s desk/graduate-FrontEnd/src
/app/workspace/notice/my-notice/my-notice.module.ts and NoticeListModule in E:/Hepburn‘s desk/graduate-FrontE
nd/src/app/workspace/notice/my-notice/notice-list/notice-detail/notice-detail.module.ts! Please consider movin
g SafeHtmlPipe in E:/Hepburn‘s desk/graduate-FrontEnd/src/app/workspace/notice/my-notice/keep-html.pipe.ts to
a higher module that imports MyNoticeModule in E:/Hepburn‘s desk/graduate-FrontEnd/src/app/workspace/notice/
my-notice/my-notice.module.ts and NoticeListModule in E:/Hepburn‘s desk/graduate-FrontEnd/src/app/workspace/n
otice/my-notice/notice-list/notice-detail/notice-detail.module.ts. You can also create a new NgModule that exp
orts and includes SafeHtmlPipe in E:/Hepburn‘s desk/graduate-FrontEnd/src/app/workspace/notice/my-notice/keep
-html.pipe.ts then import that NgModule in MyNoticeModule in E:/Hepburn‘s desk/graduate-FrontEnd/src/app/work
space/notice/my-notice/my-notice.module.ts and NoticeListModule in E:/Hepburn‘s desk/graduate-FrontEnd/src/ap
p/workspace/notice/my-notice/notice-list/notice-detail/notice-detail.module.ts.


关注点:

这里写图片描述

Please consider moving SafeHtmlPipe in E:/Hepburn‘s desk/graduate-FrontEnd/src/app/workspace/notice/my-notice/keep-html.pipe.ts to a higher module that imports MyNoticeModule

遇到此类问题请将你的关注点放在图片上三个框的位置,和错误信息里最重要的这句话。


解决方案:

我们的关注点找对了之后就可以分析出来: SafeHtmlPipe组件在两个模块里面被声明引用了,但是这两个模块之间存在着级联关系,也可简单理解为父子关系,所以我们要移除掉在子模块中的引用,只保留更高一级的父模块中的引用,就可以避免此类问题的发生.本项目中MyNoticeModule是高一级的父模块,NoticeListModule是在其中嵌套的子模块,所以我们要移除掉NoticeListModule中对SafeHtmlPipe组件的声明和引用.

  • 移除顶部的import { SafeHtmlPipe } from XXX…
  • 移除@NgModule中declarations:[] ; 中对组件的声明.

- -prod构建的优化特性:

  • 预(AOT)编译:预编译 Angular 组件的模板。
  • 生产模式:启用生产模式部署到生产环境。
  • 打捆(Bundle):把这些模块串接成一个单独的捆文件(bundle)。
  • 最小化:移除不必要的空格、注释和可选令牌(Token)。
  • 混淆:使用短的、无意义的变量名和函数名来重写代码。
  • 消除死代码:移除未引用过的模块和未使用过的代码.

总结:

使用–prod构建时候会根据既定要求进行优化, 许多开发环境里我们写代码没有暴露出来的问题都随之而来.生产级别的构建不同于开发环境和测试环境的构建,对程序性能要求极高,带来的是对代码规范和质量的要求极其严格,因为构建时会将与生产环境无关的东西都移除掉来保证缩小近三分之二的体积.

猜你喜欢

转载自blog.csdn.net/yyzzhc999/article/details/79800011