Q:

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

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.

A:

You should move all your script import to the bottom of your layout. You have that problem because your DOM is not render before your script run so your script try to look for that selector which did not exist
<!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>

