"Selector did not match" error on prod mode angular embedded in a ASP .NET MVC project

Question

Warm tip: This article is reproduced from stackoverflow.com, please click

.net-core angular asp.net-core asp.net-core-mvc c#

"Selector did not match" error on prod mode angular embedded in a ASP .NET MVC project

发布于 2020-03-28 23:17:21

I'm working on an angular 5 app inside an ASP .NET MVC project and everything works fine when I build both part of the project in development mode. But, when I build angular in production mode (ng build --prod), this error appears:

In development mode I add the links to angular main, inline, vendor and polyfills files in the .NET's layout. So I do the same in production without the same result:

/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 file /Code/Views/Main/Index.cshtml only contains the layout call and the angular root selector <gpr-app></gpr-app>.

Index.html generated /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 { }

Root component AppComponent

@Component({
    moduleId: module.id,
    selector: 'gpr-app',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent {
    ...
}

I'm new in this type of projects so I don't know what I'm doing wrong. Feel free to comment if you need more information to solve this issue.

Questioner

SMGG

Viewed

81

Chinese

Original

"Selector did not match" error on prod mode angular embedded in a ASP .NET MVC project

Related issues