Angular material 延迟加载模块中的未知元素错误

Question

我在共享模块方法中遇到了一个奇怪的问题

在我的共享模块中，我有以下内容

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input'
import {MatButtonModule} from '@angular/material/button';


    @NgModule({
      declarations: [],
      imports: [
        CommonModule,
        MatFormFieldModule,
        MatInputModule,
        MatButtonModule
      ],
      exports:[MatFormFieldModule,MatInputModule,MatButtonModule]
    })
    export class SharedModule { }

我在应用程序模块中有一个延迟加载的登录模块

const routes: Routes = [

  {
  path: 'login',
  loadChildren: () => import('@app/modules/login/login-routing.module').then(m => m.LoginRoutingModule)
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在登录模块中，我导入了共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import {SharedModule} from '@app/modules/shared/shared.module'

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    SharedModule
  ]
})
export class LoginModule { }

但是在 LoginComponent 中添加表单字段时我收到元素未知错误

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

不确定为什么在延迟加载的模块中会发生这种情况

Angular版本：12 CLI 版本：12.2

Answer 1

您的路由似乎有误。您正在加载 LoginRoutingModule 而不是 LoginModule

Answer 2

如果您在“您的路由似乎有误。您正在加载 LoginRoutingModule 而不是 LoginModule”之后遇到一些问题，请尝试添加您的导入 - loginModule 这个：

imports:[
...,
RouterModule.forChild(
  [
    { 
      path:'', 
      component:LoginComponent
    }
  ]),
...

Angular material 延迟加载模块中的未知元素错误

Angular material not known element error in lazy loaded module

javascript

typescript

angular-material

angular