Angular 17非独立组件ngModel绑定失败问题求助

问题核心原因 #

在Angular 17默认启用独立组件的项目中，若直接在路由配置里引用非独立组件（未通过所属模块加载），Angular会将该组件当作独立组件处理，完全忽略其所在NgModule的导入配置——这就是你在UserModule中导入了FormsModule，但LoginComponent仍无法识别ngModel的根本原因。

两种可行解决方案 #

方案一：将LoginComponent转为独立组件 #

直接修改login.component.ts，启用独立组件特性并导入FormsModule，无需依赖UserModule：

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrl: './login.component.css',
  standalone: true, // 启用独立组件模式
  imports: [FormsModule] // 直接在组件内导入FormsModule
})
export class LoginComponent {
    eMailOrUsername: string = '';
    password: string = '';
}

修改后原路由配置无需改动，ngModel即可正常识别。

方案二：通过模块加载LoginComponent到路由 #

若坚持使用非独立组件，需调整路由配置，通过模块加载而非直接引用组件：

1. 为UserModule添加子路由配置
   创建user.routes.ts文件：

   import { Routes } from '@angular/router';
   import { LoginComponent } from '../components/login/login.component';
   
   export const userRoutes: Routes = [
     { path: '', component: LoginComponent }
   ];
   

2. 更新UserModule配置
   导入RouterModule并配置子路由，同时导出RouterModule：

   import { NgModule } from '@angular/core';
   import { LoginComponent } from "../../components/login/login.component";
   import { FormsModule } from "@angular/forms";
   import { BrowserModule } from "@angular/platform-browser";
   import { RouterModule } from '@angular/router';
   import { userRoutes } from './user.routes';
   
   @NgModule({
     declarations: [LoginComponent],
     imports: [
       BrowserModule,
       FormsModule,
       RouterModule.forChild(userRoutes) // 注册子路由
     ],
     exports: [RouterModule] // 导出RouterModule供上层路由使用
   })
   export class UserModule { }
   

3. 修改根路由配置
   通过loadChildren加载UserModule：

   import { Routes } from '@angular/router';
   
   export const routes: Routes = [
     {
       path: '', redirectTo: 'login', pathMatch: 'full'
     },
     {
       path: 'login',
       loadChildren: () => import('./path/to/user.module').then(m => m.UserModule)
     }
   ];
   

   替换./path/to/user.module为UserModule实际文件路径即可。

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