Angular Npm 包开发之踩坑小记1 | 更文挑战第20天

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

1. es6语法不支持map、startsWith等报错

这是因为在配置文件中默认配置的是es5，所以需要更为es6+，在最外层tsconfig.json中将target更改为es6，自己模块内的tsconfig.lib.json中的target也需要更改为es6。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",  // <-- 这里改为es6 
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

参考地址

2. includes报错

Property 'includes' does not exist on type 'string[]'

报这个错的原因是includes在ES6中只能是string的方法，在ES7中可以对数组进行使用。

所以更新你的下面配置至es7。

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es6",
    "module": "es6",
    ...
    "lib": [
      "dom",
      "es7"  <-- 这里
    ]
  },
 
}

3. 报错关于 Lambda not supported

/core/src/lib/core.module.ts:44:1: Error encountered in metadata genera                         ted for exported symbol 'CoreModule':
 F:/v3-npm-package/iThinkDT-front/projects/core/src/lib/core.module.ts:20:10: Metadata collected contains an err                         or that will be reported at runtime: Lambda not supported.
  {"__symbolic":"error","message":"Lambda not supported","line":19,"character":9}
Error: F:/v3-npm-package/iThinkDT-front/projects/core/src/lib/core.module.ts:44:1: Error encountered in metadata                          generated for exported symbol 'CoreModule':
 F:/v3-npm-package/iThinkDT-front/projects/core/src/lib/core.module.ts:20:10: Metadata collected contains an err                         or that will be reported at runtime: Lambda not supported.
  {"__symbolic":"error","message":"Lambda not supported","line":19,"character":9}
    at F:\v3-npm-package\iThinkDT-front\node_modules\@angular\compiler-cli\src\metadata\collector.js:708:31
    at Array.forEach (<anonymous>)
    at validateMetadata (F:\v3-npm-package\iThinkDT-front\node_modules\@angular\compiler-cli\src\metadata\collec                         tor.js:696:46)
    at MetadataCollector.getMetadata (F:\v3-npm-package\iThinkDT-front\node_modules\@angular\compiler-cli\src\me                         tadata\collector.js:551:21)

在你写

public static generateNonce(): Observable<string> {
    ...
 }
 @ngModule({
    ...
 })

这样一个方法注入到元数据的时候，会报此错误，在函数前面加上一个注释// @dynamic可以让其不报错误。

public static generateNonce(): Observable<string> {
    ...
 }
 
 // @dynami
 
  @ngModule({
    ...
 })

具体原因参见：

https://github.com/angular/angular/issues/19698#issuecomment-338340211

4. 包名字不符合规范、402

在package.json中配置包的名字中带/提示不符合要求，在前面加上@即可。

报错

{
  "name": "ithinkdt/core",
  "version": "0.0.4",
  "peerDependencies": {
    "@angular/common": "^7.0.0",
    "@angular/core": "^7.0.0"
  }
}

这样改即可

{
  "name": "@ithinkdt/core",
  "version": "0.0.4",
  "peerDependencies": {
    "@angular/common": "^7.0.0",
    "@angular/core": "^7.0.0"
  }
}

这样配置的话会成为私有包，所以得加上--access=public 改成公用包发布

npm publish dist/core --access=public 

参考

https://www.w3cvip.org/topics/393

更多用法更新于 github