【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由
创建一个带路由的项目，依次执行下面每行代码
ng n RouingApp --routingcd RouingAppng g c components/firstng g c components/secondng g m components/second --routing 
代码拷贝：
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {SecondComponent} from "./second.component";const routes: Routes = [{path: '',//默认被异步加载该模块的时候自动引入SecondComponentcomponent: SecondComponent,},
];@NgModule({imports: [RouterModule.forChild(routes)],//注意用于懒加载的模块必须是forChild方式引入exports: [RouterModule]
})
export class SecondRoutingModule {
}
代码拷贝：
import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {FirstComponent} from './components/first/first.component';
import {ChildComponent} from './components/first/child/child.component';
import {PageNotFoundComponent} from './components/first/pageNotFound.component';const routes: Routes = [{path: '',redirectTo: 'first',pathMatch: 'full'},{path: 'first',component: FirstComponent,//同步加载//子路由children: [{path: 'child',component: ChildComponent,}]},{path: 'second',// loadChildren: './components/second/second.module',//异步加载、惰性加载、懒加载（已失效）loadChildren: () => import('./components/second/second.module').then(m => m.SecondModule),//异步加载、惰性加载、懒加载},{ path: '**',component: PageNotFoundComponent //当输入路由错误的时候跳转到此页面}
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule {
}
把app.component.html代码改成如下
运行项目
ng s --open访问http://localhost:4200就可以了
💡强哥提示：
如不小心创建错了目录要删除，命令是 rd/s/q 路径/文件夹
如果不小心把app-routing.module.ts或app.module.ts这种路由文件删除了，可以用以下命令：
单独添加app路由文件：ng g m app-routing --flat
单独添加app模块文件：ng g m app --flat
添加app路由以及模块文件：ng g m app --routing --flat
更多相关：
-
有一天，我写了一个自信满满的自定义组件myComponent，在多个页面import使用了，结果控制台给我来这个 我特么裤子都脱了，你给我来这个提示是几个意思 仔细一看 The Component 'MyComponentComponent' is declared by more than one NgModule...
-
cnpm install vue-quill-editor cnpm install quill-image-drop-module cnpm install quill-image-resize-module 执行上面的命令安装，然后在main.js下面加入 //引入quill-editor编辑器import...
-
首先要理解Vue项目加载顺序： index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式
-
简单记录平时画图用到的python 便捷小脚本 1. 从单个文件输入 绘制坐标系图 #!/usr/bin/python # coding: utf-8 import matplotlib.pyplot as plt import numpy as np import matplotlib as mpl import sysf...
-