文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Webpack编译成功，但项目没有在浏览器中加载

问Webpack编译成功，但项目没有在浏览器中加载
EN

Stack Overflow用户
提问于 2018-01-13 06:27:54
回答 1查看 2K关注 0票数 0

我正在尝试构建一个用Angular.Whenever制作的项目，我正在用ng serve -o构建它。它编译成功，没有显示错误，但在浏览器中没有加载。浏览器控制台中的错误是：

代码语言：javascript
复制
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.The项目中加载但没有响应，

控制台的输出是：

代码语言：javascript
复制
    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搜索的项目，locally.Here是指向项目吉特布洛克拉克库房的链接。

javascript
node.js
angular
google-chrome
npm
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-13 07:09:08

我认为你在使用“mat-”前缀时有冲突的问题。或者，可能是一些外部包将其作为前缀，从而造成冲突。

添加以下导入:-表示“md-”前缀：

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

“垫子-”前缀：

代码语言：javascript
复制
import {NoConflictStyleCompatibilityMode} from '@angular/material';

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

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

干杯！

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/48237472

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档