Как импортировать вашу локальную библиотеку в приложение Angular6?

Question

Я создаю приложение, которое будет использовать библиотеку, которую (более чем вероятно) будут использовать и другие приложения.В Angular 6 создание новой библиотеки так же просто, как ng g library MyLibrary.Создайте свою библиотеку, чтобы она была доступна для использования в вашем приложении с ng build MyLibrary.Наконец, в соответствии с документацией , вы импортируете свою библиотеку как любую другую библиотеку с import { SomethingFromMyLibrary } from 'MyLibrary'; внутри вашего файла app.module.ts.Мой вопрос: почему это не работает для меня?Я получаю сообщение об ошибке 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';

Когда вы создаете библиотеку, используя CLI Angular, она добавит ссылку на путь внутри 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.