无法匹配任何路线。 URL 段 'calendar'

Question

我正在实习，我应该构建自己的 Angular 5 web 应用程序，但这个问题已经困扰我几个多小时了。出于某种原因，每当我想打开日历时，它都会说找不到 'calendar' URL.

错误信息：

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 细分市场：'calendar' 错误：无法匹配任何路由。 URL 段：'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'
                        }
                    }
                ]
            }
        ];
    }
}

如您所见，我在 Material 设计中使用 Fuse 2。这是必需的。

还有一个 sample.module.ts 随演示一起提供。我将 calendar.module.ts 与这个进行了比较，以确定为什么此应用程序看不到 URL，但无济于事...

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
{
}

注意：我是一个绝对的初学者。

非常感谢！

Answer 1

将 patchMatch 设置为完整

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

`

Answer 2

我认为路由的重定向属性只能用于儿童。尝试从 appRoutes 中删除重定向到，仅将其保留在日历模块中。

Answer 3

您需要为您的 FuseCalendarModule 分配一个路径，以便 Angular 知道它应该何时路由到该模块。

例如在您的 AppModule 中：

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

然后你可以在你现在延迟加载的 FuseCalendarModule 中指定你的默认路由：

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

您需要做的最后一件事是从 FuseCalendarModule 导出 RouterModule，以便它可以路由到：

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

希望对您有所帮助。

无法匹配任何路线。 URL 段 'calendar'

Cannot match any routes. URL Segment 'calendar'

url

fuse

typescript

angular

angular5