I am currently working on an Angular 5 online tutorial using Visual Studio Code and have the following versions:
Angular CLI: 7.0.6
Node: 10.7.0
Angular: 7.0.4,
Despite not encountering any errors in Visual Studio Code, I am receiving an error in the browser console when I try to add [(ngModel)]="inputText" to my HTML :
Error: Template parse errors:
Can't bind to 'ngModule' since it isn't a known property of 'input'. ("<input type="text" [ERROR ->][(ngModule)]="inputText" />"): ng:///AppModule/HomeComponent.html@0:19
syntaxError
./node_modules/@angular/compiler/fesm5/compiler.js/TemplateParser.prototype.parse compiler.js:2547
After researching similar errors, most suggestions point toward missing imports like "{ FormsModule }" or misspellings like "[(ngModule)]=". However, these do not seem to be the issue in my case.
It appears that the declaration in app.module.ts is not being reflected on the HTML page, leaving me puzzled as to why. All files are saved, the package.json file includes @angular/forms dependency, and simpler code works without issues, including one-way data binding.
Below are the relevant files:
home.component.html
`<input type="text" [(ngModule)]="inputText" />`
home.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
inputText: string = "";
constructor() { }
ngOnInit() {
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
My main questions are:
Where could the error lie?
What steps can I take to troubleshoot this issue?