angular6 懒加载修改默认路由

小咪咪 2022-05-10 08:04 184阅读 0赞

## ##

### **先放个官网教程地址（angular中文网 -路由）** ###

[https://www.angular.cn/tutorial/toh-pt5][https_www.angular.cn_tutorial_toh-pt5]

### **懒加载（**惰性加载的特性模块**）** ###

**         **[https://www.angular.cn/guide/lazy-loading-ngmodules][https_www.angular.cn_guide_lazy-loading-ngmodules]

首先 你带有个ng项目

**ng new customer-app --routing**

如果已经有了就不需要执行这一步

直接走下面这行

**ng generate module customers --routing ** （ `customers` 是该模块的名字 ， 新手建议跟着教程上的名字来 自己整个文件名整着整着就混了，比如说我就是）

向特性模块中添加组件  （我感觉官方给这个的意图就是让你看看咋懒加载的）customers/customer-list是自定义文件名

ng generate component customers/customer-list

为了提供另一个可路由到的地点，再创建第二个带路由的特性模块：

ng generate module orders --routing

ng generate component orders/order-list

然后 打开 app.component.html  文件

<h1>
      {
       {title}}
    </h1>
    
    <button routerLink="/customers">Customers</button>
    <button routerLink="/orders">Orders</button>
    <button routerLink="">Home</button>
    
    <router-outlet></router-outlet>

配置路由

打开src/app/app-routing.module.ts

const routes: Routes = [
      {
        path: 'customers',
        loadChildren: 'app/customers/customers.module#CustomersModule'
      },
      {
        path: 'orders',
        loadChildren: 'app/orders/orders.module#OrdersModule'
      },
      {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
      }
    ];

打开src/app/customers/customers.module.ts

import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { CustomersRoutingModule } from './customers-routing.module';
    import { CustomerListComponent } from './customer-list/customer-list.component';
    
    @NgModule({
      imports: [
        CommonModule,
        CustomersRoutingModule
      ],
      declarations: [CustomerListComponent]
    })
    export class CustomersModule { }

官方对这段话的解释是

**`customers.module.ts` 文件导入了 `CustomersRoutingModule` 和 `CustomerListComponent`，所以 `CustomersModule` 类可以访问它们。 接着 `CustomersRoutingModule` 出现在了 `@NgModule` 的 `imports` 数组中，这让 `CustomersModule` 可以访问它的路由模块。而 `CustomerListComponent` 出现在了 `declarations` 数组中，这表示 `CustomerListComponent` 属于 `CustomersModule`。**

接着

打开 src/app/customers/customers-routing.module.ts

import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    import { CustomerListComponent } from './customer-list/customer-list.component';
    
    
    const routes: Routes = [
      {
        path: '',
        component: CustomerListComponent
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class CustomersRoutingModule { }

**注意，`path` 被设置成了空字符串。这是因为 `AppRoutingModule` 中的路径已经设置为了 `customers`，所以 `CustomersRoutingModule` 中的这个路由定义已经位于 `customers` 这个上下文中了。也就是说这个路由模块中的每个路由其实都是子路由。**

**重复这个步骤以导入 `OrdersListComponent`，并为 `orders-routing.module.ts` 配置路由树组：**

import { OrderListComponent } from './order-list/order-list.component';
    
    const routes: Routes = [
      {
        path: '',
        component: OrderListComponent
      }
    ];

运行

ng serve

官方还给了一个查看是否懒加载的步骤

就打开network 看你跳页的时候是否加载了chunk文件

### 默认路由 ###

官方的是默认打开[http://localhost:4200][http_localhost_4200]

但是呢 我偏偏想让他默认打开 [http://localhost:4200/app-login-list][http_localhost_4200_app-login-list]

那就改呗

**打开src/app/app-routing.module.ts**

import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { LoginListComponent } from './login/login-list/login-list.component';
    
    const routes: Routes = [
      { path: 'app-login-list', component: LoginListComponent },
      {
        path: 'login',
        loadChildren: 'app/login/login-routing.module#LoginRoutingModule'
      },
      {
        path: 'index',
        loadChildren: 'app/index/index-routing.module#IndexRoutingModule'
      },
      { path: '',
        redirectTo: '/app-login-list',
        pathMatch: 'full'
      },
      {
        path: '',
        children: []
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

![70][]

import { LoginListComponent } from './login-list/login-list.component';

LoginListComponent 这个是在新建文件夹的时候系统帮你生成好的，小可爱们不要自己随便改  就找到对应文件夹的 module.ts里面 里面有 然后在app-routing.module.ts直接粘过去改一下路径行了

然后  在app.module.ts里面也加入

import { LoginListComponent } from './login/login-list/login-list.component';

配置一下

![70 1][]

注：

app.module.ts   里面不配置 会报错

app-routing.module.ts 里面不配置不会报错 但是也不会生效 默认路由不会改变

默认路由完成

打开浏览器

![70 2][]

输入[http://localhost:4200][http_localhost_4200]

你会发现他会自己跳到[http://localhost:4200/app-login-list][http_localhost_4200_app-login-list] 里

这样就表示成功了。

[https_www.angular.cn_tutorial_toh-pt5]: https://www.angular.cn/tutorial/toh-pt5
[https_www.angular.cn_guide_lazy-loading-ngmodules]: https://www.angular.cn/guide/lazy-loading-ngmodules
[http_localhost_4200]: http://localhost:4200
[http_localhost_4200_app-login-list]: http://localhost:4200/app-login-list
[70]: /images/20220510/9ccfce38dcd2430bb44c61eee2702072.png
[70 1]: /images/20220510/6cb000189c5f44569930b1aac4147148.png
[70 2]: /images/20220510/71c08ebc82284ed6a5056f36aba8d220.png