如何修复Angular中选择器'app-gif'未匹配到任何元素的错误

控制台出现错误提示：

The selector "app-gif" did not match any elements

以下是项目相关代码：

gif.component.ts #

// gif.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-gif',
  template: `
    <h1>{{ title }}</h1>
    <img [src]="src" alt="Gif">
  `,
})
export class GifComponent implements OnInit {
  title: string = '';
  src: string = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.title = this.route.snapshot.paramMap.get('title') || '';
    this.src = `assets/${this.title}.gif`;
  }
}

app.module.ts #

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; // Import RouterModule
import { GifComponent } from '../gif/gif.component';
import { GifDetailComponent } from '../gif/gif-detail.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    GifComponent,
    GifDetailComponent,
    
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    RouterModule, // Add RouterModule to imports array
  ],
  providers: [],
  bootstrap: [GifComponent, GifDetailComponent]
})
export class AppModule { }

App.component.ts #

import { Component } from '@angular/core';
import { Router, RouterLink, RouterOutlet } from '@angular/router';
import { NgFor } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [RouterLink, RouterOutlet, NgFor]
})
export class AppComponent {
  title = 'compiled';
  gifs = [
    { title: 'gif1', src: 'assets/gif1.gif' },
    { title: 'GIF2', src: 'assets/gif2.gif' },
    // Gifs
  ];

  constructor(private router: Router) {}

  redirectToGif(gif: { title: string, src: string }) {
    this.router.navigate(['/gif', gif.title]);
  }
}

解决思路 #

1. 修正启动组件配置
   Angular应用只能有一个根启动组件，app.module.ts的bootstrap数组同时声明GifComponent和GifDetailComponent是错误的。应只保留AppComponent作为启动组件（它是根组件，包含<router-outlet>负责渲染路由组件），修改后的bootstrap数组应为：

bootstrap: [AppComponent]

同时要确保AppComponent被正确添加到app.module.ts的declarations数组中（若它不是独立组件）。

2. 检查路由配置
   确认AppRoutingModule中是否正确配置了/gif/:title路由指向GifComponent，示例配置如下：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GifComponent } from '../gif/gif.component';

const routes: Routes = [
  { path: 'gif/:title', component: GifComponent },
  // 其他路由
];

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

3. 统一组件模式
   当前项目混合了独立组件（AppComponent标记standalone: true）和NgModule声明组件（GifComponent在app.module.ts中声明），容易引发加载异常，可二选一调整：

• 将AppComponent改为非独立组件：移除standalone: true和imports数组，添加到app.module.ts的declarations中。
• 将GifComponent改为独立组件：添加standalone: true并导入CommonModule等依赖，路由配置中通过loadComponent或直接导入使用，不再依赖NgModule声明。

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