项目创建后如何使用Angular-CLI选项？如何补加遗漏的项目配置？

别担心，这种创建项目时遗漏路由的情况很常见，Angular CLI提供了便捷的方式来补全这个配置，跟着下面的步骤操作就行：

步骤1：使用Angular CLI生成路由模块 #

打开终端，切换到你的项目根目录（也就是myProject文件夹），然后执行以下命令：

ng generate module app-routing --flat --module=app

参数说明：

• --flat：让生成的模块文件直接放在src/app目录下，不会额外创建子文件夹
• --module=app：自动把这个新生成的路由模块注册到AppModule的imports数组中

步骤2：完善路由配置 #

执行完上面的命令后，src/app目录下会出现app-routing.module.ts文件，但它只有基础结构，你需要手动补充路由规则。打开这个文件，修改成类似下面的结构：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你需要路由的组件，比如HomeComponent、AboutComponent
// import { HomeComponent } from './home/home.component';
// import { AboutComponent } from './about/about.component';

const routes: Routes = [
  // 默认路由，重定向到首页
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  // 首页路由
  { path: 'home', component: HomeComponent },
  // 关于页路由
  { path: 'about', component: AboutComponent },
  // 404 fallback路由，匹配所有未定义的路径
  { path: '**', redirectTo: '/home' }
];

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

记得根据你实际的组件，调整导入语句和路由规则。

步骤3：添加路由出口 #

最后，确保你的app.component.html文件中包含<router-outlet></router-outlet>标签——这是路由组件渲染的位置。如果没有的话，把它添加到合适的位置，比如：

<header>
  <!-- 你的导航栏 -->
</header>
<router-outlet></router-outlet>
<footer>
  <!-- 你的页脚 -->
</footer>

完成以上三步后，你的项目就拥有了完整的路由配置，和创建项目时选择添加路由的效果完全一致。

内容的提问来源于stack exchange，提问作者Mojtaba Arvin