Angular子模块导入报错：路由配置后仍提示then不存在及符号解析错误

错误原因分析 #

你遇到的两个报错对应两个明确问题：

1. Property 'then' does not exist：Angular版本兼容性问题——Angular 8+之后，路由懒加载的loadChildren语法有更新，旧的Promise链式写法在新编译器下会触发类型错误。
2. Reference to a local (non-exported) symbol 'routes'：Angular编译器需要静态解析路由配置，未导出的局部routes常量无法被正确识别。

具体修复步骤 #

1. 修正AppRoutingModule配置

修改AppRoutingModule，先导出routes常量，同时替换loadChildren的写法以适配版本：

import { RouterModule, Routes } from "@angular/router";
import { UserLayoutComponent } from "./layout/user-layout/user-layout.component";
import { AdminLayoutComponent } from './layout/admin-layout/admin-layout.component';

// 导出routes常量，解决静态解析报错
export const routes: Routes =[
    {path:'', component: UserLayoutComponent},
    {path:'admin', component: AdminLayoutComponent, children:[
        {
            path:'dashboard',
            // 方案一：兼容Angular 8+的Promise写法（修复类型问题）
            loadChildren: () => import('./views/admin/dashboard/dashboard.module').then((m) => m.DashboardModule)
            // 方案二：Angular 9+推荐的极简字符串写法（更简洁）
            // loadChildren: './views/admin/dashboard/dashboard.module#DashboardModule'
        },
    ]}
];

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

2. 确认DashboardModule的正确性

确保DashboardModule已正确导入路由模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';

@NgModule({
  declarations: [DashboardComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule // 必须导入子路由模块
  ]
})
export class DashboardModule { }

3. 额外验证项

• 运行ng version确认Angular版本，确保loadChildren写法与版本匹配；
• 检查import('./views/admin/dashboard/dashboard.module')的文件路径是否正确，避免因路径错误导致模块加载失败。

内容的提问来源于stack exchange，提问作者Fares Naoui