Selektor "NG-komponent" nie pasuje do żadnego błędu Elements

Error:Selektor "NG-komponent" nie pasuje do żadnego błędu Elements

EXCEPTION: Error in :0:0 caused by: The selector "ng-component" did not match any elements

App działa dobrze podczas pracy z systemjs bezpośrednio. Kiedy próbowałem zbudować globals.bundle.js i app.bundle.js przy użyciu webpack i wdrożyć pojawia się ten błąd.

Wszystkie pliki i zależności ładowane są prawidłowo.

Tu jest mój HTML

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Maven + Spring MVC</title> 
    <base href="/survey-web/"> 
<spring:url value="/resources/core/css/hello.css" var="coreCss" /> 
<spring:url value="/resources/core/css/bootstrap.min.css" var="bootstrapCss" /> 
<link href="${bootstrapCss}" rel="stylesheet" /> 
<link href="${coreCss}" rel="stylesheet" /> 
<%--<script src="resources/node_modules/zone.js/dist/zone.min.js"></script> 
<script src="resources/node_modules/reflect-metadata/Reflect.js"></script> 
<script src="resources/js/system.src.js"></script> 
<script src="resources/systemjs.config.js"></script>--%> 
    <script src="resources/dist/globals.bundle.js"></script> 
    <script src="resources/dist/app.bundle.js"></script> 

<script> 
    //System.import('app').catch(function(err){ console.error(err); }); 
</script> 
</head> 
<body> 
<router-outlet></router-outlet> 
</body> 
</html>

WebPACK config

module.exports = { 
entry: { 
    globals: [ 
     'zone.js', 
     'reflect-metadata' 
    ], 
    app: './app/main.ts', 
}, 
module: { 
    loaders: [ 
     {test: /.ts$/, loader: 'awesome-typescript-loader'}, 
    ] 
}, 
output: { 
    filename: '[name].bundle.js', 
    path: './dist' 
} 
};

Plunkr

https://plnkr.co/edit/AfYGsdHpIVnVnuF7BCUJ?p=preview Choć zdarza się tylko w WebPACK kompilacji w moim lokalnym środowisku, mogę powielać to przez plnkr

Źródło

2017-01-19 Jeba Prince

Skąd użyć ''? Być może zamierzałeś użyć ''? –

Nigdy nie użyłem any gdzie –

Angular używa go jako 'defaultComponentElementName' (https://github.com/angular/angular/blob/33910ddfc98d092e514d90a2cec3b5daaf3d4277/modules/%40angular/compiler/src/schema/dom_element_schema_registry.ts # L355). Nie mam pojęcia, co może spowodować ten błąd. –

Dziękuję @ Güntera Zöchbauer i @yurzui za wsparcie

@yurzui Teraz rozumiem, że muszę mieć selektora dla bootstrap składnika lub użyj

<body> 
    <ng-component></ng-component> 
    </body>

zamiast

<body> 
<router-outlet></router-outlet> 
</body>

Jak to działa, dlaczego to zadziała, jeśli używam sy stemjs i nie działają z plunkr lub webpack.

Źródło

2017-01-20 09:51:44

Aby dodać jakieś wyjaśnienie, dzieje się tak dlatego, że zdefiniowałeś ["komponent wejściowy"] (https://angular.io/ docs/ts/latest/cookbook/ngmodule-faq.html #! # q-entry-component-defined) w swoim module, bez włączania selektora, który informuje Angular, gdzie ma być renderowany. Aby rozwiązać ten problem, zdefiniuj selektor i dołącz odpowiedni element w kodzie HTML lub pomiń selektor i użyj ogólnego selektora '' (rzadko). Alternatywnie możesz całkowicie pominąć komponent wejściowy (usuń '.bootstrap()' lub '.entry()' z '@ NgModule' i zamiast tego przełącz się do opartego na trasie' '. –

Innym wyjaśnienie, jeśli używasz Angular Cli do tworzenia aplikacji i zmienić selektor dla elementu głównego powiedzmy z „app-root” na „root”, będziesz musiał udać się do głównej strony html, który jest index.html i zmiana szablon również w znaczniku body. Jeśli nie, otrzymasz podobny błąd, jak ten powyżej. Czyli od

<body> <app-root></app-root> </body>do

<body> <body> <root></root> </body>

Źródło

2017-06-29 08:33:17

Selektor "NG-komponent" nie pasuje do żadnego błędu Elements

Odpowiedz

Powiązane problemy