Angular 6 Convert an Application to Library

Question

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?

Answer 1

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!

Answer 2

Following @Brad Axe suggestion. I moved my components to lib and exported the components out.

import { NgModule } from '@angular/core';
import { RoutingLibComponent } from './routing-lib.component';
import { PathsComponent } from './paths/paths.component';
import { ErrorPageComponent } from './paths/error-page.component';
import { HomePageComponent } from './paths/home-page.component';
import { NotFoundPageComponent } from './paths/not-found-page.component';
import { UnAuthorizedPageComponent } from './paths/unauthorized-page.component';



@NgModule({
  imports: [
  ],
  declarations: [RoutingLibComponent, PathsComponent,ErrorPageComponent,HomePageComponent,NotFoundPageComponent,UnAuthorizedPageComponent],
  exports: [RoutingLibComponent, ErrorPageComponent,HomePageComponent,NotFoundPageComponent,UnAuthorizedPageComponent]
})
export class RoutingLibModule { }

built and published the Library and used in my app as:

In app.module.ts import {RoutingLibModule} from 'my-routing-lib'; imports: [BrowserModule, RoutingLibModule],

and added following to the markup.

<lib-unauthorized-page></lib-unauthorized-page>
<lib-home-page-paths></lib-home-page-paths>
<not-found-page></not-found-page>
<lib-unauthorized-page></lib-unauthorized-page>

All these are directives from my components.