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

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 ]


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.


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 ...."


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>

Tags:

Angular

Webpack

Recent Posts