Angular 6 将应用程序转换为库

Question

我有一个 Angular 6 应用程序，它可以处理“page-not-found”、“error”、“unauthorized”等路由。

这是我的路线的样子：

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
像往常一样将模块导入项目，它以您在项目/routing-lib/package.json 中的名称将自己保存在 node_modules 中

    import { RoutingLibModule } from 'routinglib';

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

希望这会有所帮助！

Answer 2

遵循@Brad Ax 的建议。我将组件移动到 lib 并将组件导出。

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

构建并发布了库并在我的应用程序中用作：

在app.module.ts 从“我的路由库”导入 {RoutingLibModule}； 导入：[BrowserModule, RoutingLibModule],

并在标记中添加以下内容。

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

所有这些都是来自我的组件的指令。