温馨提示:本文翻译自stackoverflow.com，查看原文请点击：c# - "Selector did not match" error on prod mode angular embedded in a ASP .NET MVC project
c# - 在ASP .NET MVC项目中嵌入的生产模式下出现“选择器不匹配”错误
发布于 2020-03-28 23:40:34
我正在ASP.NET MVC项目中开发一个angular 5应用，当我在开发模式下构建项目的两个部分时，一切工作正常。但是，当我在生产模式（ng build --prod）中构建 Angular 时，会出现此错误：
在开发模式下，我将链接添加到.NET布局中的angular main，inline，vendor和polyfills文件。因此，我在生产中进行相同的操作但没有相同的结果：
/Code/Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html lang='es'>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<base href="/">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ASDASD</title>
@Styles.Render("~/Estilos/css")
@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/jquery")
@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/bootstrap")
@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/modernizr")
@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/angular")
@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/analytics")
@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/initialize")
<script type="text/javascript" src="/Js/angular/dist/inline.8ea5f1bd0bc512411c2a.bundle.js"></script>
<script type="text/javascript" src="/Js/angular/dist/polyfills.b882bdb64c2d336705f6.bundle.js"></script>
<script type="text/javascript" src="/Js/angular/dist/main.1147906975e322f405e8.bundle.js"></script>
<!-- Chunks from lazy load modules -->
<script type="text/javascript" src="/Js/angular/dist/0.4a34d7f13a1f23cbe48c.chunk.js"></script>
<script type="text/javascript" src="/Js/angular/dist/1.eeea997b4833bf11675d.chunk.js"></script>
<script type="text/javascript" src="/Js/angular/dist/2.1ca7b0f0109da198eb5f.chunk.js"></script>
<script type="text/javascript" src="/Js/angular/dist/3.62729c4f03dd96a78b1c.chunk.js"></script>
<script type="text/javascript" src="/Js/angular/dist/4.99af34afd2b235e46072.chunk.js"></script>
<script type="text/javascript" src="/Js/angular/dist/5.f45f07697c11110287f4.chunk.js"></script>
<body class="gpr-body">
<div id="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-12 jumbotron">
<img src='/_images/CE_C.jpg' class="ml-3" alt='logo' />
</div>
</div>
@RenderBody()
</div>
<br />
</body>
</html>
.NET文件/Code/Views/Main/Index.cshtml仅包含布局调用和角根选择器<gpr-app></gpr-app>。
Index.html生成/Js/angular/dist/Index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ASDASD</title>
<base href=".">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<gpr-app></gpr-app>
<script type="text/javascript" src="inline.8ea5f1bd0bc512411c2a.bundle.js"></script>
<script type="text/javascript" src="polyfills.b882bdb64c2d336705f6.bundle.js"></script>
<script type="text/javascript" src="main.1147906975e322f405e8.bundle.js"></script>
</body>
</html>
AppModule
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
import { NotFoundComponent } from './notFoundComponent/notFound.component';
@NgModule({
imports: [BrowserModule, HttpClientModule, AppRoutingModule, CoreModule.forRoot(), SharedModule.forRoot()],
declarations: [
AppComponent,
NotFoundComponent
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
根组件AppComponent
@Component({
moduleId: module.id,
selector: 'gpr-app',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {
...
}
我是这类项目的新手，所以我不知道自己做错了什么。如果您需要更多信息来解决此问题，请随时发表评论。
提问者
SMGG
被浏览
148
谢谢！！但是我不明白为什么以前在开发模式下将其与脚本导入一起使用。
我不知道您如何组织代码，但最佳做法是将样式链接放在html和脚本的顶部以及底部