未处理的Promise拒绝：模板解析错误：Angular 4 - Angular Material

时间：2017-10-19 13:00:57

标签： angular angular-material

尝试使用

 <mat-form-field></mat-form-field>

来自我的应用程序中的角度材料。但不幸的是我得到了错误

VM347:27 Unhandled Promise rejection: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFormField ("<div class="example-container">
    [ERROR ->]<mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>
"): ng:///app/app.component.html@1:4
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFormField ("
        <input matInput placeholder="Input">
    </mat-form-field>
    [ERROR ->]<mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field"): ng:///app/app.component.html@4:4
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatOption,MatOption ("
    <mat-form-field>
        <mat-select placeholder="Select">
            [ERROR ->]<mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
"): ng:///app/app.component.html@9:12
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFormField ("
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>
    [ERROR ->]<mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">O"): ng:///app/app.component.html@7:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFormField ("<div class="example-container">
    [ERROR ->]<mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>
"): ng:///app/app.component.html@1:4
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFormField ("
        <input matInput placeholder="Input">
    </mat-form-field>
    [ERROR ->]<mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field"): ng:///app/app.component.html@4:4
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatOption,MatOption ("
    <mat-form-field>
        <mat-select placeholder="Select">
            [ERROR ->]<mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
"): ng:///app/app.component.html@9:12
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFormField ("
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>
    [ERROR ->]<mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">O"): ng:///app/app.component.html@7:4
    at syntaxError (compiler.es5.js:1695)
    at TemplateParser.parse (compiler.es5.js:12813)
    at JitCompiler._compileTemplate (compiler.es5.js:26967)
    at eval (compiler.es5.js:26883)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.es5.js:26883)
    at eval (compiler.es5.js:26772)
    at ZoneDelegate.invoke (zone.js:391)
    at Zone.run (zone.js:141)
    at zone.js:831 Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFormField ("<div class="example-container">
    [ERROR ->]<mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>
"): ng:///app/app.component.html@1:4
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFormField ("
        <input matInput placeholder="Input">
    </mat-form-field>
    [ERROR ->]<mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field"): ng:///app/app.component.html@4:4
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatOption,MatOption ("
    <mat-form-field>
        <mat-select placeholder="Select">
            [ERROR ->]<mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
"): ng:///app/app.component.html@9:12
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFormField ("
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>
    [ERROR ->]<mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">O"): ng:///app/app.component.html@7:4
    at syntaxError (http://localhost:60205/node_modules/@angular/compiler/bundles/compiler.umd.js:1725:34)
    at TemplateParser.parse (http://localhost:60205/node_modules/@angular/compiler/bundles/compiler.umd.js:12845:19)
    at JitCompiler._compileTemplate (http://localhost:60205/node_modules/@angular/compiler/bundles/compiler.umd.js:26997:39)
    at eval (http://localhost:60205/node_modules/@angular/compiler/bundles/compiler.umd.js:26917:62)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (http://localhost:60205/node_modules/@angular/compiler/bundles/compiler.umd.js:26917:19)
    at eval (http://localhost:60205/node_modules/@angular/compiler/bundles/compiler.umd.js:26804:19)
    at ZoneDelegate.invoke (http://localhost:60205/node_modules/zone.js/dist/zone.js:391:26)
    at Zone.run (http://localhost:60205/node_modules/zone.js/dist/zone.js:141:43)
    at http://localhost:60205/node_modules/zone.js/dist/zone.js:831:57

我的app.module.ts文件： 

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 { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatCommonModule, MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSliderModule } from '@angular/material/slider';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
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({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpModule,
        FormsModule,
        BrowserAnimationsModule,
        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 { }

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>

app.component.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;
        }
    }
}

我不知道我在这里做错了什么..请帮助我摆脱这个问题..感谢你的帮助......

1 个答案:

答案 0 :(得分：0)

从角度材料而不是单个材质导入所有模块，并导出@NgModule

中的材质模块

<强> app.module.ts 

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 { }
相关问题
最新问题