CODEWITHSUNDEEP
angularwebpack
Jeba Prince
Jeba Prince

Reputation: 1671

The selector "ng-component" did not match any elements error

Error:

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

App works fine while running with systemjs directly. When i tried to build globals.bundle.js and app.bundle.js using webpack and deploy i get this error.

All files and dependency is loaded fine.

Here is my 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 Though it happens only in webpack build in my local environment, i can reproduce this through plnkr

Upvotes: 15

Views: 18193

Answers (6)

Jisu
Jisu

Reputation: 1

There should be only one component in bootstrap

bootstrap : [ AppComponent ]

Upvotes: 0

Ben Winding
Ben Winding

Reputation: 11817

I've found it's usually because the index.html has an incorrect reference to the app.component.ts selector.

It should match (like this)

enter image description here

Upvotes: 2

Musa Baloyi
Musa Baloyi

Reputation: 617

I had the same issue just now and that was because of bootstrap: [ AppComponent, AdminComponent ]

Only have one Bootstrap Component

DEFAULT should be bootstrap: [ AppComponent ]

Upvotes: 2

Jeba Prince
Jeba Prince

Reputation: 1671

Thank you @Günter Zöchbauer and @yurzui for your support

@yurzui now i understand that i need to have a selector for bootstrap component or use 

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

instead of

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

How ever it is stange why it would work if i am using systemjs and doestn't work with plunkr or webpack.

Upvotes: 13

Alf Moh
Alf Moh

Reputation: 7437

Another clarification, if you use Angular Cli to create your application and you change the selector for your root component let's say from "app-root" to "root", you will have to go to the main html page which is index.html and change the template within the body tag too. If not, you will get a similar error like the one above. That is from

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

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

Upvotes: 7

emery.noel
emery.noel

Reputation: 1185

After experiencing this problem, for me, it turns out that you can't put <router-outlet></router-outlet> in the index.html.

So instead, I had to create a top-level module SOLELY to hold the router-outlet:

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

In the future I'll probably build out the top-level app more, but, as I'm just learning, this burned an hour. "Let's implement routing now," I thought to myself. "Should be as easy as ...."

Upvotes: 2

Related Questions