Question

我正在尝试使用Angular构建一个项目。每当我构建它时使用ng serve -o。它编译成功显示没有错误，但浏览器中没有任何加载。浏览器控制台出错：

ERROR Error: Uncaught (in promise): Error: The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "button" element.
Error: The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "button" element.
    at getMdCompatibilityInvalidPrefixError (webpack-internal:///../../../material/esm5/core.es5.js:240)
    at new MatPrefixRejector (webpack-internal:///../../../material/esm5/core.es5.js:261)
    at createClass (webpack-internal:///../../../core/@angular/core.es5.js:11127)
    at createDirectiveInstance (webpack-internal:///../../../core/@angular/core.es5.js:10955)
    at createViewNodes (webpack-internal:///../../../core/@angular/core.es5.js:12391)
    at callViewAction (webpack-internal:///../../../core/@angular/core.es5.js:12837)
    at execComponentViewsAction (webpack-internal:///../../../core/@angular/core.es5.js:12746)
    at createViewNodes (webpack-internal:///../../../core/@angular/core.es5.js:12418)
    at callViewAction (webpack-internal:///../../../core/@angular/core.es5.js:12837)
    at execComponentViewsAction (webpack-internal:///../../../core/@angular/core.es5.js:12746)
    at getMdCompatibilityInvalidPrefixError (webpack-internal:///../../../material/esm5/core.es5.js:240)
    at new MatPrefixRejector (webpack-internal:///../../../material/esm5/core.es5.js:261)
    at createClass (webpack-internal:///../../../core/@angular/core.es5.js:11127)
    at createDirectiveInstance (webpack-internal:///../../../core/@angular/core.es5.js:10955)
    at createViewNodes (webpack-internal:///../../../core/@angular/core.es5.js:12391)
    at callViewAction (webpack-internal:///../../../core/@angular/core.es5.js:12837)
    at execComponentViewsAction (webpack-internal:///../../../core/@angular/core.es5.js:12746)
    at createViewNodes (webpack-internal:///../../../core/@angular/core.es5.js:12418)
    at callViewAction (webpack-internal:///../../../core/@angular/core.es5.js:12837)
    at execComponentViewsAction (webpack-internal:///../../../core/@angular/core.es5.js:12746)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:824)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:795)
    at eval (webpack-internal:///../../../../zone.js/dist/zone.js:873)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425)
    at Object.onInvokeTask (webpack-internal:///../../../core/@angular/core.es5.js:4085)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:192)
    at drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:602)
    at <anonymous>
defaultErrorLogger @ webpack-internal:///../../../core/@angular/core.es5.js:1224

使用import { CompatibilityModule } from '@angular/material';后和 import {NoConflictStyleCompatibilityMode} from '@angular/material';
在app.module.ts中。项目加载但没有响应，控制台输出为：

    Angular is running in the development mode. Call enableProdMode() to enable the production mode.
webpack-internal:///../../../core/@angular/core.es5.js:1224 ERROR Error: Template parse errors:
There is no directive with "exportAs" set to "matAutocomplete" ("er)="[relocateEvent.emit(query), closeSuggestBox()]" [(ngModel)]="query"/>

                        <mat-autocomplete [ERROR ->]#searchSuggestBox="matAutocomplete">
                            <mat-option *ngFor="let suggestion of suggestionList.slic"): ng:///FeedModule/FeedHeaderComponent.html@15:24
    at syntaxError (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1918)
    at TemplateParser.parse (webpack-internal:///../../../compiler/@angular/compiler.es5.js:13038)
    at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27190)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26997)
    at Object.then (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1907)
    at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26996)
    at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26925)
defaultErrorLogger @ webpack-internal:///../../../core/@angular/core.es5.js:1224
ErrorHandler.handleError @ webpack-internal:///../../../core/@angular/core.es5.js:1284
next @ webpack-internal:///../../../core/@angular/core.es5.js:4707
schedulerFn @ webpack-internal:///../../../core/@angular/core.es5.js:3839
SafeSubscriber.__tryOrUnsub @ webpack-internal:///../../../../rxjs/Subscriber.js:238
SafeSubscriber.next @ webpack-internal:///../../../../rxjs/Subscriber.js:185
Subscriber._next @ webpack-internal:///../../../../rxjs/Subscriber.js:125
Subscriber.next @ webpack-internal:///../../../../rxjs/Subscriber.js:89
Subject.next @ webpack-internal:///../../../../rxjs/Subject.js:55
EventEmitter.emit @ webpack-internal:///../../../core/@angular/core.es5.js:3825
(anonymous) @ webpack-internal:///../../../core/@angular/core.es5.js:4116
ZoneDelegate.invoke @ webpack-internal:///../../../../zone.js/dist/zone.js:392
Zone.run @ webpack-internal:///../../../../zone.js/dist/zone.js:142
NgZone.runOutsideAngular @ webpack-internal:///../../../core/@angular/core.es5.js:4048
onHandleError @ webpack-internal:///../../../core/@angular/core.es5.js:4116
ZoneDelegate.handleError @ webpack-internal:///../../../../zone.js/dist/zone.js:396
Zone.runTask @ webpack-internal:///../../../../zone.js/dist/zone.js:195
ZoneTask.invokeTask @ webpack-internal:///../../../../zone.js/dist/zone.js:499
ZoneTask.invoke @ webpack-internal:///../../../../zone.js/dist/zone.js:488
timer @ webpack-internal:///../../../../zone.js/dist/zone.js:2040
15webpack-internal:///../../../core/@angular/core.es5.js:1224 ERROR Error: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "matAutocomplete" ("er)="[relocateEvent.emit(query), closeSuggestBox()]" [(ngModel)]="query"/>

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
webpack-internal:///../../../core/@angular/core.es5.js:1224 ERROR Error: Template parse errors:
There is no directive with "exportAs" set to "matAutocomplete" ("er)="[relocateEvent.emit(query), closeSuggestBox()]" [(ngModel)]="query"/>
<mat-autocomplete [ERROR ->]#searchSuggestBox="matAutocomplete">
                            <mat-option *ngFor="let suggestion of suggestionList.slic"): ng:///FeedModule/FeedHeaderComponent.html@15:24
    at syntaxError (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1918)
    at TemplateParser.parse (webpack-internal:///../../../compiler/@angular/compiler.es5.js:13038)
    at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27190)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26997)
    at Object.then (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1907)
    at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26996)
    at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26925)
defaultErrorLogger @ webpack-internal:///../../../core/@angular/core.es5.js:1224
ErrorHandler.handleError @ webpack-internal:///../../../core/@angular/core.es5.js:1284
next @ webpack-internal:///../../../core/@angular/core.es5.js:4707
schedulerFn @ webpack-internal:///../../../core/@angular/core.es5.js:3839
SafeSubscriber.__tryOrUnsub @ webpack-internal:///../../../../rxjs/Subscriber.js:238
SafeSubscriber.next @ webpack-internal:///../../../../rxjs/Subscriber.js:185
Subscriber._next @ webpack-internal:///../../../../rxjs/Subscriber.js:125
Subscriber.next @ webpack-internal:///../../../../rxjs/Subscriber.js:89
Subject.next @ webpack-internal:///../../../../rxjs/Subject.js:55
EventEmitter.emit @ webpack-internal:///../../../core/@angular/core.es5.js:3825
(anonymous) @ webpack-internal:///../../../core/@angular/core.es5.js:4116
ZoneDelegate.invoke @ webpack-internal:///../../../../zone.js/dist/zone.js:392
Zone.run @ webpack-internal:///../../../../zone.js/dist/zone.js:142
NgZone.runOutsideAngular @ webpack-internal:///../../../core/@angular/core.es5.js:4048
onHandleError @ webpack-internal:///../../../core/@angular/core.es5.js:4116
ZoneDelegate.handleError @ webpack-internal:///../../../../zone.js/dist/zone.js:396
Zone.runTask @ webpack-internal:///../../../../zone.js/dist/zone.js:195
ZoneTask.invokeTask @ webpack-internal:///../../../../zone.js/dist/zone.js:499
ZoneTask.invoke @ webpack-internal:///../../../../zone.js/dist/zone.js:488
timer @ webpack-internal:///../../../../zone.js/dist/zone.js:2040
15webpack-internal:///../../../core/@angular/core.es5.js:1224 ERROR Error: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "matAutocomplete" ("er)="[relocateEvent.emit(query), closeSuggestBox()]" [(ngModel)]="query"/>

                        <mat-autocomplete [ERROR ->]#searchSuggestBox="matAutocomplete">
                            <mat-option *ngFor="let suggestion of suggestionList.slic"): ng:///FeedModule/FeedHeaderComponent.html@15:24
Error: Template parse errors:
There is no directive with "exportAs" set to "matAutocomplete" ("er)="[relocateEvent.emit(query), closeSuggestBox()]" [(ngModel)]="query"/>

                        <mat-autocomplete [ERROR ->]#searchSuggestBox="matAutocomplete">
                            <mat-option *ngFor="let suggestion of suggestionList.slic"): ng:///FeedModule/FeedHeaderComponent.html@15:24
    at syntaxError (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1918)
    at TemplateParser.parse (webpack-internal:///../../../compiler/@angular/compiler.es5.js:13038)
    at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27190)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26997)
    at Object.then (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1907)
    at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26996)
    at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26925)
    at syntaxError (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1918)
    at TemplateParser.parse (webpack-internal:///../../../compiler/@angular/compiler.es5.js:13038)
    at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27190)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26997)
    at Object.then (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1907)
    at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26996)
    at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26925)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:824)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:795)
    at eval (webpack-internal:///../../../../zone.js/dist/zone.js:873)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425)
    at Object.onInvokeTask (webpack-internal:///../../../core/@angular/core.es5.js:4085)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:192)
    at drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:602)
    at ZoneTask.invokeTask [as invoke] (webpack-internal:///../../../../zone.js/dist/zone.js:503)
    at invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:1540)
defaultErrorLogger @ webpack-internal:///../../../core/@angular/core.es5.js:1224
search.json Failed to load resource: the server responded with a status of 502 (Bad Gateway)
search.service.ts:55 200 - Ok
                        <mat-autocomplete [ERROR ->]#searchSuggestBox="matAutocomplete">
                            <mat-option *ngFor="let suggestion of suggestionList.slic"): ng:///FeedModule/FeedHeaderComponent.html@15:24
    at syntaxError (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1918)
    at TemplateParser.parse (webpack-internal:///../../../compiler/@angular/compiler.es5.js:13038)
    at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27190)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26997)
    at Object.then (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1907)
    at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26996)
    at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26925)
defaultErrorLogger @ webpack-internal:///../../../core/@angular/core.es5.js:1224
ErrorHandler.handleError @ webpack-internal:///../../../core/@angular/core.es5.js:1284
next @ webpack-internal:///../../../core/@angular/core.es5.js:4707
schedulerFn @ webpack-internal:///../../../core/@angular/core.es5.js:3839
SafeSubscriber.__tryOrUnsub @ webpack-internal:///../../../../rxjs/Subscriber.js:238
SafeSubscriber.next @ webpack-internal:///../../../../rxjs/Subscriber.js:185
Subscriber._next @ webpack-internal:///../../../../rxjs/Subscriber.js:125
Subscriber.next @ webpack-internal:///../../../../rxjs/Subscriber.js:89
Subject.next @ webpack-internal:///../../../../rxjs/Subject.js:55
EventEmitter.emit @ webpack-internal:///../../../core/@angular/core.es5.js:3825
(anonymous) @ webpack-internal:///../../../core/@angular/core.es5.js:4116
ZoneDelegate.invoke @ webpack-internal:///../../../../zone.js/dist/zone.js:392
Zone.run @ webpack-internal:///../../../../zone.js/dist/zone.js:142
NgZone.runOutsideAngular @ webpack-internal:///../../../core/@angular/core.es5.js:4048
onHandleError @ webpack-internal:///../../../core/@angular/core.es5.js:4116
ZoneDelegate.handleError @ webpack-internal:///../../../../zone.js/dist/zone.js:396
Zone.runTask @ webpack-internal:///../../../../zone.js/dist/zone.js:195
ZoneTask.invokeTask @ webpack-internal:///../../../../zone.js/dist/zone.js:499
ZoneTask.invoke @ webpack-internal:///../../../../zone.js/dist/zone.js:488
timer @ webpack-internal:///../../../../zone.js/dist/zone.js:2040
15webpack-internal:///../../../core/@angular/core.es5.js:1224 ERROR Error: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "matAutocomplete" ("er)="[relocateEvent.emit(query), closeSuggestBox()]" [(ngModel)]="query"/>

                        <mat-autocomplete [ERROR ->]#searchSuggestBox="matAutocomplete">
                            <mat-option *ngFor="let suggestion of suggestionList.slic"): ng:///FeedModule/FeedHeaderComponent.html@15:24
Error: Template parse errors:
There is no directive with "exportAs" set to "matAutocomplete" ("er)="[relocateEvent.emit(query), closeSuggestBox()]" [(ngModel)]="query"/>

                        <mat-autocomplete [ERROR ->]#searchSuggestBox="matAutocomplete">
                            <mat-option *ngFor="let suggestion of suggestionList.slic"): ng:///FeedModule/FeedHeaderComponent.html@15:24
    at syntaxError (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1918)
    at TemplateParser.parse (webpack-internal:///../../../compiler/@angular/compiler.es5.js:13038)
    at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27190)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26997)
    at Object.then (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1907)
    at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26996)
    at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26925)
    at syntaxError (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1918)
    at TemplateParser.parse (webpack-internal:///../../../compiler/@angular/compiler.es5.js:13038)
    at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27190)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:27110)
    at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26997)
    at Object.then (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1907)
    at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26996)
    at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/@angular/compiler.es5.js:26925)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:824)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:795)
    at eval (webpack-internal:///../../../../zone.js/dist/zone.js:873)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425)
    at Object.onInvokeTask (webpack-internal:///../../../core/@angular/core.es5.js:4085)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:192)
    at drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:602)
    at ZoneTask.invokeTask [as invoke] (webpack-internal:///../../../../zone.js/dist/zone.js:503)
    at invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:1540)
defaultErrorLogger @ webpack-internal:///../../../core/@angular/core.es5.js:1224
search.json Failed to load resource: the server responded with a status of 502 (Bad Gateway)
search.service.ts:55 200 - Ok

我正在尝试在本地运行loklak搜索项目。这是项目的链接Loklak Repository on Github

Answer 1

我认为您在使用'mat-'前缀时遇到冲突问题。或者，也许，某些外部软件包将其作为创建冲突的前缀。

添加以下导入： - 'md-'前缀：

import { CompatibilityModule } from '@angular/material';

代表'mat-'前缀：

import {NoConflictStyleCompatibilityMode} from '@angular/material';

看看这个链，它会解决你的问题。

https://github.com/Teradata/covalent/issues/923

欢呼!!!!

Webpack编译成功但项目未在浏览器中加载

1 个答案: