Angular 12中如何创建高于App模块的模块并将Login模块设为默认入口？

Angular 中没有天然「层级高于App模块」的模块，应用启动时加载的根模块是最高层级模块，你可以根据需求选择以下两种方案实现需求：

方案一：将Login模块设置为根模块（层级高于原App模块） #

直接修改启动配置，把Login模块作为应用启动的根模块，优先级高于原App模块：

• 打开项目src/main.ts文件，修改启动逻辑：

// 把原来的AppModule引入替换为LoginModule
import { LoginModule } from './login/login.module';

// 修改启动方法的入参
platformBrowserDynamic().bootstrapModule(LoginModule)
  .catch(err => console.error(err));

• 调整login.module.ts配置，指定启动渲染的登录组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoginComponent } from './login.component';

@NgModule({
  declarations: [LoginComponent],
  imports: [
    BrowserModule, // 根模块必须引入BrowserModule
    // 其他Login模块依赖的模块
  ],
  bootstrap: [LoginComponent] // 指定启动时渲染LoginComponent，对应login.html模板
})
export class LoginModule { }

该方案下原App模块可作为业务子模块，在需要时导入到Login模块中使用，层级低于Login根模块。

方案二：保留App模块为根模块，配置Login页为默认首页（更推荐） #

无需调整根模块层级，仅通过路由配置实现启动后默认打开登录页，适合后续需要扩展全局通用能力的项目：

• 打开app-routing.module.ts，配置根路由规则：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full' // 完全匹配空路径才触发重定向
  },
  {
    path: 'login',
    // 懒加载Login模块，如需预加载可直接在AppModule的imports数组中引入LoginModule
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
  },
  // 后续其他业务模块路由配置放在此处
];

• 打开login-routing.module.ts（如果没有则直接在LoginModule的imports中配置RouterModule.forChild），配置Login模块的默认路由：

const routes: Routes = [
  {
    path: '',
    component: LoginComponent // 匹配到login路径时渲染登录组件，对应login.html模板
  }
];

注意事项 #

• 采用方案一替换根模块后，全局通用配置（如HTTP拦截器、国际化配置、全局样式引入）需要同步迁移到Login模块中
• 采用方案二时可后续添加路由守卫，实现已登录用户访问根路径自动跳转到业务首页的逻辑，优化用户体验

内容的提问来源于stack exchange，提问作者A V