Angular中app.module.ts编译失败、NgModule未声明及组件导入问题

一、先把app.module.ts的基础结构写对 #

手动创建的app.module.ts必须具备完整的Angular模块结构，尤其是@NgModule的导入和配置不能出错：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 添加这个模块解决ngForm指令找不到的报错
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component'; // 路径要和实际文件位置匹配

@NgModule({
  declarations: [
    AppComponent,
    UserComponent // 组件必须在此声明，否则模板无法识别
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

二、排查组件导入与声明的常见问题 #

1. 路径错误：检查UserComponent的导入路径是否和实际文件位置一致，比如组件在src/app/user文件夹下，路径就得是./user/user.component，嵌套目录要对应调整。
2. 组件选择器拼写错误：错误提示里的'app-use'大概率是'app-user'的笔误！打开user.component.ts查看@Component的selector配置：

   @Component({
     selector: 'app-user', // 模板中使用的<app-user>标签必须和这个选择器完全一致
     templateUrl: './user.component.html',
     styleUrls: ['./user.component.css']
   })
   

   模板标签和选择器必须完全匹配，不能出现拼写偏差。

三、让Angular编译系统识别app.module.ts #

1. 检查配置文件：打开angular.json，找到projects -> 你的项目名 -> architect -> build -> options -> main，确认值为src/main.ts。再查看main.ts是否正确导入并启动AppModule：

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { AppModule } from './app/app.module';
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

   如果之前项目是用独立组件模式创建的，main.ts可能直接启动AppComponent，这时候必须改成启动AppModule。
2. 清缓存重启服务：有时候VS Code或Angular服务的缓存会导致编译不识别新文件，先关闭ng serve，重启VS Code后再重新运行ng serve。

四、解决NgModule未声明的报错 #

如果仍提示NgModule未声明，检查两点：

• 有没有正确导入@NgModule：import { NgModule } from '@angular/core';这行绝对不能遗漏。
• 确保AppModule类被@NgModule()装饰器包裹，且类名与导出名称一致。

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