Question

我正在构建一个应用程序，该应用程序将使用一个（很可能）其他应用程序也将使用的库。在Angular 6中，创建新库就像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创建新库时，它将创建一个文件路径引用，指向构建系统将库输出到的位置。构建系统使用的引用将存在于libary＆＃39; s-package.json中。它还在tsconfig.json中创建文件路径引用，以便您的应用程序可以引用您的本地库。这两个文件夹路径会有所不同。构建系统会将您的库输出到文件夹dist/my-library，而您的tsconfig.json将具有路径dist/MyLibrary

如果您将库命名为mylibray，那么一切都与文档描述完全一致。

更新你的tsconfig.json，你的库＆ng-package.json或等待下一个Angular版本。

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

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

1 个答案: