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
像往常一样将模块导入项目，它以您在projects / 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中     从“ my-routing-lib”导入{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>

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