我有一个盎格鲁JS/角120.5混合应用程序，我正处于向上移动到适当的Angular 。
在mat表单字段中使用具有matinput属性的输入时，它似乎只显示占位符/标签值，而不应用任何其他样式。如图所示：

不确定是什么原因导致了这种情况，因为Angular 材质模块已正确导入，并且显示这些字段时没有控制台错误。下面是我的代码：
应用程序模块

import {BrowserModule} from '@angular/platform-browser';
import {UpgradeModule} from '@angular/upgrade/static';
import {HttpClientModule} from "@angular/common/http";
import moduleName from "./angularJS.module";
import {UIRouterUpgradeModule} from "@uirouter/angular-hybrid";
import {NgModule} from "@angular/core";
import {UserProfileModule} from "./app/modules/user/user-profile.module";

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        UpgradeModule,
        UserProfileModule,
        UIRouterUpgradeModule.forRoot()
    ]
})

export class AppModule {
    constructor(private upgrade: UpgradeModule) {
        console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
        upgrade.bootstrap(document.body, [moduleName], {strictDi: true});
    }

    ngDoBootstrap() {
    }
}

共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [
        BrowserAnimationsModule,
        FlexLayoutModule,
        FormsModule,
        MatToolbarModule,
        MatFormFieldModule,
        MatInputModule,
        MatSelectModule,
        MatButtonModule,
        MatTableModule,
        MatSlideToggleModule,
        ReactiveFormsModule
    ]
})
export class SharedModule { }

用户配置文件模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserProfileComponent } from './user-profile.component';

import { SharedModule } from "../../shared/shared.module";

@NgModule({
    declarations: [
        UserProfileComponent
    ],
    imports: [
        CommonModule,
        SharedModule
    ],
    exports: [
        UserProfileComponent
    ],
    entryComponents: [
        UserProfileComponent
    ]
})
export class UserProfileModule { }

用户配置文件组件

import {Component} from "@angular/core";
import {downgradeComponent} from "@angular/upgrade/static";
import angular from "angular";

@Component({
    selector: "user-profile",
    template: require("./user-profile.html")
})
export class UserProfileComponent {
    constructor() { }
}

angular
    .module('app')
    .directive("userProfile", downgradeComponent({
        component: UserProfileComponent
    }) as angular.IDirectiveFactory);

用户配置文件html

<div fxFill fxLayout="column" [class.mat-elevation-z1]="true">
    <mat-toolbar>
        <div class="profile-header">
            <h4>User Profile</h4>
        </div>
    </mat-toolbar>
    <form fxLayout="column">
        <mat-form-field>
            <input matInput placeholder="First Name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Last Name">
        </mat-form-field>
        <mat-form-field appearance="legacy">
            <mat-label>Standard form field</mat-label>
            <input matInput placeholder="Placeholder">
            <mat-hint>Hint</mat-hint>
        </mat-form-field>
    </form>
</div>