Navigational module and wildcard for routes not located

I have my routing configuration structured as follows:

app-routing

const routes: Routes = [
  {
    path: 'login',
    loadChildren: 'app/modules/auth/auth.module#AuthModule'
  },
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    loadChildren: 'app/modules/dashboard/dashboard.module#DashboardModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'yards',
    loadChildren: 'app/modules/yards/yards.module#YardsModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'inspections',
    loadChildren: 'app/modules/inspections/inspections.module#InspectionsModule'
  },
  {
    path: 'settings',
    loadChildren: 'app/modules/settings/settings.module#SettingsModule'
  },
  {
    path: 'notfound',
    loadChildren: 'app/modules/errors/errors.module#ErrorsModule'
  },
  {
    path: '**',
    redirectTo: 'notfound'
  }
];

yards-routing

const routes: Routes = [
  { path: '', component: YardListComponent},
  { path: 'yards/new', component: YardEditComponent},
  { path: 'yards/:id', component: YardDetailComponent},
  { path: 'yards/:id/edit', component: YardEditComponent},
];

At the moment, when attempting to access a non-existent URL at the root level, the not found page is displayed. However, I am encountering the same issue when trying to navigate to ANY subpage such as yards/1 or yards/new

Is there a way for me to configure my routing in order to allow accessing sub pages while ensuring that the not found page functions correctly at all levels?

angularangular2-routing

Answer №1

It is crucial to organize your child routes before defining a wildcard route. As an illustration, consider structuring a main section of routes with the "top level" routes, followed by a secondary set of routes under pages where specific pages are designated.

export const AppRoutes: Routes = [{
        path: '',
        redirectTo: 'home',
        pathMatch: 'full',
    },
      {
        path: '',
        component: AdminLayoutComponent,
        children: [{
                path: 'home',
                loadChildren: './dashboard/dashboard.module#DashboardModule'
            },{
                path: 'calendar',
                loadChildren: './calendar/calendar.module#CalendarModule'
            },{
                path: '',
                loadChildren: './userpage/user.module#UserModule'
            },
            {
                path: 'analytics',
                component: Analytics

            }]
        },
        {
          path: 'forbidden',
          component: ForbiddenComponent
        },
        {
            path: '',
            component: AuthLayoutComponent,
            children: [{
                path: 'pages',
                loadChildren: './pages/pages.module#PagesModule'
            }]
        },{
            path: '**',
            redirectTo: '/home',
            pathMatch: 'full'
          }
];

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

Angular and TypeScript make a powerful combination when working with the mat-table component

I'm currently working with Angular's mat-table component. One challenge I'm facing is setting a caption for the table. <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id=tbl_suchergebnis> <caption> ...

angulartypescriptcaptionmat-table

Unable to implement the `omega/theme.css` file within the angular.json configuration

"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/primeicons/primeicons.css", ...

cssangularprimeng

Unleashing the Potential of a Single Node Express Server: Hosting Dual Angular Apps with Distinct Path

I have successfully managed to host two separate angular applications (one for customers and one for company staff) on the same node server, under different paths. The setup looks like this: // Serve admin app app.use(express.static(path.resolve(__dirname, ...

node.jsangularexpress

Angular subscription and observable continuously fetch information

I'm encountering an issue with utilizing subscriptions and observables Here is my code This is my inventory.service.ts getInventoryList = (page: string, pageSize,size) => { const userLocation = this.authService.getUserLocation(); let que ...

angularobservablehttprequestsubscriptionangular-http

Is there a substitute for $sce in Angular 7?

Previously, in Angular 1, we utilized $sce to display HTML tags like this: > <p><strong>xyzz</strong> yttryrtyt <span > style="color:#e74c3c">abc</span>.</p> in a user-friendly format. I am now curious about th ...

angularrenderingangular7angular-dom-sanitizer

Encountering a TypeScript Issue When Implementing an Interface

Compiler Error- Issue with 'MessageBus' Class: Property 'dispatch' is missing in the implementation of interface 'IMessageBus'. IMessageBus Interface- export interface IMessageBus { dispatch: (eventName: string, info?: ...

typescriptangular

Exploring alternative options for routing in Angular2 using auxiliary outlets

I have a folder structure that looks like this: my-app |- src |- app |- private |- private.routing |- public |- public.routing app.routing The contents of the private.routing file are as follows: export const rout ...

angularangular2-routing

Making changes to a single formControl in angular6 will cause the other formControl to be updated as

I have two select menus in my user interface with the same options. When I select an option in one menu, I want the other menu to display the same option, and vice versa. Currently, I am using the valueChanges method on the first formControl to update the ...

angulartypescripttypescript2.0

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

I am currently utilizing expressjs and have implemented cors validation to allow all origins. const options = { origin: ['*'], credentials: true, exposedHeaders: false, preflightContinue: false, optionsSuccessStatus: 204, methods: [&a ...

javascriptnode.jsangularexpresscors

Which packages will be included once ng eject is executed?

After executing the ng eject command, I observed the following messages displayed in the console. The last line indicates that packages have been added as a result of running the command. What specific packages are included when we run ng eject? For refe ...

angularangular-cli

The use of URL embedded parameters in @angular/http

Currently, I am utilizing a backend system that accepts search query parameters in both the ?-notation and the url-embedded format. I understand that I can use tools like URLSearchParams/RequestOptionsArgs to send requests to . However, I am curious about ...

resthttpangulartypescriptparameters

Unable to append item to document object model

Within my component, I have a snippet of code: isLoaded($event) { console.log($event); this.visible = $event; console.log(this.visible); this.onClick(); } onClick() { this.listImage = this.imageService.getImage(); let span = docu ...

javascripthtmlangulartypescript

Limiting access to the Google API key so that it is only usable within specific areas of the application

Incorporating both the Google Places and Distance Matrix API into my Angular 8 application has been a key aspect of its functionality. Initially, I attempted to limit access to the API by specifying the application URL () on the Google Cloud Platform. Su ...

angulargoogle-mapsangular8

Unraveling nested elements with the array map() method in Angular2 and Typescript: Fixing the issue of undefined property reference while mapping

Hey there! I'm currently working with Angular 4 and I have a piece of code that parses data from an API into a TypeScript array of rows. It's important to note that the code functions properly if elements like 'item.tceCampRun' and &apo ...

javascriptangulartypescript

Building an Angular 4 universal application using @angular/cli and integrating third-party libraries/components for compilation

While attempting to incorporate server side rendering using angular universal, I referenced a post on implementing an angular-4-universal-app-with-angular-cli and also looked at the cli-universal-demo project. However, I ran into the following issue: Upon ...

javascriptangularuniversal

Setting the initial selected option in a dropdown using Angular 4 Reactive Forms

One of the challenges I faced in Angular 4 was displaying a dropdown list with countries using a Reactive module. To achieve this, I had set up a configuration in a json file as follows: countries: ['USA', 'UK', 'Canada']; ...

angular

Discover the simplicity of incorporating pagination into an HTML table with Angular Material

My goal is to implement pagination on my webpage, displaying 3 rows per page and enabling navigation through pages using Angular Material pagination. In usersComponent.ts, I retrieved data from an API: import { Component, OnInit, ViewChild } from '@an ...

angularangularjsangular-materialangular-pagination

Improving event observation efficiency with Observable.fromEvent on the browser window

Within my file manager UI, each individual file item is currently set to monitor the window's wheel event. As soon as a file item comes into view on the page, its corresponding image loading process will be initiated by the file item component. While ...

angularrxjsobservable

I aim to toggle the visibility of input fields upon clicking a button

Form.html <form [formGroup]="myForm"> <ion-button [(ngModel)]="isActive"(click)="onClick()" >Add</ion-button> <ion-item> <ion-label position="floating">First Name</ion-label&g ...

htmlcssangularionic-frameworkionic4

Angular Error cli command Error: In order to proceed, please provide a command. To see a list of available commands, use '--help'

When I run any command with Angular CLI, I encounter an error. To resolve this issue, I attempted to uninstall and reinstall it by running the following commands: npm uninstall -g @angular/cli npm install -g @angular/cli However, the problem persists an ...

node.jsangularnpmangular-cli