Create angular library with routing? But it is not working-CodePudding

This is routing file in the library.

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

Routing is not working. When I go to signup route, it does not change screen and signup component is not called. Please guide me if anyone know about that. Library routing and module file is added and module file of project where we are using this library is also shown above.

CodePudding user response：

you can try to do this.

in your AuthLibRoutingModule:

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

then in the app.routing.module.ts:

const routes = authRoutes;

I hope this help you, regards.

CodePudding user response：

Routing is working...

I know that sounds weird considering you have asked... Consider below line in your code

{ path: '', component: AuthLibComponent },

It says if path === '' then set component = AuthLibComponent. So does the path 'sign-up' match this? the answer is yes since 'sign-up' === ('' 'sign-up')

In this link Routes Order it says

The order of routes is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. List routes with a static path first, followed by an empty path route, which matches the default route

So basically your solution would be to simply switch the order of the routes...

There ofcourse exists a better approach. This is actually where pathMatch comes in. You have to inform the router to match the router in full. See below

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