具有适当子条目的 Angular 库

Question

我正在尝试按照文档构建 Angular 库，但不幸的是我在构建它时遇到了一些问题。

我面临两个主要问题:

第一期:库模块全路径导出

从 '@my/components/lib/my-component/my-component.module 导入 MyComponentModule

应该是

从“@my/components/my-component”导入 MyComponentModule

第二个问题:我无法编译正在使用该库的应用

我收到一个编译错误，指出 @my/components/lib/my-component/my-component.module 无法解析，即使我在 node_modules< 中看到它.

我做错了什么？ :(

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "paths": {
      "@my/components/*": [
        "projects/components/src/*",
        "projects/components/src"
      ],
      "@my/components": [
        "dist/components/*",
        "dist/components"
      ]
    },
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

// projects/components/package.json
{
  "name": "@my/components",
  "version": "1.0.0",
  "peerDependencies": {
    "@angular/common": "11",
    "@angular/core": "11"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

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

// projects/components/src/public-api.ts
export * from './lib/my-component';

// projects/components/src/lib/my-component/index.ts
export * from './public-api'

// projects/components/src/lib/my-component/public-api.ts
export * from './my-component.module';
export * from './my-component.component';

// projects/components/src/lib/my-component/package.json
{
  "ngPackage": {
    "lib": {
      "entryFile": "public-api.ts",
      "cssUrl": "inline"
    }
  }
}

然而，在使用 CLI 构建库时，我看到它构建了 2 个东西:

• @my/components，和
• @my/components/src/lib/my-component//这不应该是 @my/components/my-component 吗？

谁能告诉我这里缺少什么？

Answer 1

1. 因为您正在使用 * 它按原样导出所有内容，您可以改为指定文件。

"paths": {
      "@my/components/my-component": [
        "projects/components/src/lib/my-component/public-api.ts",
      ],
    },

1. 因为 * 没有默认值，所以您必须在它周围使用方括号，这样它才能找到引用。

import { MyComponentModule } from '@my/components/my-component';