如何将本地库导入 Angular6 应用程序？

Question

我正在构建一个将使用其他应用程序（很可能）也将使用的库的应用程序。在 Angular6 中，创建一个新库就像 ng g library MyLibrary 一样简单。构建您的库，以便在 ng build MyLibrary 的应用中使用它。最后，according to the documentation，您可以像导入任何其他带有 app.module.ts 文件中的 import { SomethingFromMyLibrary } from 'MyLibrary'; 的库一样导入您的库。我的问题是，为什么这对我不起作用？我收到错误 Cannot find module 'AbsenceMonitorCore' 对于我的情况，具体的导入语句是 import { AbsenceMonitorCoreModule } from 'AbsenceMonitorCore';

这是我的库模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AbsenceMonitorCoreComponent } from './absence-monitor-core.component';

import { AbsencesComponent } from './components/absences/absences.component';
import { SigninComponent } from './components/signin/signin.component';
import { LineMonitorComponent } from './components/line-monitor/line-monitor.component';
import { CurrentCalloffListComponent } from './components/current-calloff-list/current-calloff-list.component';
import { AckCalloffListComponent } from './components/ack-calloff-list/ack-calloff-list.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule
  ],
  declarations: [
    AbsenceMonitorCoreComponent,
    AbsencesComponent,
    SigninComponent,
    LineMonitorComponent,
    CurrentCalloffListComponent,
    AckCalloffListComponent
  ],
  exports: [
    AbsenceMonitorCoreComponent,
    AbsencesComponent,
    CurrentCalloffListComponent
  ]
})
export class AbsenceMonitorCoreModule { }

public_api.ts:

/*
 * Public API Surface of absence-monitor-core
 */

export * from './lib/absence-monitor-core.service';
export * from './lib/absence-monitor-core.component';
export * from './lib/absence-monitor-core.module';

当您使用 Angular 的 CLI 创建库时，它会在 tsconfig.json 中添加一个路径引用到您的库。所以这就是它的样子：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "AbsenceMonitorCore": [
        "dist/AbsenceMonitorCore"
      ]
    }
  }
}

Answer 1

经过一番尝试，我发现这是 Angular CLI 中新命令的一个错误。当您使用 ng generate library MyLibrary 创建一个新库时，它将创建一个文件路径引用，指向构建系统将您的库输出到的位置。构建系统使用的引用将存在于库的 ng-package.json 中。它还会在您的 tsconfig.json 中创建一个文件路径引用，以便您的应用程序可以引用您的本地库。这两个文件夹路径会有所不同。构建系统会将您的库输出到文件夹 dist/my-library，而您的 tsconfig.json 将具有路径 dist/MyLibrary

如果您将库命名为 mylibray，一切都会按照文档描述的方式进行。

更新您的 tsconfig.json、您的图书馆的 ng-package.json 或等待下一个 Angular 版本。

*此错误已在新版本的 CLI 中修复。

如何将本地库导入 Angular6 应用程序？

How to import your local library into your Angular6 app?

angular

angular6