Angular 6 将应用程序转换为库

Question

我有一个 Angular 6 应用程序，可以处理诸如“未找到页面”、“错误”、“未授权”之类的路由。

这是我的路线的样子:

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

所有组件都有简单的 html 模板，如下所示:

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

ng serve 一切正常我想在多个应用程序中使用这些路由，因此我希望将其转换为可以在许多应用程序中导入的模块或库，如下所示

import { NotFoundPageComponent } from 'routing-lib';

在我的原始应用程序中，我使用 ng g library routing-lib 创建了一个库。 .但我不知道如何将我的应用程序与图书馆联系起来。
这就是我的项目结构的样子。



有什么建议或指示吗？

Answer 1

这是一个有点深入的问题，但可以为您指明正确的方向。您需要先将组件转移到 routing-lib/src/lib。
导入/导出您在该库模块中使用的组件:

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

您正在使用的组件也需要在 routing-lib/scr/public_api.ts 中导出

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

用 ng build routing-lib --prod 打它

这将在您的 ROOT 项目/dist (不是库)中创建一个新文件夹
将该文件夹复制到有意义的地方。现在你可以在你想使用库的其他项目上使用 npm install 像这样 npm install /meaningful/path/to/library --save像往常一样将模块导入项目，它将自己保存在 node_modules 中，以您在 projects/routing-lib/package.json 中的名称

    import { RoutingLibModule } from 'routinglib';

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

希望这会有所帮助!