Fatal编程技术网
  • angular/
  • Angular 未处理的承诺拒绝：模板分析错误：角度4-角度材质

Angular 未处理的承诺拒绝：模板分析错误：角度4-角度材质

angular angular-material

Angular 未处理的承诺拒绝：模板分析错误：角度4-角度材质,angular,angular-material,Angular,Angular Material,试图使用 <mat-form-field></mat-form-field> app.component.html <div class="example-container"> <mat-form-field> <input matInput placeholder="Input"> </mat-form-field> <mat-form-field>

试图使用

 <mat-form-field></mat-form-field>
app.component.html

<div class="example-container">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>
    <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>
    <mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
</div>
我不知道我做错了什么。。请帮我摆脱这个问题。。感谢您的帮助。

从angular material导入所有模块，而不是单个模块，并在
@NgModule

应用程序模块.ts

import { Component } from '@angular/core';
import {
    Router,
    // import as RouterEvent to avoid confusion with the DOM Event
    Event as RouterEvent,
    NavigationStart,
    NavigationEnd,
    NavigationCancel,
    NavigationError
} from '@angular/router';

@Component({
    selector: "krossbox-app",
    templateUrl: "app/app.component.html"
})

export class AppComponent {
    loading: boolean = true;

    constructor(private router: Router) {

        router.events.subscribe((event: RouterEvent) => {
            this.navigationInterceptor(event);
        });
    }


    // Shows and hides the loading spinner during RouterEvent changes
    navigationInterceptor(event: RouterEvent): void {
        if (event instanceof NavigationStart) {
            this.loading = true;
        }
        if (event instanceof NavigationEnd) {
            setTimeout(() => { this.loading = false; }, 1000)
            // this.loading = false;
        }

        // Set loading state to false in both of the below events to hide the spinner in case a request fails
        if (event instanceof NavigationCancel) {
            this.loading = false;
        }
        if (event instanceof NavigationError) {
            this.loading = false;
        }
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { APP_BASE_HREF } from '@angular/common';
import { A11yModule } from '@angular/cdk/a11y';
import { BidiModule } from '@angular/cdk/bidi';
import { ObserversModule } from '@angular/cdk/observers';
import { PlatformModule } from '@angular/cdk/platform';
import { PortalModule } from '@angular/cdk/portal';
import { CdkTableModule } from '@angular/cdk/table';
import { OverlayModule } from '@angular/cdk/overlay';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { LayoutModule } from '@angular/cdk/layout';
import {
    MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule,
    MatChipsModule, MatCommonModule, MatDatepickerModule, MatDialogModule,
    MatExpansionModule, MatFormField, MatFormFieldControl, MatFormFieldModule,
    MatGridListModule, MatIconModule, MatInputModule, MatListModule,
    MatMenuModule, MatNativeDateModule, MatOption, MatPaginatorModule,
    MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule,
    MatSelect, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule,
    MatSnackBarModule, MatSortModule, MatStepperModule, MatTableModule, MatTabsModule,
    MatToolbarModule, MatTooltipModule, MatAutocompleteModule } from '@angular/material';
import { AppRoutingModule } from '../app/app.routing';
import { ComponentsModule } from '../app/component/components.module';
import { AppComponent } from '../app/app.component';
import { HomeComponent } from '../app/component/home.component';
import { DashboardComponent } from '../app/dashboard/dashboard.component';
import { SearchKboxComponent } from '../app/search/searchkbox.component';

@NgModule({
exports: [
        CommonModule,
        RouterModule,
        A11yModule,
        BidiModule,
        ObserversModule,
        PlatformModule,
        PortalModule,
        CdkTableModule,
        OverlayModule,
        ScrollDispatchModule,
        CdkStepperModule,
        LayoutModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule
    ],
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpModule,
        FormsModule,
        BrowserAnimationsModule,
                CommonModule,
        RouterModule,
        A11yModule,
        BidiModule,
        ObserversModule,
        PlatformModule,
        PortalModule,
        CdkTableModule,
        OverlayModule,
        ScrollDispatchModule,
        CdkStepperModule,
        LayoutModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        ComponentsModule,
        RouterModule,
        AppRoutingModule
    ],

    declarations: [AppComponent, HomeComponent, DashboardComponent, SearchKboxComponent],

    bootstrap: [
        AppComponent
    ],
    entryComponents: [
    ],
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})

export class AppModule { }

import { Component } from '@angular/core';
import {
    Router,
    // import as RouterEvent to avoid confusion with the DOM Event
    Event as RouterEvent,
    NavigationStart,
    NavigationEnd,
    NavigationCancel,
    NavigationError
} from '@angular/router';

@Component({
    selector: "krossbox-app",
    templateUrl: "app/app.component.html"
})

export class AppComponent {
    loading: boolean = true;

    constructor(private router: Router) {

        router.events.subscribe((event: RouterEvent) => {
            this.navigationInterceptor(event);
        });
    }


    // Shows and hides the loading spinner during RouterEvent changes
    navigationInterceptor(event: RouterEvent): void {
        if (event instanceof NavigationStart) {
            this.loading = true;
        }
        if (event instanceof NavigationEnd) {
            setTimeout(() => { this.loading = false; }, 1000)
            // this.loading = false;
        }

        // Set loading state to false in both of the below events to hide the spinner in case a request fails
        if (event instanceof NavigationCancel) {
            this.loading = false;
        }
        if (event instanceof NavigationError) {
            this.loading = false;
        }
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { APP_BASE_HREF } from '@angular/common';
import { A11yModule } from '@angular/cdk/a11y';
import { BidiModule } from '@angular/cdk/bidi';
import { ObserversModule } from '@angular/cdk/observers';
import { PlatformModule } from '@angular/cdk/platform';
import { PortalModule } from '@angular/cdk/portal';
import { CdkTableModule } from '@angular/cdk/table';
import { OverlayModule } from '@angular/cdk/overlay';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { LayoutModule } from '@angular/cdk/layout';
import {
    MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule,
    MatChipsModule, MatCommonModule, MatDatepickerModule, MatDialogModule,
    MatExpansionModule, MatFormField, MatFormFieldControl, MatFormFieldModule,
    MatGridListModule, MatIconModule, MatInputModule, MatListModule,
    MatMenuModule, MatNativeDateModule, MatOption, MatPaginatorModule,
    MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule,
    MatSelect, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule,
    MatSnackBarModule, MatSortModule, MatStepperModule, MatTableModule, MatTabsModule,
    MatToolbarModule, MatTooltipModule, MatAutocompleteModule } from '@angular/material';
import { AppRoutingModule } from '../app/app.routing';
import { ComponentsModule } from '../app/component/components.module';
import { AppComponent } from '../app/app.component';
import { HomeComponent } from '../app/component/home.component';
import { DashboardComponent } from '../app/dashboard/dashboard.component';
import { SearchKboxComponent } from '../app/search/searchkbox.component';

@NgModule({
exports: [
        CommonModule,
        RouterModule,
        A11yModule,
        BidiModule,
        ObserversModule,
        PlatformModule,
        PortalModule,
        CdkTableModule,
        OverlayModule,
        ScrollDispatchModule,
        CdkStepperModule,
        LayoutModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule
    ],
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpModule,
        FormsModule,
        BrowserAnimationsModule,
                CommonModule,
        RouterModule,
        A11yModule,
        BidiModule,
        ObserversModule,
        PlatformModule,
        PortalModule,
        CdkTableModule,
        OverlayModule,
        ScrollDispatchModule,
        CdkStepperModule,
        LayoutModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        ComponentsModule,
        RouterModule,
        AppRoutingModule
    ],

    declarations: [AppComponent, HomeComponent, DashboardComponent, SearchKboxComponent],

    bootstrap: [
        AppComponent
    ],
    entryComponents: [
    ],
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})

export class AppModule { }