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
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.
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>
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 ...."
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 ]
There should be only one component in bootstrap
bootstrap: [ AppComponent ]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.