AppRouting.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../buyer/home/home.component';
const routes: Routes = [
{path: '', redirectTo:'buyer', pathMatch:"full"}
]
@NgModule({
declarations:[],
imports:[
BrowserModule,
RouterModule.forRoot(routes)
],
exports:[RouterModule]
})
export class AppRoutingModule {}
BuyerRouting.ts
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations:[],
imports:[
CommonModule,
RouterModule.forChild([
{ path: 'buyer', component: HomeComponent},
{ path: '', redirectTo: '/welcome', pathMatch: 'prefix'},
{ path: 'welcome', component: WelcomeComponent}
])
],
exports:[RouterModule]
})
export class BuyerRoutingModule {}
When I ng serve the app. the build was successfully created but when i run the app I got an error. I have also checked by removing emtpy path still this error is coming.
main.ts:12 Error: Invalid configuration of route '': routes must have either
a path or a matcher specified
What is pathMatch in Angular? pathMatch = 'prefix' tells the router to match the redirect route when the remaining URL begins with the redirect route's prefix path. Ref: https://angular.io/guide/router#set-up-redirects.
PathMatch is building the largest early career talent platform connecting students to modern careers, skills, and companies. Students create their video-enhanced PathMatch profile which is easier for companies to search and schedule interviews.
Each route in this array is a JavaScript object that contains two properties. The first property, path , defines the URL path for the route. The second property, component , defines the component Angular should use for the corresponding path.
The path can take a wildcard string ( ** ). The router will select this route if the requested URL doesn't match any paths for the defined routes. This can be used for displaying a “Not Found” view or redirecting to a specific view if no match is found.
wherever in NgModule config (including RouterModule, TranslateModule and other) you can use only exported variables and functions (as in case of URLMatcher), but you can not use function to calculate value.
Source: https://github.com/angular/angular/issues/18662
So according to the above solution, you may have some route (including child routes) where you are using any un exported variables or functions to calculate the route. Check.
This is a tricky error.
I was using an Object filled by some functions, and the AoT statically analyzes my object and it's empty, so I had to fill and define the complete object for AoT and my plan is to update it on a single file dynamically somehow, like in a pre-build hook.
I'm praying for Ivy to not have this restriction!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With