Question

我很难为我的angular-app进行路由。我使用子模块进行路由（带有延迟加载）。一切正常，但是部署后我遇到了一个问题：应用程序尝试获取错误路径的文件子模块。

当我尝试转到存档模块时出现错误消息：

ChunkLoadError：加载块组件-归档-归档模块失败。

示例：

正确的路径： http://dev/App/runtime.js

错误的路径： http://dev/SitePages/components-archive-archive-module.js

然后我尝试在app.module中加载子模块（拒绝延迟加载）。

但是我遇到了另一个问题：我的路线是错误的（不仅用于构建）。永远（root除外）都打开了我的EventModule。路由器是否已注册路径-已打开事件模块。

我的例子：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule, NbSidebarModule, NbButtonModule, NbTabsetModule, NbCardModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';
import { MainModule } from './components/main/main.module';
import { AddModule } from './components/add/add.module';
import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
        BrowserModule,
        BrowserAnimationsModule,
        NbThemeModule.forRoot({ name: 'default' }),
        NbLayoutModule,
        NbEvaIconsModule,
        NbSidebarModule.forRoot(),
        NbButtonModule,
        NbTabsetModule,
        NbCardModule,
        MainModule,
        AddModule,
        ArchiveModule,
        EventModule,
        HttpClientModule,
        AppRoutingModule,
  ],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

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

const routes: Routes = [
  {
    path: '',
    loadChildren: './components/main/main.module#MainModule'
  },

  {
    path: 'archive',
    loadChildren: './components/archive/archive.module#ArchiveModule'
  },
  {
    path: 'event',
    loadChildren: './components/event/event.module#EventModule'
  },
  {
    path: 'add',
    loadChildren: './components/add/add.module#AddModule'
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

main-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ViewEventsComponent } from './view-events/view-events.component';

const routes: Routes = [
    {
        path: '',
        component: ViewEventsComponent,
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class MainRoutingModule { }

event-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EventPageComponent } from './event-page/event-page.component';

const routes: Routes = [
    {
        path: ':id',
        component: EventPageComponent,
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class EventRoutingModule { }

我在做什么错了？

路由子模块Angular

0 个答案: