错误:
EXCEPTION: Error in :0:0 caused by: The selector "ng-component" did not match any elements
应用程序在直接使用 systemjs 运行时运行良好。 当我尝试使用 webpack 构建 globals.bundle.js 和 app.bundle.js 并部署时，出现此错误。
所有文件和依赖项都加载正常。
这是我的 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 重现它
最佳答案
感谢@Günter Zöchbauer 和@yurzui 的支持
@yurzui 现在我明白我需要有一个用于引导组件的选择器或使用
<body>
<ng-component></ng-component>
</body>
代替
<body>
<router-outlet></router-outlet>
</body>
如果我使用的是 systemjs 而不适用于 plunkr 或 webpack，为什么它会起作用是多么奇怪。
关于angular - 选择器 "ng-component"不匹配任何元素错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41743128/