Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Invalid configuration of route '': routes must have either a path or a matcher specified

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
like image 767
Haris Avatar asked Sep 27 '17 07:09

Haris


People also ask

What is path match in angular?

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.

What is path match?

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.

Which property of routes defines the path of the component?

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.

Which is used to match paths that are not part of defined routes in angular?

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.


2 Answers

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.

like image 146
Shashank Gaurav Avatar answered Sep 17 '22 06:09

Shashank Gaurav


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!

like image 34
Mateo Tibaquira Avatar answered Sep 21 '22 06:09

Mateo Tibaquira