0

我正在使用angular 10 和 Material 13.1.1，并且我有一个延迟加载的模块，其中我有一个组件登录，我正在使用一些材料输入和字段表单，但这给了我错误

'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

和

'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

这是我的代码。

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 { NavbarComponent } from './Common/navbar/navbar.component';
import { FooterComponent } from './Common/footer/footer.component';
import { FormsModule } from '@angular/forms';
import { HomeComponent } from './webComponent/home/home.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { MassageComponent } from './webComponent/massage/massage.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';




@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    HomeComponent,
    ClassesComponent,
    ClassDetailComponent,
    MassageComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { HomeComponent } from './webComponent/home/home.component';
import { MassageComponent } from './webComponent/massage/massage.component';



const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'classes', component: ClassesComponent },
  { path: 'classes/:name', component: ClassDetailComponent },
  { path: 'massage', component: MassageComponent },
  {path:'members', loadChildren:()=>import('./Members/members.module').then(module=>module.MembersModule)},  /*<==please observe here I am lazy loading of the module*/
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),

  ],
  exports: [RouterModule],
})

在此之后我的延迟加载模块，其中我有登录组件（我想在其中使用材料）

成员.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './webComponent/login/login.component';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field'

const userRoot: Routes = [
  { path: 'login', component: LoginComponent },
  //  {path:'register'}
];

@NgModule({
  declarations: [LoginComponent],  /*<= this is the component*/
  imports: [
    CommonModule,
    RouterModule.forChild(userRoot),
    MatInputModule,                    /*<== here i have imported the material related stuffs*/
    MatFormFieldModule,
    FormsModule,
    ReactiveFormsModule
  ],
})

//if user interact with members arena then only activate this
export class MembersModule { }

我不确定我错过了什么？

我检查过

'mat-form-field' 的 Angular 6 错误显示不是已知元素：

使用来自另一个模块的组件

'mat-form-field' 不是已知元素 - Angular 5 & Material2

使用最新的 Angular 材料设计延迟加载 Angular 模块会出错

4

0 回答 0