6

我有一个 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. 但我不知道如何将我的应用程序与图书馆联系起来。这就是我的项目结构的样子。

在此处输入图像描述

有什么建议或指示吗？

4

2 回答 2

9

这是一个有点深入的问题，但可以为您指明正确的方向。您需要先将组件转移到 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 installnpm install /meaningful/path/to/library --save
像往常一样将模块导入项目中，它将自己保存在 node_modules 中，并以您在 projects/routing-lib/package.json 中的名称

    import { RoutingLibModule } from 'routinglib';

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

希望这会有所帮助！

于 2018-08-16T14:45:19.757 回答
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} from 'my-routing-lib'; 进口：[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>

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

于 2018-08-16T15:37:22.290 回答