Селектор "ng-component" не совпал ни с одной ошибкой элементов

ошибка:

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

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

все файлы и зависимости загружаются нормально.

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

8
angular angularjs webpack

2 ответов

спасибо @Günter Zöchbauer и @yurzui за Вашу поддержку

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

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

вместо

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

Как бы то ни было, почему это будет работать, если я использую systemjs и не работаю с plunkr или webpack.

6

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

<body> <app-root></app-root> </body> to

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

0