【发布时间】：2017-10-19 23:07:48
【问题描述】：
尝试使用
<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;
}
}
}
我不知道我在这里做错了什么..请帮助我摆脱这个问题..感谢您的帮助..
【问题讨论】：