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

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

15. 路由模块报关于Consider changing the function expression into an exported function错误

引入npm包中的模块在路由中配置之后，报错如下

ERROR in src\app\pages\pages.module.ts(23,7): Error during template compile of 'PagesModule'
  Function expressions are not supported in decorators in 'PagesRouting'
    'PagesRouting' contains the error at src\app\pages\pages.routing.ts(24,19)
      Consider changing the function expression into an exported function.

之前写法

import {AModule,BModule,CModule} from 'ANpmPackage'

export const PagesRouting: Routes = [
  { path: 'a', loadChildren: ()=> AModule },
  { path: 'b', loadChildren: ()=> BModule },
  { path: 'c', loadChildren: ()=> CModule },
]

解决方法:

建立一个function抛出模块再引用这个方法。

正确写法

import {AModule,BModule,CModule} from 'ANpmPackage'

export function getAModule(){
    return AModule;
}

export function getBModule(){
    return BModule;
}

export function getCModule(){
    return CModule;
}

export const PagesRouting: Routes = [
  { path: 'a', loadChildren: getAModule },
  { path: 'b', loadChildren: getBModule },
  { path: 'c', loadChildren: getCModule },
]

16. 测试项目中一直报错Can't resolve all parameters for AppComponent

这是因为你项目的polyfills.ts文件中未引入'core-js/es7/reflect'包，引入即可。

import 'core-js/es7/reflect';

更多信息请参考：

https://github.com/angular/angular/issues/19417#issuecomment-359722822

17. Runtime compiler is not loaded

在本地开发可以运行并且能打包，但是打包之后放在服务器会报错，具体错误信息

main.e81fa16196eccd7cdc8b.js:1 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded

原因

解决办法：

在app.routing.ts中，你之前的写法可能是这样的

import { Routes } from "@angular/router";
import { AModule } from '@my/lib';

export const AppRouting: Routes = [
  {
    path: "a",
    loadChildren: ()=> AModule
  },
]

或者是这样的

import { Routes } from "@angular/router";
import { AModule } from '@my/lib';

export function loadAModule(){
    return AModule;
}

export const AppRouting: Routes = [
  {
    path: "a",
    loadChildren: loadAModule
  },
]

又或者是这样的

import { Routes } from "@angular/router";
import { AModule } from '@my/lib';

export function loadAModule(){
    return System.import("@@my/lib").then(
        mod => mod.AModule
    );
}

export const AppRouting: Routes = [
  {
    path: "a",
    loadChildren: loadAModule
  },
]

都还是会报错，

解决办法

新增一个module，在这个模块里面把要用的包引进来，在路由中懒加载新建的这个模块即可。

新增的 A-module-loader.ts

import { NgModule } from "@angular/core";
import { AModule } from '@my/lib';

@NgModule({
  imports: [
    AModule
  ]
})
export class AModuleLoader {}

原来的app.routing.ts中可以这样写

import { Routes } from "@angular/router";


export const AppRouting: Routes = [
  {
    path: "a",
    loadChildren: './A-module-loader#AModuleLoader'
  },
]

参考

1. https://github.com/angular/angular-cli/issues/6373#issuecomment-319116889
2. https://github.com/angular/angular-cli/issues/6373#issuecomment-424819684
3. https://github.com/angular/angular-cli/issues/6373#issuecomment-303013724
4. https://github.com/angular/angular-cli/issues/6373#issuecomment-304922035
5. https://stackoverflow.com/questions/45503497/how-to-load-dynamic-external-components-into-angular-application/45506470#45506470
6. https://stackoverflow.com/questions/41438198/implementing-a-plugin-architecture-plugin-system-pluggable-framework-in-angu

18. project does not support the 'build' target

Project './projects/core' does not support the 'build' target.
Error: Project './projects/core' does not support the 'build' target.
    at BuildCommand.initialize (F:\AAA---v3-npm-package\iThinkDT-npm-package\node_modules\@angular\cli\models\architect-command.js:53:19)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:721:11)
    at startup (internal/bootstrap/node.js:228:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:576:3)

这是因为在你的angular.json中未对打包规则进行配置，用ng g library xxx会自动新增打包规则，但是在项目中的angular.json则不会生成，需自己配置。
在projects下面新增你的规则，如：

"projects": {
  "core": {
      "root": "projects/core",
      "sourceRoot": "projects/core/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/core/tsconfig.lib.json",
            "project": "projects/core/ng-package.json"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/core/src/test.ts",
            "tsConfig": "projects/core/tsconfig.spec.json",
            "karmaConfig": "projects/core/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/core/tsconfig.lib.json",
              "projects/core/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
}

19. Cannot find module 'tsickle/src/tsickle'

这是ng-packer更新版本之后依赖了tsickle包，因此下载这个包即可。

npm i --save-dev tsickle
yarn add tsickle

更多用法更新于 github