Angular 6 Convert an Application to Library

Issue

I have an Angular 6 app that handles routes like 'page-not-found', 'error', 'unauthorized.'

This how my routes look:

const appRoutes: Routes = [
  { path:'page-not-found', component: NotFoundPageComponent },
  { path: 'unauthorized', component: UnAuthorizedPageComponent },
  { path: 'error', component: ErrorPageComponent },
  { path: '**', component: NotFoundPageComponent },
  ];

All the components have simple html template like below:

 <p>Page Not Found. Please report this error to system administrator </p>
 <p>Unauthorized. Please report this error to system administrator</p>
 <p>Error. Please report this error to system administrator</p>

Everything is working fine with ng serve I want to use these routes in multiple applications, Hence I am looking to convert this to a module or library which i can import in many application, something like below

import { NotFoundPageComponent } from 'routing-lib';

In my original application, I created a library with ng g library routing-lib . But I don't how to tie my app to the library. This is how my project structure looks.

Any suggestions or pointers?

Solution

This is a somewhat in-depth question, but to point you in the right direction. You need to first transfer over your components to routing-lib/src/lib.
Import/export the components you are using in that library's module:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { NotFoundPageComponent } from './notFoundPage/notFoundPage.component';

    @NgModule({
      imports: [CommonModule],
      declarations: [NotFoundPageComponent],
      exports: [NotFoundPageComponent]
    })
    export class RoutingLibModule { }

Components you are using also needs to be exported in routing-lib/scr/public_api.ts

    export * from './lib/notFoundPage/notFoundPage.component';
    export * from './lib/routingLib.module';

Hit it with an ng build routing-lib --prod

This will create a new folder in your ROOT project /dist (not the library)
Copy that folder somewhere meaningful. Now you can use npm install on the other project you want to use the library in like so npm install /meaningful/path/to/library --save
Import module into project like usual, it saves itself in node_modules under the name you had in projects/routing-lib/package.json

    import { RoutingLibModule } from 'routinglib';

    @NgModule({
        imports: [
            RoutingLibModule
        ]
    })
    export class AppModule { }

Hopefully this helps!

Answered By - Brad Axe