Question

我在实习期间，我应该建立自己的Angular 5网络应用程序，但这个问题让我难以忍受了几个小时。出于某种原因，每当我想打开日历时，它都会说它无法找到日历＆＃39; URL。

错误讯息：

错误错误：未捕获（在承诺中）：错误：无法匹配任何路由。网址细分：＆＃39;日历＆＃39; 错误：无法匹配任何路由。网址细分：＆＃39;日历＆＃39;

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'
                        }
                    }
                ]
            }
        ];
    }
}

您可能会看到，我正在使用Fuse 2进行Material Design。这是必需的。

演示附带了一个sample.module.ts。我将calendar.module.ts与此进行了比较，以确定此应用无法看到网址的原因，但无济于事......

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中指定你的defaultroute：

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

希望这有帮助。

无法匹配任何路线。网址细分＆＃39;日历＆＃39;

3 个答案: