【问题标题】：Angular2+ Routing - Content Download while navigatingAngular2+ 路由 - 导航时下载内容
【发布时间】：2018-01-30 11:41:23
【问题描述】：

我正在为 2 个路由模块实现完全相同的路由。

两个路由模块的组件都正确渲染，问题是“不工作”路由，如果我通过单击路径进行导航，页面似乎会重新加载...在控制台中，我看到浏览器再次下载了 js 文件（ bundle / polyfil 等）

StartRoutingModule - 不工作

import { OrderCreateComponent } from '../order-create/order-create.component';
import { StarterComponent } from './../starter.component';
import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AdminDashboard1Component } from "../../admin/admin-dashboard1/admin-dashboard1.component";

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'app',
        component: StarterComponent,
        children: [
          {
            path: '',
            component: AdminDashboard1Component            
          },
          {
            path: 'OrderCreate',
            component: OrderCreateComponent
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class StarterRoutingModule { }

AdminRoutingModule - 工作

import { AdminDashboard2Component } from './../admin-dashboard2/admin-dashboard2.component';
import { AdminDashboard1Component } from './../admin-dashboard1/admin-dashboard1.component';
import { AdminComponent } from './../admin.component';
import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'admin',
        component: AdminComponent,
        children: [
          {
            path: '',
            redirectTo: 'dashboard1',
            pathMatch: 'full'
          },
          {
            path: 'dashboard1',
            component: AdminDashboard1Component
          },
          {
            path: 'dashboard2',
            component: AdminDashboard2Component
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule { }

app-routing-module.ts

import { StarterComponent } from './../starter/starter.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { StarterRoutingModule } from "../starter/starter-routing/starter-routing.module";
import { AdminRoutingModule } from "../admin/admin-routing/admin-routing.module";


@NgModule({
  imports: [
    AdminRoutingModule ,
    StarterRoutingModule,
    RouterModule.forRoot([
//      { path: '', redirectTo: 'starter2', pathMatch: 'full' },
      { path: 'starter', component: StarterComponent }  
    ])
  ],
  declarations: [],
  exports: [ RouterModule]
})
export class AppRoutingModule { }

浏览器通过这些路径再次下载 js/image 等...（似乎重新加载）

/app/
/app/OrderCreate

使用这些路径，应用程序只需加载正确的组件，而无需再次下载 js/其他内容。

/admin/dashboard1
/admin/dashboard2

错误在哪里？感谢支持

【问题讨论】：

您是否在 app-routing.module.ts 文件中列出了 AdminModule？
嗨 Anoop，不，我将它添加到代码中，但结果是一样的。我已经在帖子中集成了代码

标签： angular angular-routing

【解决方案1】：

您可以像这样转换您的 app-routing.module.ts 文件

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

const routes: Routes = [
                          {
                              path: '',
                              loadChildren: './starter/starter.module#StarterModule
                          },
                          {
                              path: 'admin',
                              loadChildren: './admin/admin.module#AdminModule
                          },];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Angular 项目遵循树形结构。所以最好在同一个模块下声明相关任务（如AdminModule中的组件Dashboard1和Dashboard2）并在其routing.module文件中指定路由。

假设您没有功能模块（例如作为主页的单个视图）。您可以在 app.module.ts 文件中定义此类组件，并在 app-routing.module.ts 文件中导入该组件后指定其路由，如下所示：

{ path: 'starter', component: StarterComponent }

如果您使用属性redirectTo，则应预定义指定的路由。在您的代码中：

{ path: '', redirectTo: 'starter2', pathMatch: 'full' }

但是你没有提到如果找到 url starter2 该怎么做。

如果你用你的代码检查这些，我相信你很快就能解决你的问题。

【讨论】：

所以您建议将路由保留在 app-routing.module.ts 中的一个位置作为最佳实践对吧？
不完全是兄弟。您需要在单个模块中组织相关组件。例如，如果存在与消息相关的任务，那么您需要一个 MessageModule（您可以在其中声明 SentMessage、ViewMessageList 和 individualMessage 之类的组件）和一个 MessageRoutingModule（包含到这些组件的路由）。
然后您可以使用 AppRoutingModule 中的 loadChildren 属性指定 MessageModule。它允许您创建消息/发送、消息/列表、消息/视图等路由。
很高兴它有帮助:)

【解决方案2】：

问题在于我在测试路由时如何实现链接：

不工作方式：

<a href="/app/OrderCreate">OrderCreate</a>

工作方式：

<a routerLink="/app/OrderCreate">OrderCreate</a>

使用 routerLink 属性，所有内容都可以正常加载，无需重新加载页面

【讨论】：