Angular Mat-Form导致网页崩溃无错误代码

Question

我正在构建一个 Angular 应用程序，在我添加 mat--form-field 来构建一个多选项下拉列表之前它一直运行良好。出于某种原因，只要将 mat-form-field 块添加到代码中，网页就会崩溃。我尝试注释掉代码的各个部分，发现错误似乎是 mat-form-field，但是我的编译器没有向我发出任何错误。

选择-page.component.html

<div class=" content">
    <div class=" row">
        <div class=" col-md-12">
            <div class=" card">
              <div class=" card-body">
                <div class=" places-buttons">
                  <div class=" row">
                    <div class=" col-md-6">
                      <h2 class=" card-title">Ingest RDBMS</h2>
                    </div>
                  </div>
                  <div class=" row">
                    <div class=" col-md-12 ml-auto mr-auto text-center">
                      <div class=" row d-flex justify-content-center">
                        
                        <div class=" col-sm-1 col-2">
                            <span style="font-size: 250%;" class="text-light"><i class="fas fa-check-circle"></i></span>
                            <p style="font-size: 10px;">Source data</p>
                        </div>
                        <div class=" col-sm-1 col-1">
                            <span class="text-primary" style="font-size: 150%;"><i class="fas fa-arrow-right"></i></span>
                        </div>
                        <div class=" col-sm-1 col-3">
                            <span class="text-light" style="font-size: 250%;"><i class="fas fa-check-circle"></i></span>
                            <p style="font-size: 10px;">Configure Ingestion</p>
                        </div>
                        <div class=" col-sm-1 col-1">
                            <span class="text-primary" style="font-size: 150%;"><i class="fas fa-arrow-right"></i></span>
                        </div>
                        <div class=" col-sm-1 col-2">
                            <span  class="text-light" style="font-size: 250%;"><i class="fas fa-check-circle"></i></span>
                            <p style="font-size: 10px;">Filter Table</p>
                        </div>
                        <div class=" col-sm-1 col-1">
                            <span  class="text-primary" style="font-size: 150%;"><i class="fas fa-arrow-right"></i></span>
                        </div>
                        <div class=" col-sm-1 col-2">
                            <span  class="text-primary" style="font-size: 250%;">④</span>
                            <p style="font-size: 10px;">Queuing Table</p>
                        </div>
                        <div class=" col-sm-1 col-1">
                            <span class="text-primary" style="font-size: 150%;"><i class="fas fa-arrow-right"></i></span>
                        </div>
                        <div class=" col-sm-1 col-2">
                            <span  class="text-light" style="font-size: 250%;">⑤</span>
                            <p style="font-size: 10px;">Configuration Details</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <br>
                  <br>
                  
                </div>
              </div>
            </div>
          </div>
          <div class=" col-lg-12 ml-auto mr-auto">
            <div class=" card">
          <div class=" card-header">
          </div>
          <div class=" card-body">
            <div class="row">
              <div class="col-md-6">
                <form class="form-inline ml-auto">
                  <div class="form-group no-border">
                      <div class="input-group-prepend">
                        <div> <!--Selection Page Module-->
                            <div class="row">
                                <div class="col" id="border"> <!--Database-->
                                <div>
                                    <h4>Database Selection</h4>
                                    <mat-form-field appearance="fill">
                                    <mat-label>Database</mat-label>
                                    <mat-select [formControl]="databaseControl" multiple>
                                        <mat-option>-- None --</mat-option>
                                        <mat-optgroup *ngFor="let group of databaseGroups" [label]="group.name"
                                                    [disabled]="group.disabled">
                                        <mat-option *ngFor="let database of group.database" [value]="database.value">
                                            {{database.viewValue}}
                                        </mat-option>
                                        </mat-optgroup>
                                    </mat-select>
                                    <mat-hint></mat-hint>
                                    </mat-form-field>
                                </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col" id="border"> <!--Table-->
                                <h4>Table Selection</h4>
                            <mat-form-field appearance="fill">
                            <mat-label>Table</mat-label>
                            <mat-select [formControl]="tableControl" multiple>
                                <mat-option>-- None --</mat-option>
                                <mat-optgroup *ngFor="let group of tableGroups" [label]="group.name"
                                            [disabled]="group.disabled">
                                <mat-option *ngFor="let table of group.table" [value]="table.value">
                                    {{table.viewValue}}
                                </mat-option>
                                </mat-optgroup>
                            </mat-select>
                            </mat-form-field>
                                </div>
                                <div class="col" id="border"> <!--Column-->
                                <h4>Column Selection</h4>
                            <mat-form-field appearance="fill">
                            <mat-label>Column</mat-label>
                            <mat-select [formControl]="columnControl" multiple>
                                <mat-option>-- None --</mat-option>
                                <mat-optgroup *ngFor="let group of columnGroups" [label]="group.name"
                                            [disabled]="group.disabled">
                                <mat-option *ngFor="let column of group.column" [value]="column.value">
                                    {{column.viewValue}}
                                </mat-option>
                                </mat-optgroup>
                            </mat-select>
                            </mat-form-field>
                                </div>
                            </div>
                        </div>
                      </div>
                    </div>      
                </form>     
              </div>
            </div>
            <br><br>
          </div>
            <div class=" card-footer">
              <div class="row">
                <div class="col-md-6 col-sm-6 col-6 ">
                  <button class="btn btn-default mr-2" routerLink="/home">Cancel</button>
                  <button class="btn btn-success"><i class="fas fa-file"></i>  Save as Draft</button>
                </div>
                <div class="col-md-6 col-sm-6 col-6 d-flex justify-content-end">
                  <button class="btn btn-primary" routerLink="/ingestions/rdbms/filterTable">Previous</button>

                  <button class="btn btn-primary" routerLink="/ingestions/streamdata/configureIngestion">Next</button>
                </div>
              </div>
            </div>
      </div>
    </div>
  </div>

app.module.ts

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { RouterModule } from "@angular/router";
import { ToastrModule } from 'ngx-toastr';

import { AppComponent } from "./app.component";
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';

import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

import { AppRoutingModule } from "./app-routing.module";
import { ComponentsModule } from "./components/components.module";
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatCardModule } from '@angular/material/card';
import { SelectionPageComponent } from './pages/ingestions/rdbms/pages/selection-page/selection-page.component';

import {MatNativeDateModule} from '@angular/material/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {DemoMaterialModule} from './material-module';
import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';


@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ComponentsModule,
    NgbModule,
    RouterModule,
    AppRoutingModule,
    ToastrModule.forRoot(),
    MatNativeDateModule,
    BrowserModule,
    DemoMaterialModule,



  ],
  exports: [
    DragDropModule,
    MatCardModule
  ],

  declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, SelectionPageComponent],
  bootstrap: [AppComponent],
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },
  
  ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

选择-page.component.ts

import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';

interface Database {
  value: string;
  viewValue: string;
}

interface DatabaseGroup {
  disabled?: boolean;
  name: string;
  database: Database[];
}

interface Table {
  value: string;
  viewValue: string;
}

interface TableGroup {
  disabled?: boolean;
  name: string;
  table: Table[];
}

interface Column {
  value: string;
  viewValue: string;
}

interface ColumnGroup {
  disabled?: boolean;
  name: string;
  column: Column[];
}

interface BranchDatabase {
  value: string;
  viewValue: string;
}

interface BranchDatabaseGroup {
  disabled?: boolean;
  name: string;
  branchDatabase: BranchDatabase[];
}

@Component({
  selector: 'app-selection-page',
  templateUrl: './selection-page.component.html',
  styleUrls: ['./selection-page.component.scss']
})
export class SelectionPageComponent implements OnInit {

  databaseControl = new FormControl();
  databaseGroups: DatabaseGroup[] = [
    {
      name: 'List 1',
      database: [
        {value: 'database-1', viewValue: 'Database-1'},
        {value: 'database-2', viewValue: 'Database-2'},
        {value: 'database-3', viewValue: 'Database-3'}
      ]
    },
    {
      name: 'List 2',
      database: [
        {value: 'database-1', viewValue: 'Database-1'},
        {value: 'database-2', viewValue: 'Database-2'},
        {value: 'database-3', viewValue: 'Database-3'}
      ]
    }
  ]
  tableControl = new FormControl();
  tableGroups: TableGroup[] = [
    {
      name: 'List 1',
      table: [
        {value: 'table-1', viewValue: 'Table-1'},
        {value: 'table-2', viewValue: 'Table-2'},
        {value: 'table-3', viewValue: 'Table-3'}
      ]
    },
    {
      name: 'List 2',
      table: [
        {value: 'table-1', viewValue: 'Table-1'},
        {value: 'table-2', viewValue: 'Table-2'},
        {value: 'table-3', viewValue: 'Table-3'}
      ]
    }
  ]
  columnControl = new FormControl();
  columnGroups: ColumnGroup[] = [
    {
      name: 'List 1',
      column: [
        {value: 'column-1', viewValue: 'Column-1'},
        {value: 'column-1', viewValue: 'Column-2'},
        {value: 'column-1', viewValue: 'Column-3'}
      ]
    },
    {
      name: 'List 2',
      column: [
        {value: 'column-1', viewValue: 'Column-1'},
        {value: 'column-2', viewValue: 'Column-2'},
        {value: 'column-3', viewValue: 'Column-3'}
      ]
    }
  ]
  branchDatabaseControl = new FormControl();
  branchDatabaseGroups: BranchDatabaseGroup[] = [
    {
      name: 'List 1',
      branchDatabase: [
        {value: 'column-1', viewValue: 'Column-1'},
        {value: 'column-1', viewValue: 'Column-2'},
        {value: 'column-1', viewValue: 'Column-3'}
      ]
    },
    {
      name: 'List 2',
      branchDatabase: [
        {value: 'column-1', viewValue: 'Column-1'},
        {value: 'column-2', viewValue: 'Column-2'},
        {value: 'column-3', viewValue: 'Column-3'}
      ]
    }
  ]

  constructor() { }

  ngOnInit(): void {  }

}

DevTools 源错误

core.js:14644 NG0304: '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.
logUnknownElementError @ core.js:14644
elementStartFirstCreatePass @ core.js:14495
ɵɵelementStart @ core.js:14531
ConfigurerdbmsComponent_Template @ template.html:88
executeTemplate @ core.js:9310
renderView @ core.js:9117
renderComponent @ core.js:10392
renderChildComponents @ core.js:8982
renderView @ core.js:9142
create @ core.js:24837
createComponent @ core.js:22876
activateWith @ router_outlet.ts:165
activateRoutes @ activate_routes.ts:187
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activateRoutes @ activate_routes.ts:157
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activateRoutes @ activate_routes.ts:154
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activate @ activate_routes.ts:42
(anonymous) @ activate_routes.ts:27
_next @ map.ts:84
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_complete @ takeLast.ts:108
complete @ Subscriber.ts:126
_complete @ tap.ts:145
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ takeLast.ts:68
subscribe @ Observable.ts:214
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ switchMap.ts:99
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
_next @ filter.ts:101
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_complete @ defaultIfEmpty.ts:80
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ filter.ts:71
subscribe @ Observable.ts:214
call @ take.ts:72
subscribe @ Observable.ts:214
call @ defaultIfEmpty.ts:57
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_complete @ defaultIfEmpty.ts:80
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ filter.ts:71
subscribe @ Observable.ts:214
call @ take.ts:72
subscribe @ Observable.ts:214
call @ defaultIfEmpty.ts:57
subscribe @ Observable.ts:214
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
Show 170 more frames
core.js:14644 NG0304: '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.
logUnknownElementError @ core.js:14644
elementStartFirstCreatePass @ core.js:14495
ɵɵelementStart @ core.js:14531
ConfigurerdbmsComponent_Template @ template.html:89
executeTemplate @ core.js:9310
renderView @ core.js:9117
renderComponent @ core.js:10392
renderChildComponents @ core.js:8982
renderView @ core.js:9142
create @ core.js:24837
createComponent @ core.js:22876
activateWith @ router_outlet.ts:165
activateRoutes @ activate_routes.ts:187
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activateRoutes @ activate_routes.ts:157
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activateRoutes @ activate_routes.ts:154
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activate @ activate_routes.ts:42
(anonymous) @ activate_routes.ts:27
_next @ map.ts:84
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_complete @ takeLast.ts:108
complete @ Subscriber.ts:126
_complete @ tap.ts:145
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ takeLast.ts:68
subscribe @ Observable.ts:214
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ switchMap.ts:99
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
_next @ filter.ts:101
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_complete @ defaultIfEmpty.ts:80
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ filter.ts:71
subscribe @ Observable.ts:214
call @ take.ts:72
subscribe @ Observable.ts:214
call @ defaultIfEmpty.ts:57
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_complete @ defaultIfEmpty.ts:80
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ filter.ts:71
subscribe @ Observable.ts:214
call @ take.ts:72
subscribe @ Observable.ts:214
call @ defaultIfEmpty.ts:57
subscribe @ Observable.ts:214
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
Show 170 more frames
core.js:5967 ERROR Error: Uncaught (in promise): Error: NG0201: No provider for NgControl found in NodeInjector
Error: NG0201: No provider for NgControl found in NodeInjector
    at throwProviderNotFoundError (core.js:1369)
    at notFoundValueOrThrow (core.js:3271)
    at lookupTokenUsingModuleInjector (core.js:3306)
    at getOrCreateInjectable (core.js:3408)
    at Module.ɵɵdirectiveInject (core.js:14415)
    at NodeInjectorFactory.NgControlStatus_Factory [as factory] (ng_control_status.ts:78)
    at getNodeInjectable (core.js:3503)
    at instantiateAllDirectives (core.js:9988)
    at createDirectivesInstances (core.js:9337)
    at ɵɵelementStart (core.js:14559)
    at resolvePromise (zone.js:1250)
    at resolvePromise (zone.js:1204)
    at zone.js:1316
    at ZoneDelegate.invokeTask (zone.js:429)
    at Object.onInvokeTask (core.js:28269)
    at ZoneDelegate.invokeTask (zone.js:428)
    at Zone.runTask (zone.js:200)
    at drainMicroTaskQueue (zone.js:615)
    at ZoneTask.invokeTask [as invoke] (zone.js:515)
    at invokeTask (zone.js:1651)
defaultErrorLogger @ core.js:5967
handleError @ core.js:6015
next @ core.js:28881
schedulerFn @ core.js:25646
__tryOrUnsub @ Subscriber.ts:265
next @ Subscriber.ts:207
_next @ Subscriber.ts:139
next @ Subscriber.ts:99
next @ Subject.ts:70
emit @ core.js:25636
(anonymous) @ core.js:28304
ZoneDelegate.invoke @ zone.js:395
Zone.run @ zone.js:155
runOutsideAngular @ core.js:28209
onHandleError @ core.js:28304
ZoneDelegate.handleError @ zone.js:399
Zone.runGuarded @ zone.js:169
_loop_2 @ zone.js:1108
api.microtaskDrainDone @ zone.js:1120
drainMicroTaskQueue @ zone.js:622
ZoneTask.invokeTask @ zone.js:515
invokeTask @ zone.js:1651
globalZoneAwareCallback @ zone.js:1677

Answer 1

app.module.ts

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { RouterModule } from "@angular/router";
import { ToastrModule } from 'ngx-toastr';

import { AppComponent } from "./app.component";
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';

import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

import { AppRoutingModule } from "./app-routing.module";
import { ComponentsModule } from "./components/components.module";
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatCardModule } from '@angular/material/card';
import { SelectionPageComponent } from './pages/ingestions/rdbms/pages/selection-page/selection-page.component';

import {MatNativeDateModule} from '@angular/material/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {DemoMaterialModule} from './material-module';
import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';


import {MatSelectModule} from '@angular/material/select';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ComponentsModule,
    NgbModule,
    RouterModule,
    AppRoutingModule,
    ToastrModule.forRoot(),
    MatNativeDateModule,
    BrowserModule,
    DemoMaterialModule,
    MatSelectModule


  ],
  exports: [
    DragDropModule,
    MatCardModule
  ],

  declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, SelectionPageComponent],
  bootstrap: [AppComponent],
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },
  
  ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));



import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';

选择-page.ts

@Component({
  selector: 'app-selection-page',
  templateUrl: './selection-page.component.html',
  styleUrls: ['./selection-page.component.scss']
})
export class SelectionPageComponent implements OnInit {

   databaseControl= new FormControl();
  constructor() { }

  ngOnInit(): void {  }

}

Answer 2

您需要将 mat-select 和 mat-form-field 模块导入您的 app.module.ts:

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';

您还绑定到表单控件（[formControl]="columnControl" 和 [formControl]="databaseControl"），但您的组件中没有表单控件。

您需要在 selection-page.ts:

中创建表单控件

databaseControl = new FormControl();
columnControl = new FormControl();

更新

我相信您也需要导入响应式表单模块：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

我成功地使用以下 app.module.ts 文件成功复制了您的页面，没有出现任何错误。我把 selection-page.ts 和 selection-page.html 和你留的一模一样。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatCardModule} from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    MatFormFieldModule,
    MatSelectModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Working screenshot

如果还是不行，我相信不是 mat-form-field 元素导致你的页面崩溃，也可能是其他原因。

Angular Mat-Form导致网页崩溃无错误代码

Angular Mat-Form Causing Web Page to Crash Without Error Code

node.js

typescript

ngfor

angular

mat-form-field