Angular 6 Convert an Application to Library

问题

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?

回答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!

回答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.

来源：https://stackoverflow.com/questions/51879179/angular-6-convert-an-application-to-library

标签

angular

angular-components

angular-library