我使用Angular版本16和VScode,代码运行正常,但我得到了这个错误:
can't bind to 'ngModel' since it isn't a known property of 'input'
.我有app.module.ts:
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { ProductsModule } from './modules/products/products.module';
import { SalesModule } from './modules/sales/sales.module';
@NgModule({
declarations: [AppComponent, HeaderComponent],
imports: [BrowserModule, AppRoutingModule, ProductsModule, SalesModule],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotFoundComponent } from './components/not-found/not-found.component';
const routes: Routes = [
{ path: '', redirectTo: '/products', pathMatch: 'full' },
{ path: 'sales', loadChildren: () => import('./modules/sales/sales.module').then(m => m.SalesModule) },
{ path: 'products', loadChildren: () => import('./modules/products/products.module').then(m => m.ProductsModule) },
{ path: '**', component: NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这里是sales. moduls.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { SalesRoutingModule } from './sales-routing.module';
import { AddSaleComponent } from 'src/app/components/sales/add-sale/add-sale.component';
import { SalesService } from 'src/app/services/sales.service';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [
AddSaleComponent
],
imports: [
BrowserModule,
CommonModule,
SalesRoutingModule,
FormsModule,
ReactiveFormsModule
],
providers: [SalesService]
})
export class SalesModule { }
这里还有sales-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddSaleComponent } from 'src/app/components/sales/add-sale/add-sale.component';
const routes: Routes = [
{
path: '',
component: AddSaleComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SalesRoutingModule {}
因此,在add-sale.component.html中,我得到了一个简单ngModel错误:
Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
这里是add-sale.component.html.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-add-sale',
templateUrl: './add-sale.component.html',
styleUrls: ['./add-sale.component.scss'],
})
export class AddSaleComponent {
favoriteColor = '';
}
我已经检查了Can't bind to 'ngModel' since it isn't a known property of 'input',但仍然得到错误。你有什么建议吗?
**更新:**我删除了appModule中的PrdocutsModule和SalesModule:
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
@NgModule({
declarations: [AppComponent, HeaderComponent],
imports: [BrowserModule, AppRoutingModule, FormsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
但仍然不起作用。
2条答案
按热度按时间rkue9o1l1#
您不应该在appComponent中导入惰性模块:
因为这样做会急切地加载它们,而不是懒惰地加载。
vhmi4jdf2#
问题是:https://github.com/angular/vscode-ng-language-service/issues/1894
要解决这个问题,您应该更新VSCode,然后重新加载Angular Language Service以获得相同的版本(16)。很高兴知道,他们删除了ngcc,更多信息在这里:https://itnext.io/angular-16-is-huge-67288a3ff58b