Селектор «нг-компонент» не соответствует ни одному элементов ошибку

Ошибка:Селектор «нг-компонент» не соответствует ни одному элементов ошибку

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

приложение прекрасно работает во время работы с systemjs напрямую. Когда я попытался построить globals.bundle.js и app.bundle.js с помощью webpack и развертывания я получаю эту ошибку.

Все файлы и зависимости загружены в порядке.

Вот мой 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 конфигурации

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 Хотя это происходит только в WebPack сборки в местной среде, я могу воспроизвести это через plnkr

источник

2017-01-19 Jeba Prince

Где вы использовали '<нг-компонента>'? Возможно, вы хотели использовать ''? –

Я никогда не использовал любой, где –

Угловой использует его как 'defaultComponentElementName' (https://github.com/angular/angular/blob/33910ddfc98d092e514d90a2cec3b5daaf3d4277/modules/%40angular/compiler/src/schema/dom_element_schema_registry.ts # L355). Не знаю, что может вызвать эту ошибку. –

Спасибо @ Гюнтер Zöchbauer и @yurzui для поддержки

@yurzui теперь я понимаю, что мне нужно иметь селектор для начальной загрузки компоненты или использовать

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

вместо

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

Как бы это ни было, почему это сработает, если я использую sy stemjs и doestn't работать с plunkr или webpack.

источник

2017-01-20 09:51:44

Чтобы добавить некоторые пояснения, это потому, что вы определили ['entry-component'] (https://angular.io/ docs/ts/latest/cookbook/ngmodule-faq.html #! # q-entry-component-defined) в вашем модуле, не включив в него селектор, чтобы указать «Угловое», где его отображать. Чтобы решить эту проблему, определите селектор и включите соответствующий элемент в HTML или опустите селектор и используйте общий селектор < '(редко). Кроме того, вы можете полностью опустить компонент записи (удалите '.bootstrap()' или '.entry()' из вашего '@ NgModule' и вместо этого перейдите на трафик на основе' '. –

Еще одно уточнение, если вы используете Angular Cli для создания приложения и изменить селектор для корневого компонента, скажем, от «app-root» до «root», вам придется перейти на главную страницу HTML страницу, которая index.html и изменения шаблон в теге body тоже. Если нет, вы получите аналогичную ошибку, как и выше. То есть из

<body> <app-root></app-root> </body>в

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

источник

2017-06-29 08:33:17

Селектор «нг-компонент» не соответствует ни одному элементов ошибку

ответ

Смежные вопросы