Menu
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
977
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.
102
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>
34
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 ...."
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
