Angular 17 在没有 app.module.ts 的项目中“无法绑定到‘ngModel’”

Question

我目前正在开发一个 Angular 17 项目，该项目默认使用独立组件创建，但我总是遇到此错误：“无法绑定到‘ngModel’，因为它不是‘input’的已知属性。”。由于我的登录组件不是独立的并且在我的用户模块中声明和引导，所以出现了此错误。我正在用户模块中导入 FormsModule，但登录组件无法识别它。有人发现我的错误吗（我已经尝试生成 app.module.ts 并在那里导入 Forms 模块，但这也不起作用，这实际上不是我想要做的，我有一个独立的应用程序组件）。

这是我的代码：

遇到此问题的组件是 LoginComponent：

login.component.ts:

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {
    eMailOrUsername: string = '';
    password: string = '';
}

login.component.html：

<div class="flex flex-col items-center h-screen justify-center">
  <h1 class="dark:text-white text-7xl sm:text-8xl md:text-9xl text-shadow-custom font-family-cosmio lg-text-10xl">Pressmium</h1>
  <div class="vertical-centered w-full">
    <div class="relative w-full sm:w-2/3 lg:w-1/2">
    <input #eMailOrUsernameInput [(ngModel)]="eMailOrUsername" name="eMailOrUsernameInput" type="text" required
           class="rounded-xl p-2 pt-5 w-full border-1 border-gray-950 box-shadow-custom bg-white focus:bg-white
         focus:border-transparent focus:ring-2 focus:ring-gray-500 focus:ring-offset-transparent focus:outline-none h-12">
    <label class="absolute left-3 top-3 transition-all duration-200 ease-in-out pointer-events-none text-gray-600" [class.shrink]="eMailOrUsernameInput.value">
      Benutzername oder E-Mail-Adresse
    </label>
    </div>
  </div>
</div>

LoginComponent 是 UserModule 的一部分：

user.module.ts

import { NgModule } from '@angular/core';
import { LoginComponent } from "../../components/login/login.component";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [LoginComponent]
})
export class UserModule { }

并且LoginComponent是在app.routes.ts中使用的：

import { Routes } from '@angular/router';
import {LoginComponent} from "./components/login/login.component";


export const routes: Routes = [
  {
    path: '', redirectTo: 'login', pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  }
];

我遇到的错误是：

X [ERROR] NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'. [plugin angular-compiler]

    src/app/components/login/login.component.html:5:33:
      5 │ ...ilOrUsernameInput [(ngModel)]="eMailOrUsername" name="eMailOrUse...
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Error occurs in the template of component LoginComponent.

    src/app/components/login/login.component.ts:5:15:
      5 │   templateUrl: './login.component.html',
        ╵                ~~~~~~~~~~~~~~~~~~~~~~~~

Watch mode enabled. Watching for file changes...

有人可以帮助我吗？

我尝试使 AppComponent 不独立，并在新生成的 app.module.ts 中声明 + 引导它，以便让 LoginComponent 从 app.module.ts 识别 FormsModule，因为这对于许多人来说似乎是解决方案在非独立项目中遇到这个问题，但这不起作用。

我尝试从 app.routes.ts 中的 UserModule 导入 LoginComponent 并在 UserModule 中导出 LoginComponent ，因为我认为该错误是因为 LoginComponent 没有意识到它是在 UserModule 中声明和引导的，例如：

import { NgModule } from '@angular/core';
import { LoginComponent } from "../../components/login/login.component";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [LoginComponent],
  exports: [
    LoginComponent // LoginComponent exportieren
  ]
})
export class UserModule { }

但是app.routes.ts在UserModule中找不到LoginComponent。

Answer 1

在应用程序中将有独立组件

App

，我们需要导入

UserModule

并确保我们导出要从用户模块与应用程序共享的所有导入。

用户.module.ts

import { NgModule } from '@angular/core';
import { LoginComponent } from "../../components/login/login.component";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    // BrowserModule, <- not needed when application is standalone!
    FormsModule,
    CommonModule,
  ],
  exports: [
    CommonModule,
    FormsModule,
    LoginComponent,
  ],
  providers: [],
  // bootstrap: [LoginComponent] <- not needed when application is standalone! since app component is bootstrapped already!
})
export class UserModule { }

在您的应用程序中找到由

bootstrapApplication

引导的组件并导入 userModule，大多数路由将使用providers 数组中的

provideRouter()

定义，我们在其中使用登录组件！

...
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ...
    UserModule,
    ...
  ],
  ...
})
export class App {
   ...