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/export 您在该库的模块中使用的组件：

    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>

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

Angular 6 将应用程序转换为库

Angular 6 Convert an Application to Library

angular-components

angular

angular-library