尝试从模块加载独立组件时出现NgModule类型不匹配错误

你遇到的错误核心是路由配置属性误用：loadChildren是专门用来懒加载NgModule的，而独立组件需要用loadComponent（懒加载场景）或直接指定component（非懒加载场景）。

以下是两种正确的配置方式：

方式1：懒加载独立组件（推荐，保持代码分割） #

修改路由配置中的loadChildren为loadComponent：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonLayoutComponent } from './common-layout.component';
import { FilterKind } from '../core/services/filter.service';

const routes: Routes = [
    {
        path: '',
        component: CommonLayoutComponent,
        children: [
            {
                path: 'crash-reports',
                // 替换loadChildren为loadComponent
                loadComponent: () =>
                    import('../pages/crash-reports/crash-reports.component').then((m) => m.CrashReportsComponent),
            },
        ],
    },
];

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

方式2：直接挂载（非懒加载） #

如果不需要懒加载，可以直接导入组件后用component属性配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonLayoutComponent } from './common-layout.component';
import { FilterKind } from '../core/services/filter.service';
// 直接导入独立组件
import { CrashReportsComponent } from '../pages/crash-reports/crash-reports.component';

const routes: Routes = [
    {
        path: '',
        component: CommonLayoutComponent,
        children: [
            {
                path: 'crash-reports',
                component: CrashReportsComponent,
            },
        ],
    },
];

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

关键说明 #

Angular独立组件确实无需依赖NgModule即可配置路由，但必须匹配正确的路由属性：

• loadChildren: 仅用于懒加载包含路由配置的NgModule
• loadComponent: 用于懒加载独立组件
• component: 用于直接挂载已导入的组件（支持独立组件和非独立组件）

内容的提问来源于stack exchange，提问作者Anton Kazakov