Angular - 在两个库之间导入模块答案

【问题标题】：Angular - import module between two librariesAngular - 在两个库之间导入模块
【发布时间】：2020-03-30 21:50:02
【问题描述】：

我用this 教程创建了两个库：

ng new my-library --create-application=false ng generate library core ng generate library shared

我想将 CoreModule 导入 SharedModule：

import { NgModule } from '@angular/core';
import { CoreModule } from '???';


@NgModule({
  declarations: [],
  imports: [
    CoreModule
  ],
  exports: []
})
export class SharedModule { }

CoreModule 中是 public-api.ts:

export * from './lib/core.module';

我尝试编辑项目/shared/tsconfig.lib.json：

"paths": {
      "library/core": ["../../dist/core/"],
    }

但是当我运行ng build shared：

错误：projects/shared/src/lib/shared.module.ts(2,32)：错误 TS2307：找不到模块“库/核心”。 projects/shared/src/lib/shared.module.ts(8,5)：错误 TS2304：找不到名称“CoreModule”。

在同一工作区的两个库之间导入模块的正确方法是什么？谢谢

编辑：tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "core": [
        "dist/core"
      ],
      "core/*": [
        "dist/core/*"
      ],
      "shared": [
        "dist/shared"
      ],
      "shared/*": [
        "dist/shared/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

核心库tsconfig.lib.json：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

共享库 tsconfig.lib.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true,

  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

【问题讨论】：

您的import { CoreModule } from '???' 应该具有核心模块的.module.ts 文件的路径。这应该足以导入它。

标签： angular

【解决方案1】：

无需在共享tsconfig.lib.json 中添加paths。您只需使用该库名称导入我在这里所做的。

import { NgModule } from '@angular/core';
import { SharedComponent } from './shared.component';
import { CoreModule } from 'core';
@NgModule({
  declarations: [SharedComponent],
imports: [
    CoreModule
],
exports: [SharedComponent]
})
export class SharedModule { }

在我的 tsconfig.json 文件中，如下所示。

"paths": {
  "core": [
    "dist/core"
  ],
  "core/*": [
    "dist/core/*"
  ],
  "shared": [
    "dist/shared"
  ],
  "shared/*": [
    "dist/shared/*"
  ]
}

【讨论】：

我从 tsconfig.lib.json 中删除 paths 并将 import import { CoreModule } from 'core' 添加到 SharedModule。但是当我运行ng build shared 时，得到这个错误：错误：错误TS6059：文件'/angular/library/projects/core/src/lib/core.module.ts'不在'rootDir''angular\library\projects下\共享\src'。 'rootDir' 应包含所有源文件。
您的 tsconfig.json 如下所示。 "paths": { "core": [ "dist/core" ], "core/*": [ "dist/core/*" ], "shared": [ "dist/shared" ], "shared/*": [ "dist/shared/*" ] }
是的，我在库文件夹（根目录）中的 ts.config 是一样的
你是在ng build shared之前构建ng build core吗？
你能分享你的tsconfig.json和tsconfig.lib.jsonNote: tsconfig.json is the root tsconfig.json file

【解决方案2】：

我找到了解决方案。不要忘记 shared/ng-package.json 中的umdModuleIds：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/common",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "core": "core"
    }
  }
}

【讨论】：