Cannot match any routes. URL Segment 'calendar'

Question

I'm at my internship and I am supposed to build my own Angular 5 webapplication, but this problem has me stumped for over a few hours by now. For some reason, whenever I want to open the calendar, it says that it cannot 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'

calendar.module.ts:

import { NgModule } from '@angular/core';
import { SharedModule } from '../../../../core/modules/shared.module';
import { RouterModule, Routes } from '@angular/router';
import { FuseCalendarComponent } from './calendar.component';
import { CalendarService } from './calendar.service';
import { CalendarModule } from 'angular-calendar';
import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';

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

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

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import 'hammerjs';
import { SharedModule } from './core/modules/shared.module';
import { AppComponent } from './app.component';
import { FuseMainModule } from './main/main.module';
import { FuseSplashScreenService } from './core/services/splash-screen.service';
import { FuseConfigService } from './core/services/config.service';
import { FuseNavigationService } from './core/components/navigation/navigation.service';
import { FuseSampleModule } from './main/content/sample/sample.module';
import { TranslateModule } from '@ngx-translate/core';

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

@NgModule({
    declarations: [
        AppComponent
    ],
    imports     : [
        BrowserModule,
        HttpClientModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(appRoutes),
        SharedModule,
        TranslateModule.forRoot(),
        FuseMainModule,
        FuseSampleModule
    ],
    providers   : [
        FuseSplashScreenService,
        FuseConfigService,
        FuseNavigationService
    ],
    bootstrap   : [
        AppComponent
    ]
})
export class AppModule
{
}

navigation.model.ts:

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

export class FuseNavigationModel implements FuseNavigationModelInterface
{
    public model: any[];

    constructor()
    {
        this.model = [
            {
                'id'      : 'applications',
                'title'   : 'Applications',
                'translate': 'NAV.APPLICATIONS',
                'type'    : 'group',
                'children': [
                    {
                        'id'   : 'sample',
                        'title': 'Sample',
                        'translate': 'NAV.SAMPLE.TITLE',
                        'type' : 'item',
                        'icon' : 'email',
                        'url'  : '/sample',
                        'badge': {
                            'title': 2,
                            'translate': 'NAV.SAMPLE.BADGE',
                            'bg'   : '#F44336',
                            'fg'   : '#FFFFFF'
                        }
                    },
                    {
                        'id'   : 'calendar',
                        'title': 'Calendar',
                        'translate': 'NAV.CALENDAR.TITLE',
                        'type' : 'item',
                        'icon' : 'email',
                        'url'  : '/calendar',
                        'badge': {
                            'title': 1,
                            'translate': 'NAV.CALENDAR.BADGE',
                            'bg'   : '#F44336',
                            'fg'   : '#FFFFFF'
                        }
                    }
                ]
            }
        ];
    }
}

As you might be able to see, I am using Fuse 2 for Material Design. This is required.

There is also a sample.module.ts that came with the demo. I compared calendar.module.ts with this one to determine why this app can't see the URL, but to no avail...

sample.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { SharedModule } from '../../../core/modules/shared.module';

import { FuseSampleComponent } from './sample.component';

const routes = [
    {
        path     : 'sample',
        component: FuseSampleComponent
    }
];

@NgModule({
    declarations: [
        FuseSampleComponent
    ],
    imports     : [
        SharedModule,
        RouterModule.forChild(routes)
    ],
    exports     : [
        FuseSampleComponent
    ]
})

export class FuseSampleModule
{
}

Note: I am an absolute beginner.

Thank you very much!

Answer 1

You need to assign a path to your FuseCalendarModule so that Angular knows when it should route to this module.

For example in your AppModule:

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

and then you can specify your defaultroute in your now lazyloaded FuseCalendarModule:

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

The last thing you need to do is to export the RouterModule from the FuseCalendarModule so it can be routed to:

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

Hope this helps.