Angular 17 "Can't bind to 'ngModel'" in Project without app.module.ts

Question

I am currently developing an Angular 17 Project which was created with standalone components as default and I am always running into this error: "Can't bind to 'ngModel' since it isn't a known property of 'input'.". This error is turning up, because of my login Component, which is not standalone and declared and bootstraped in my user Module. I am importing FormsModule in user Module, but the login Component won't recognize it. Does anybody find my mistake (I already tried generating a app.module.ts and importing Forms module there, but that didn't work either and that's not actually what I want to do, I have a app Component which is standalone).

This is my Code:

The Component that is running into this Problem is the 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 is part of the 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 { }

And LoginComponent is used in 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
  }
];

The Error I'm getting is:

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...

Can anybody help me?

I tried to make the AppComponent not standalone and declare + bootstrap it in the new generated app.module.ts to let LoginComponent recognize FormsModule from the app.module.ts, because that is, what seems to be the solution for many persons who have this problem in non-standalone-prjects, but that didn't work.

I tried to import LoginComponent from UserModule in app.routes.ts and export LoginComponent in UserModule, because I think that the error is because of LoginComponent not realizing it is declared and bootstraped in UserModule, like:

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 { }

But app.routes.ts couldn't find LoginComponent in UserModule.

Naren Murali · Accepted Answer · 2024-04-21 10:22:33Z

We have defined a UserModule but we are not importing anywhere to use it, that is why you are getting this error, just import UserModule so that FormsModule is discoverable!

In the application there will be the standalone component App there we need to import the UserModule and make sure we export all the imports that we want to share with the application from user module.

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, <- 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 { }

In your application find the component that is bootstrapped by bootstrapApplication and import the userModule, mostly the routing will be defined using provideRouter() in the providers array, where we use the login component!

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

Collectives™ on Stack Overflow

Angular 17 "Can't bind to 'ngModel'" in Project without app.module.ts

1 Answer 1

user.module.ts

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

user.module.ts

Comments

Your Answer

Sign up or log in

Post as a guest

Related