How to import your local library into your Angular6 app?

Question

I'm building an app that will use a library that (more than likely) other apps will use as well. In Angular 6, creating a new library is as easy as ng g library MyLibrary. Build your library so it's available to use in your app with ng build MyLibrary. Finally, according to the documentation, you import your library like any other library with import { SomethingFromMyLibrary } from 'MyLibrary'; inside of your app.module.ts file. My question is, why isn't this working for me? I receive the error Cannot find module 'AbsenceMonitorCore' For my case, the specific import statement is import { AbsenceMonitorCoreModule } from 'AbsenceMonitorCore';

Here's my library Module:

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 { }

The 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';

When you create a library using Angular's CLI it'll add a path reference inside tsconfig.json to your library. So here's what that looks like:

{
  "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

After some playing around with it, I found this is a bug in the new command in the Angular CLI. When you create a new library with ng generate library MyLibrary, it will create a file path reference to where the build system will output your library to. The reference the build system uses will live in the libary's ng-package.json. It also creates a file path reference in your tsconfig.json so your app can reference your local libraray. These two folder paths will differ. The build system will output your library to folder dist/my-library while your tsconfig.json will have the path dist/MyLibrary

If you name the library mylibray, everything works out exactly how the documentation describes.

Either update your tsconfig.json, your library's ng-package.json or wait for the next Angular release.

*This bug has been fixed in new versions of the CLI.