Angular：将Angular项目模块化

一、解决方案

https://angular.cn/guide/creating-libraries （官方说明文档）
https://segmentfault.com/a/1190000022637243 （实践案例）

二、经历的错误

我最初采用的解决方案是使用ng-packagr将功能模块打成独立的npm包，但是当时初始化项目创建成application，而不是library导致最后插件组装时遇到各种奇怪的问题，最终还是决定更换解决方案。不过对于曾今遇见的Angular bug也做了一个汇总，便于以后查阅和快速解决问题。

• 1、ERROR in There is no appropriate source code format in ‘E:/WebstormProjects/portal_antd_umi/no
  de_modules/date-fns’ entry-point.
  • ng-zorro-antd 到9.0及以上版本才支持Angular使用Ivy，因此不能设置以下内容：

   "angularCompilerOptions": {
     "enableIvy": true
   }
  

• 2、Types of property ‘operator’ are incompatible
  ​ 解决：删除node_modules、删除package-lock.json、执行npm cache clean --force、npm install
  
  

• 3、ERROR: Cannot read property ‘module’ of undefined
  ​ 解决：模块引用异常，参考问题8
  
  

• 4、ERROR: Cannot read property ‘type’ of null
  ​ 解决：https://github.com/angular/angular/issues/24143

  The issue seems to be with symlinked libraries in node_modules (I am on Windows).
  
  

• 5、Dependency @angular/animations must be explicitly whitelisted.
  ​ 解决：删除package.json 中的 dependencies，或者修改为peerDependencies
  
  

• 6、Observable is is not assignable to type Observable
  
  

• 7、Types of property ‘source’ are incompatible.
  ​ 解决：解决其他问题后reopen
  ​ 可能原因：(a)使用link共享了插件库导致编辑器判定文件不在同一目录；(b)当前项目依赖第三方工具的版本和插件依赖的第三方工具版本冲突，例如：基座项目和qiankun中依赖的typescript版本冲突等；
  
  

• 8、Unexpected value ‘HeaderSearchModule in E:/WebstormProjects/portalShared/src/app/shared/components/header-search
  /header-search.module.ts’ imported by the module ‘LayoutModule in E:/WebstormProjects/portalLayout/src/app/layout/layout.module.ts’. Please add a @NgModule annotation.
  ​ 解决：原因是模块引用和导出异常

  在导出应用中，根Module 导入及导出对应组件Module

  在导入应用中，根Module 导入对应组件Module
  
  

• 9、The inferred type of ‘getMenus’ cannot be named without a reference to
  ​ 解决：Should try to have callback type, just like this（）

   get username(): AbstractControl { 
     return this.forgotPasswordForm.get('username'); 
   }
  

• 10、ERROR in ArchiveGuideDialogComponent cannot be used as an entry component.
  ​ 解决：https://stackoverflow.com/questions/50818039/component-cannot-be-used-as-an-entry-component
  
  

• 11、angular 项目 运行提示 node_modules/qiankun: error TS1005: ‘;’ expected.
  ​ 解决： qiankun 依赖的ts 与 Angular 依赖的ts版本冲突，qiankun降版本
  
  

• 12、Can’t bind to ‘appAcl’ since it isn’t a known property of ‘a’
  ​ 解决：在app.module中引入coreModule
  
  

• 13、Metadata collected contains an error that will be reported at runtime: Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler
  解决：静态解析符号值时出错 ，在声明静态方法的类之前添加

    // @dynamic
  

• 14、can only be default-imported using the ‘allowSyntheticDefaultImports’ flag
  解决：把

import  differenceInCalendarDays from 'date-fns/difference_in_calendar_days';

改成如下:

import * as  differenceInCalendarDays from 'date-fns/difference_in_calendar_days';

或者增加Q18的配置

• 15、error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’.
  解决：

  "module": "esnext",
  "target": "es2015",
  

• 16、This condition will always return ‘true’ since the types ‘“riskEvents” | “negativelyNews”’ and ‘“infoChanges”’ have no overlap
  解决：如果使用表达式 ‘a’ === ‘b’，报异常，可以尝试换一种语法：使用数组 [‘b’].includes(‘a’)
  
  

• 17、compiler.js:2175 Uncaught Error: Can’t resolve all parameters for IconsService: (?, ?, [object Object]).
  解決：
  
  但这2种均不能解决我的问题，最后发现了另外一个原因，就是这个不能resolve的参数是一个HTTPService，在tsconfig.json中配置

  "emitDecoratorMetadata": true,
  

​

• 18、Cannot call a namespace (‘dayjs’)
  解决：在tsconfig.json中配置

  "angularCompilerOptions": {
    "allowSyntheticDefaultImports": true
  },
  

三、一点经验

• （a）模块化拆分搭建完框架之后，已知现有的功能模块，需要分析各模块之间的依赖关系（比如业务包会依赖于公共方法/常量等）。
  下手拆分时，优先拆公共包，为后面业务包拆分打基础；
  模块组装替换时，优先替换并删减业务包。这样避免删减公共模块导致其他业务模块依赖异常。

• （b）在对外集成时发现，项目之前统一将模块的工具依赖（dayjs、printjs、xlsx等）定义和安装在根目录下，所以不会有任何问题。
  但是npm包拿出去使用时，新的项目没有安装这些插件，导致npm包提示缺少依赖，因此我们在做模块化时一定要注意模块本身的工具依赖并合理配置，避免实际使用时提示异常；

• （c）需要注意模块包中对于公共数据的读写处理：
  例如：项目对于 token、权限、当前登录用户信息等数据的存储和其他项目是不一样的；
  导致业务包拿出去使用时，原本登录时该写入的数据空白，业务包自然无法读取信息。

• （d）遗留的尾巴：
  业务模块的样式问题：关于怎样保证业务模块对外使用样式不变形还有待优化，目前是在单纯的调试解决；
  说明文档的编写：业务模块的需要安装哪些依赖，使用步骤，对外暴露的组件/方法等等需要找时间补起来；