Angular新手添加组件报错求助：组件引用异常问题

Hey there! I totally get how frustrating this can be when you're just starting out with Angular—you follow all the steps but still hit an error. Let's walk through the most common fixes for this issue:

1. 你大概率用错了组件选择器 #

When the Angular CLI generates a component with ng generate component menu, it automatically creates a kebab-case selector (like app-menu) instead of using the component class name (MenuComponent).

To confirm this:

• Open menu.component.ts
• Look at the @Component decorator's selector property—it should look something like this:

  @Component({
    selector: 'app-menu', // This is the selector you need to use
    templateUrl: './menu.component.html',
    styleUrls: ['./menu.component.css']
  })
  

• Replace <MenuComponent></MenuComponent> in app.component.html with <app-menu></app-menu> instead.

2. 确认组件在AppModule中正确声明 #

Even if you imported MenuComponent in app.module.ts, double-check that it's added to the declarations array—this is a super easy step to miss:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component'; // Make sure this import exists

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent // This line must be present!
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 小细节：保存文件并重启开发服务器 #

Sometimes Angular's hot-reload doesn't pick up all changes immediately. Try saving all your open files, and if the error persists, stop your ng serve command and restart it with ng serve again.

Give these steps a shot—9 times out of 10, this fixes the issue for new Angular devs!

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