Question

错误：

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

重现这一点

Answer 1

感谢 @GünterZöchbauer和 @yurzui 的支持

@yurzui现在我明白我需要一个bootstrap组件的选择器或使用

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

而不是

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

如果我使用的是systemjs并且不能使用plunkr或webpack，那么为什么它会起作用呢？

Answer 2

另一个澄清，如果您使用Angular Cli创建应用程序并更改根组件的选择器，请说“app-root”到“root”，您将不得不转到主{html}页面index.html并更改body标签内的模板。如果没有，您将得到类似上面的错误。那是来自

<body> <app-root></app-root> </body> 至

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

Answer 3

遇到这个问题后，对我来说，您不能将<router-outlet></router-outlet>放入index.html 。

所以，相反，我不得不创建一个顶级模块来容纳路由器出口：

import { Component } from "@angular/core";
@Component({
    selector: "my-app",
    template: `<router-outlet></router-outlet>`
})
export class AppComponent{}

将来，我可能会更多地开发顶级应用程序，但是，正如我刚刚学习的那样，这花了一个小时。我对自己说：“让我们现在实施路由。” “应该像...一样容易。”

Answer 4

我刚才有同样的问题，那是因为 bootstrap: [ AppComponent, AdminComponent ]

只有一个Bootstrap组件

DEFAULT应该是 bootstrap: [ AppComponent ]

Answer 5

我发现通常是因为index.html对app.component.ts选择器的引用不正确。

它应该匹配（像这样）

选择器“ng-component”与任何元素错误

5 个答案: