Angular子模块路由无需导入App模块可行吗？含懒加载与跨模块导航

1. 修正子路由配置，实现默认页面自动加载 #

不要在HomeComponent中通过代码手动导航，直接在子路由配置里添加默认重定向，这是Angular路由的标准实现方式，更可靠且符合框架设计：

修改home-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { MarketplaceComponent } from './components/marketplace/marketplace.component';
import { WelcomeComponent } from './components/welcome/welcome.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: '', redirectTo: 'welcome', pathMatch: 'full' }, // 新增默认重定向规则
      { path: 'welcome', component: WelcomeComponent },
      { path: 'marketplace', component: MarketplaceComponent },
    ]
  },
];

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

配置完成后，访问/home时会自动重定向到/home/welcome，HomeComponent的<router-outlet>会正确加载WelcomeComponent。

2. 简化HomeComponent代码 #

删除组件内的手动导航逻辑，避免路由初始化冲突：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss'
})
export class HomeComponent {
  // 无需注入Router和ngOnInit导航逻辑
}

3. 修复模块内导航失效问题 #

子模块内导航需使用相对路由（推荐）或正确的绝对路由：

• 相对路由（适合模块内同级/层级导航）：

  // 在WelcomeComponent中导航到Marketplace
  import { ActivatedRoute, Router } from '@angular/router';
  
  constructor(private router: Router, private route: ActivatedRoute) { }
  
  goToMarketplace(): void {
    this.router.navigate(['marketplace'], { relativeTo: this.route });
  }
  

• 绝对路由：直接使用完整路径this.router.navigate(['/home/marketplace'])

4. 解决"Module 'url' has been externalized"警告 #

该警告源于Node.js核心模块url被引入到浏览器环境，Angular构建工具会将这类模块外部化以避免兼容性问题，解决方式：

• 检查项目依赖，若第三方包使用了url模块，尝试升级到适配浏览器的版本
• 若为自定义代码，替换url.parse为浏览器原生URL API：

  // 替换url.parse(urlString)
  const url = new URL(urlString);
  

• 尝试升级Angular CLI到最新稳定版本

关于懒加载的确认 #

你当前的懒加载配置是完全正确的：app-routing.module.ts中通过loadChildren引入子模块，且未在app.module中导入子模块，这种方式会在用户首次访问对应路径时才加载子模块代码，完全符合按需懒加载的需求。

内容的提问来源于stack exchange，提问作者Andrew Ericson