Angular 14 - Error in Routing Module - Route configuration is invalid

Since upgrading from Angular 13 to Angular 14, I've encountered an issue with angular routing. The error message I'm receiving is:

*Uncaught Error: Uncaught (in promise): Error: NG04014: Invalid configuration of route 'homepage/'. One of the following must be provided: component, loadComponent, redirectTo, children or loadChildren*

In my App.routing.ts file, I have the following routes defined:

export const routes: Routes = [
  { path: '', redirectTo: 'homepage', pathMatch: 'full'},
  {
    path: 'homepage',
    loadChildren: () =>
      import('src/app/homepage/homepage-component/homepage.module').then(m => m.HomepageModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'sales',
    loadChildren: () =>
      import('src/app/reports/sales-component/sales.module').then(m => m.HomepageModule),
    canActivate: [AuthGuard]
  },

I've attempted to add components and load components to the routes as suggested by the error message, but using loadChildren doesn't seem to work as expected. Could it be that I am misusing the loadChildren property?

angulartypescriptangular-routerangular14angular14upgrade

Answer №1

It appears that the issue you are facing could be related to a recent breaking change mentioned in the provided source link: source

PR #45176

The type of Route.pathMatch has become more stringent, requiring places using pathMatch to explicitly define Route/Routes types to avoid TypeScript inferring the type as string.

You can try implementing the following code snippet to potentially resolve your issue:

export const routes: Routes = [
  {
    path: 'homepage',
    loadChildren: () =>
      import('src/app/homepage/homepage-component/homepage.module').then(m => m.HomepageModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'sales',
    loadChildren: () =>
      import('src/app/reports/sales-component/sales.module').then(m => m.HomepageModule),
    canActivate: [AuthGuard]
  },
  {
    path: '',
    redirectTo: '/homepage',
    pathMatch: 'full',
  }

Answer №2

After upgrading my Angular version from v13 to v14, I encountered a navigation issue that I was able to resolve with the following solution.

App Module

export const APP_ROUTES: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            {
                path: 'settings',
                loadChildren: () => import('./features/settings/settings.module').then(m => m.SettingsModule),
            }
        ]
    }
]

Settings Module

export const SETTINGS_ROUTES: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'list-defaults',
    },
    {
        path: 'list-defaults',
        component: ListDefaultsComponent,
    }
]

Answer №3

Kindly review the routes in src/app/homepage/homepage-component/homepage.module or share the code here.

I suspect there might be incorrect routes present.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Finding it challenging to adapt an AngularJs component-based modal to TypeScript

When creating an AngularJS component in JavaScript and displaying it as a modal using ui-bootstrap, you need to pass bindings that the modal instance can use for dismissing or closing itself: app.component("fringeEdit", { controller: "FringeEditCont ...

angularjstypescriptangular-ui-bootstrap

Tips for setting up a React TypeScript project with custom folder paths, such as being able to access components with `@components/` included

I'm looking to streamline the relative url imports for my React TypeScript project. Instead of using something messy like ../../../contexts/AuthContext, I want to simplify it to just @contexts/AuthContexts. I attempted to update my tsconfig.json with ...

node.jstypescriptreact-typescript

Oops! An error occurred: Uncaught promise rejection - invalid link found for ProductListComponent

I am currently in the process of learning Angular and Ionic, but I am feeling a bit confused as to where my mistake is. I have looked at other questions, but I still can't seem to figure it out. Can anyone provide some assistance? Perhaps someone has ...

javascriptangularionic-framework

Load components dynamically and place them in a flexible position based on the context

UPDATE (After gaining a better understanding of the issue): I'm trying to display a component based on where the user clicks (specifically, which table row). Using ng2-smart-table, I've encountered an issue where there isn't a suitable sele ...

javascriptangularng2-smart-tableangular-dynamic-components

Working with Angular Forms and a Text Area

Utilizing angular forms within a dialog to gather strings has been quite successful. However, I have encountered an issue when attempting to bind the formController to a textarea. Despite my best efforts and scouring through documentation, I cannot seem to ...

angularangular-forms

Calendar toggle appearing behind modal

Hey there, I'm currently facing an issue with my view using Angular 4 and Bootstrap 4. Whenever I click on "open" to display the calendar, it's appearing behind my modal. Unfortunately, I am unable to access the class as it's auto-generated. ...

angularcalendarbootstrap-4bootstrap-modalbootstrap-datepicker

Converting Angular 2/TypeScript classes into JSON format

I am currently working on creating a class that will enable sending a JSON object to a REST API. The JSON object that needs to be sent is as follows: { "libraryName": "temp", "triggerName": "trigger", "currentVersion": "1.3", "createdUser": "xyz", ...

jsonangulartypescript

The styling of Primeng Carousel appears to be incorrect

After obtaining a copy of the Primeng v8 carousel component, I noticed that the output is quite different from what is displayed on its official website: <p-carousel dir="ltr" [value]="basicDataService.latestProducts" [numVisible]="4"> <ng-t ...

angularprimeng

How can you incorporate a module for typings without including it in the final webpack bundle?

As I venture into the realm of Webpack, I am faced with the challenge of transitioning from TypeScript 1.x to TypeScript 2. In my previous projects, I typically worked with TypeScript in one module using separate files, TSD for typings, and compiling throu ...

angulartypescriptwebpack

Angular: Employing Pipes for Date Formatting

Looking for assistance with my elevator component. I need to store the date in dd/MM/yy format each time the elevator reaches the first floor. if floor === 1 show Date else return(empty) Check out my StackBlitz project ...

angular

Can an Ionic Angular app utilize multiple web workers simultaneously?

Can Ionic and Angular support multiple web workers in an application? ...

javascriptangularionic-frameworkionic4web-worker

Omit assets in final version

During development (ng serve), I have specific assets like images and styles that I use. These assets are not needed in the production build as they are provided by a CDN. My requirements are: When using ng serve, I want to serve files from the folder . ...

angularangular-cli

Challenges with Ionic 4 - Module '@angular/core/package.json' not found

Having some trouble with an Ionic 4 project code that works perfectly on my Mac but encounters an error when I try to run it on my Windows 10 PC. The specific error message states "Cannot find module '@angular/core/package.json'". Interestingly, ...

angularwindowsionic4

Using the Promise function with callback to map the JSON payload object into an object

I received a JSON payload with the following structure: { "name": "Reports", "subject": "Monthly Reports", "attachments":[ { "attachment":{ "name": "Month1.pdf", "type": "application/pdf", "path": "h ...

javascriptnode.jstypescript

Errors persist with Angular 2 iFrame despite attempts at sanitization

Attempting to add an iFrame within my Angular 2 application has been challenging due to the error message that keeps popping up. unsafe value used in a resource URL context The goal is to create a dynamic URL to be passed as a parameter into the iFrame ...

javascriptangulariframe

Utilizing Angular to automatically extract keys from nested objects in a response

In my Angular application, I am facing a challenge with accessing nested responses from the server. The data structure contains multiple responses within one parent object, and I am struggling to dig deeper into it. Here is the code snippet I have so far: ...

javascriptjsonangular

Retrieving a portion of the response with Angular's HttpRequest

I am facing an issue with a request where I need to upload a file and receive a JSON response. The problem arises when trying to access a specific part of the response, namely body.path. Despite my efforts, I keep encountering an error stating that the pat ...

angulartypescript

Converting a intricate visual into an array or alternative data structure using JavaScript/TypeScript

As a passionate aviation enthusiast, I am looking to develop a tool that can calculate the necessary takeoff speeds for a Boeing 747-400F. With access to authentic documentation for this aircraft, I have all the reliable information needed. The image prov ...

javascripttypescriptmathdata-structuresgraphics

Does npm run use a separate version of TSC?

I am encountering an issue with my VS Code and Node.js project that uses Typescript. Within my package.json file's script block, there is an entry: "build-ts": "tsc" When I run simply tsc on the integrated terminal command line, the compilation proc ...

typescriptnpmvisual-studio-codenpm-run

Collection of functions featuring specific data types

I'm currently exploring the idea of composing functions in a way that allows me to specify names, input types, and return types, and then access them from a central function. However, I've encountered an issue where I lose typing information when ...

typescript