No routes found that match. URL Segment 'calendar' does not correspond to any routes available

Currently interning, I've been tasked with building my own Angular 5 web application. However, I've hit a roadblock with an issue that's had me stuck for hours now. Every time I try to access the calendar, it gives me an error saying it can't find the 'calendar' URL.

Error message:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'calendar' Error: Cannot match any routes. URL Segment: 'calendar'

Here is the code snippet from calendar.module.ts:

import { NgModule } from '@angular/core';
// Other imports...
export class FuseCalendarModule {
    // Module code...
}

Additionally, here is some code from app.module.ts:

import { NgModule } from '@angular/core';
// Other imports...
export class AppModule {
    // Module code...
}

Lastly, navigation.model.ts contains information related to navigation:

import { FuseNavigationModelInterface } from '../core/components/navigation/navigation.model';

export class FuseNavigationModel implements FuseNavigationModelInterface {
    // Navigation model data...
}

I am using Fuse 2 for Material Design as per requirements. I have also compared the calendar module with sample.module.ts but haven't been able to resolve the issue yet...

Note: I am new to this, so any help would be greatly appreciated!

Thank you for your assistance!

Answer №1

Make sure to specify a path for your FuseCalendarModule in order for Angular to correctly route to this module.

Here's an example in your AppModule:

const appRoutes: Routes = [
    {
        path      : '',
        loadChildren: './pathToYour/calendar.module.ts#FuseCalendarModule'
    }
];

Then, set your default route in the lazyloaded FuseCalendarModule:

const routes: Routes = [
    {
        path     : 'calendar',
        component: FuseCalendarComponent,
        children : [],
        resolve  : {
            chat: CalendarService
        }
    },
    {
        path      : '**',
        redirectTo: 'calendar'
    }
];

Lastly, don't forget to export the RouterModule from the FuseCalendarModule so it can be properly routed to:

@NgModule({
    imports: [
        SharedModule,
        RouterModule.forChild(routes),
        CalendarModule.forRoot()
    ],
    exports: [RouterModule]
    declarations: [
        FuseCalendarComponent,
        FuseCalendarEventFormDialogComponent
    ],
    providers: [
        CalendarService
    ],
    entryComponents: [FuseCalendarEventFormDialogComponent]
})
export class FuseCalendarModule
{
}

I hope this explanation helps!

Answer №2

Make sure patchMatch is set to full

const appRoutes: Routes = [
{
    path      : '**',
    redirectTo: 'calendar',
    pathMatch: 'full'
}
];

`

Answer №3

It seems that the redirect feature in routing is specifically designed for child elements. To test this theory, consider removing the redirect property from the appRoutes and keeping it exclusively within the calendar module.

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

Creating web components with lit-element, leveraging rollup, postcss, and the tailwind framework for packaging

I have been attempting to package a functional web component that was developed using the lit-element/lit-html with the tailwind framework utilizing the postcss plugin from the rollup packager. Upon conducting a rollup, I discovered the compiled js and ht ...

Accessing the return value from an Angular subscription and storing it in

How can I use the value from a subscription to set the property for returning date and time? Component ngOnInit() { this.resetForm(); let defaultWIPEndTime = this.service.getDefaultWIPEndTime().subscribe(res => {}); console.log(defaultW ...

Maintaining the structure of a string when providing only a single mandatory parameter

I have a URL format saved in a String like this: "https://website.com/something/%s/else/%s" My goal is to insert the first String into the format while keeping it intact. However, when I create a string by passing only the first parameter and the formatt ...

The color scheme detection feature for matching media is malfunctioning on Safari

As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript. de ...

Angular2 - Incorporating a New Attribute

I am working with the following Angular2 code: <ngx-datatable-column prop="id" name="ID"> <template ngx-datatable-cell-template let-row="row" let-value="value"> <a [routerLink]="['/devicedtls',r ...

Splitting Ngrx actions for individual items into multiple actions

I'm currently attempting to create an Ngrx effect that can retrieve posts from several users instead of just one. I have successfully implemented an effect that loads posts from a single user, and now I want to split the LoadUsersPosts effect into ind ...

Angular 13: A guide on pulling data from an Excel spreadsheet

I have been encountering issues while trying to display data from a CSV file on a web platform using Angular 13. The errors I am facing are related to binding 'ngModel' and type mismatches in the code. errors Error: src/app/app.component.html:24 ...

Dynamic URL used in TRPC queries`

Is there a way to query a single post in TRPC and Next JS based on a dynamic url without using SSR or SSG? I have tried adding as string to router.query.id but encountered a TRPC error (only happening during the first load) because router.query.id is ini ...

What is the significance of utilizing an empty value `[]` for a typed array interface instead of using an empty `{}` for a typed object interface?

Why can I initialize friends below as an empty array [], but not do the same for session with an empty object {}? Is there a way to use the empty object without needing to make all keys optional in the interface? const initialState: { friends: Array< ...

Angular SwitchMap is a powerful operator that allows you

I am currently utilizing the mat-table component from angular material, in conjunction with pagination features. Whenever a user inputs text into the search field, a filter method is activated to send the text, page size, and current page to the backend f ...

Tips on obtaining checkbox values other than "true"

Having trouble retrieving the values of selected checkboxes instead of displaying "Custom Category"? I've attempted to access the values and attributes with no success. I'm aiming to display the values of the selected checkbox. app.component.ht ...

Set the value obtained from a resolved promise to a mutable reference object in a React component

I am in the process of developing a random movie generator. I am utilizing an external API to retrieve a list of movies and then selecting one randomly from the returned data. The current implementation is as follows: export default function Page() { con ...

Efficiently finding a group of substrings within a JavaScript string

I am currently working on a method to efficiently search for specific substrings within a given string. Here is my current implementation: const apple = "apple" const banana = "banana" const chickoo = "chickoo" const dates = & ...

Styles applied in the child component will have a cascading effect on the entire webpage

My webpage is divided into two parts: child1 and child2. Page Hierarchy: Parent Child1 Child2 Here are the CSS styles included in the page: Child1 -> z-index: 1 Child2 -> z-index: 2 What I want to achieve is to add a backdrop to the entire ...

Issue customizing static method of a subclass from base class

Let me illustrate a simplified example of my current code: enum Type {A, B} class Base<T extends Type> { constructor(public type: T) {} static create<T extends Type>(type: T): Base<T> { return new Base(type); } } class A exte ...

What causes this conditional type to function correctly in a static context while failing in a dynamic setting

I have created a unique conditional type that accurately generates a union of valid array indices: type ArrayIndices< N extends any[], Acc extends number[] = [] > = Acc['length'] extends N['length'] ? Acc[number] : ArrayIn ...

What is the best way to update the color of a label in a Mantine component?

When using the Mantine library, defining a checkbox is done like this: <Checkbox value="react" label="React"/> While it's possible to change the color of the checkbox itself, figuring out how to change the color of the label ...

Defining RefObject effectively in TypeScript

Greetings everyone, I am a newcomer to TypeScript and currently attempting to create a type for a RefObject that is of type HTMLAudioElement. However, I have encountered an error message. The error states: Type 'MutableRefObject<HTMLAudioElement> ...

A TypeScript object with user-defined keys

I have a question about utilizing TypeScript records with a custom Type as keys. Essentially, I have a specific type (a limited set of strings) that I want to use as keys for my record. My goal is to start with an empty initialization of this record. type ...

No indication of component statuses in the augury feature

Augury is a useful Chrome extension for debugging Angular applications. However, I have encountered an issue where it is not displaying any states currently. My setup includes Angular version 5.1.0 and Augury version 1.16.0. ...