Angular项目遇NG8001错误：'router-outlet'不是已知元素求助

问题背景 #

我是Angular新手，项目目录结构如下，在default-layout.component.html中使用<router-outlet>时出现错误：

NG8001: 'router-outlet' is not a known element:

尽管已在路由模块和根模块做了相关配置，错误依然存在。

相关代码片段 #

项目目录结构 #

src/
├─ app/
│  ├─ containers/
│  │  ├─ default-layout/
│  │  │  ├─ default-layout.component.html
│  │  │  ├─ default-layout.component.ts
│  │  │  ├─ index.ts
│  │  ├─ index.ts
│  ├─ shared/
│  ├─ features/
│  │  ├─ login/
│  │  │  ├─ components/
│  │  │  ├─ services/
│  │  │  ├─ login.component.html
│  │  │  ├─ login.component.ts
│  │  │  ├─ login.module.ts

default-layout.component.html代码 #

<div class="container-fluid">
  <ng-http-loader
    backgroundColor="#EB2E2C"
    spinner="sk-wave">
  </ng-http-loader>
  <router-outlet></router-outlet>
</div>

app.routes.ts代码 #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// Import Containers
import { DefaultLayoutComponent } from './containers';

import { LoginComponent } from './features/login/login.component';
import { AuthguardService } from './shared/services/authguard.service';

export const routes: Routes = [
    /* {
       path: '',
       redirectTo: 'dashboard',
       pathMatch: 'full',
     },*/
    {
        path: '', redirectTo: '/login', pathMatch: 'full'
    },
    {
        path: 'login',
        component: LoginComponent,
        data: {
            title: 'Login Page'
        }
    },
    {
        path: '',
        component: DefaultLayoutComponent,
        canActivateChild: [AuthguardService],
        data: {
            title: 'Home'
        },
        children: [
        ]
    }
];

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

app.module.ts代码 #

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';

// Import containers
import { DefaultLayoutComponent } from './containers/default-layout';

import { LoginComponent } from './features/login/login.component';

import { BreadcrumbModule, FooterModule, HeaderModule, SidebarModule, } from '@coreui/angular';


// Import routing module
import { AppRoutingModule } from './app.routes';

import { AuthguardService } from './shared/services/authguard.service';
import { LoginService } from './features/login/services/login.service';
import { ModalModule, BsModalService } from 'ngx-bootstrap/modal';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { NgHttpLoaderModule } from 'ng-http-loader';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { BaseChartDirective } from 'ng2-charts';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    DefaultLayoutComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    AppRoutingModule,
    BreadcrumbModule,
    FooterModule,
    HeaderModule,
    SidebarModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    BsDatepickerModule.forRoot(),
    CollapseModule.forRoot(),
    ModalModule.forRoot(),
    NgxDatatableModule,
    BaseChartDirective,
    NgHttpLoaderModule.forRoot()
  ],
  providers: [AuthguardService, LoginService, BsModalService,
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }, provideHttpClient(withInterceptorsFromDi())],
  bootstrap: [AppComponent]
})
export class AppModule {
}

default-layout.component.ts代码 #

import {Component} from '@angular/core';
import {navItems} from '../../_nav';
import {Router} from '@angular/router';
import {LoginService} from '../../service/login.service';
import {CookieService} from 'ngx-cookie-service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html'
})
export class DefaultLayoutComponent {
  public navItems = navItems;
  public sidebarMinimized = true;
  private changes: MutationObserver;
  public element: HTMLElement = document.body;
  public listServer = [];

  constructor(
    private router: Router,
    private loginService: LoginService,
    private cookieService: CookieService) {

    this.changes = new MutationObserver((mutations) => {
      this.sidebarMinimized = document.body.classList.contains('sidebar-minimized');
    });

    this.changes.observe(<Element>this.element, {
      attributes: true
    });
    this.getStatusServer();
  }

  openDashboard() {
    this.router.navigate(['dashboard']);
  }

  getStatusServer() {
    // this.listServer = [{name:'L1',status:false},{name:'L2',status:true},{name:'L3',status:true},{name:'L4',status:true}]
    this.loginService.getStatusServer()
      .subscribe(res => {
          this.listServer = res;
        },
        err => {
        }
      );
  }


  getClassStatusServer(server) {
    return server.status ? 'divStatusServer text-center serverTrue' : 'divStatusServer text-center serverFalse';
  }

  logout() {
    this.loginService.logout()
      .subscribe(res => {
          console.log('LOGOUT OK');
          this.cookieService.deleteAll();
          this.router.navigate(['login']);
        },
        err => {
          console.log('LOGOUT ERROR');
          this.cookieService.deleteAll();
          this.router.navigate(['login']);
        }
      );
  }

}

app.component.ts代码 #

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

@Component({
  selector: 'app-root',
  standalone: true,
  //imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'CC';
}

main.ts代码 #

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

main.server.ts代码 #

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';

const bootstrap = () => bootstrapApplication(AppComponent, config);

export default bootstrap;

问题原因及解决方案 #

问题核心是混合使用了Angular独立组件模式和NgModule模式：

• AppComponent标记为standalone: true并通过bootstrapApplication启动，这种模式下不会加载AppModule，导致AppModule中导入的AppRoutingModule完全无效。
• DefaultLayoutComponent在AppModule中声明，但AppModule未被加载，因此无法获取RouterModule提供的router-outlet指令。

方案一：纯NgModule模式（推荐新手使用） #

1. 修改main.ts，通过AppModule启动应用：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. 修改app.component.ts，移除独立组件配置：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'CC';
}

3. 修改main.server.ts，对应使用AppModule启动：

import { platformServer } from '@angular/platform-server';
import { AppModule } from './app/app.module';

const bootstrap = () => platformServer().bootstrapModule(AppModule);

export default bootstrap;

4. 删除app.config.ts和app.config.server.ts（若未用到）。

方案二：纯独立组件模式 #

1. 给DefaultLayoutComponent添加独立组件配置，并导入RouterModule：

import {Component} from '@angular/core';
import {RouterModule} from '@angular/router';
// 其他导入保持不变

@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html',
  standalone: true,
  imports: [RouterModule]
})
export class DefaultLayoutComponent {
  // 组件逻辑保持不变
}

2. 在app.config.ts中配置路由，替代AppRoutingModule：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
// 添加其他需要的提供者，比如HttpClient、AuthguardService等

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // 其他提供者
  ]
};

3. 确保所有用到的组件（如LoginComponent）都设置为standalone: true并导入必要模块。

内容的提问来源于stack exchange，提问作者Antonino Scarpelli