使用路由创建角度库？但它不工作答案

【问题标题】：Create angular library with routing? But it is not working使用路由创建角度库？但它不工作
【发布时间】：2021-11-19 18:14:35
【问题描述】：

这是库中的路由文件。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthLibComponent } from './auth-lib.component';
import { SignUpComponent } from './sign-up/sign-up.component';


const routes: Routes = [
  { path: '', component: AuthLibComponent },
  { path: 'sign-up', component: SignUpComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AuthLibRoutingModule {

 }

lib.module.ts

import { NgModule } from '@angular/core';
import { AuthLibComponent } from './auth-lib.component';
import { AuthLibRoutingModule } from './auth-lib-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { SignUpComponent } from './sign-up/sign-up.component';

@NgModule({
  declarations: [AuthLibComponent, LoginComponent, 
    SignUpComponent
  ],
  imports: [AuthLibRoutingModule, FormsModule, ReactiveFormsModule, CommonModule],
  exports: [AuthLibComponent, LoginComponent, SignUpComponent],
})
export class AuthLibModule {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {AuthLibModule} from 'auth-lib';
import { AuthService } from './services/auth.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AuthLibModule,
    HttpClientModule,
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

路由不工作。当我去注册路线时，它不会改变屏幕并且不会调用注册组件。如果有人知道，请指导我。添加了库路由和模块文件，上面还显示了我们正在使用该库的项目的模块文件。

【问题讨论】：

标签： angular typescript angular-library

【解决方案1】：

路由正在运行...

考虑到您的要求，我知道这听起来很奇怪......请在您的代码中考虑以下行

{ path: '', component: AuthLibComponent },

它说if path === '' 然后设置component = AuthLibComponent。那么路径'sign-up' 是否与此匹配？答案是肯定的，因为'sign-up' === ('' + 'sign-up')

在这个链接Routes Order它说

路由的顺序很重要，因为Router在匹配路由时使用first-match wins策略，所以更多具体的路由应该放在不太具体的路由之上路线。首先列出带有静态路径的路由，然后是与默认路由匹配的空路径路由

所以基本上你的解决方案是简单地切换路线的顺序......

当然存在更好的方法。这实际上是pathMatch 进来的地方。您必须通知路由器以完全匹配路由器。见下文

const routes: Routes = [
  { path: '', component: AuthLibComponent, pathMatch: 'full' },
  { path: 'sign-up', component: SignUpComponent }
];

【讨论】：

【解决方案2】：

您可以尝试这样做。

在您的 AuthLibRoutingModule 中：

export const authRoutes: Routes = [
  { path: '', component: AuthLibComponent },
  { path: 'sign-up', component: SignUpComponent }
];

然后在 app.routing.module.ts 中：

const routes = authRoutes;

希望对你有所帮助，问候。

【讨论】：