温馨提示:本文翻译自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
被浏览
43
Tony Ngo 2020-01-31 19:01

您应该将所有脚本导入都移动到布局的底部。您遇到了这个问题,因为在脚本运行之前未渲染DOM,因此您的脚本会尝试查找不存在的选择器

<!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")

<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 />
    @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>
</html>

发布
问题

分享
好友

手机
浏览

扫码手机浏览