I have a very simple angular2 project, configured to work with Gulp, Bundle and ECM6. Bundle will create a big file which contains the translated ECM5 of angular plus my app.
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Test</title>
<script src="bundle.js"></script>
</head>
<body>
<mainapp>
</mainapp>
</body>
</html>
The angular app is defined as follows:
import {Component, View, bootstrap} from 'angular2/core';
export class mainComponent {
static get annotations() {
return [
new Component({
selector: 'mainapp'
}),
new View({
template: `<div>Hello!</div>`
})
];
}
}
bootstrap(mainComponent);
However when I load it, I keep on getting an error
"selector 'mainapp' did not match any element"
I have a very simple angular2 project, configured to work with Gulp, Bundle and ECM6. Bundle will create a big file which contains the translated ECM5 of angular plus my app.
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Test</title>
<script src="bundle.js"></script>
</head>
<body>
<mainapp>
</mainapp>
</body>
</html>
The angular app is defined as follows:
import {Component, View, bootstrap} from 'angular2/core';
export class mainComponent {
static get annotations() {
return [
new Component({
selector: 'mainapp'
}),
new View({
template: `<div>Hello!</div>`
})
];
}
}
bootstrap(mainComponent);
However when I load it, I keep on getting an error
"selector 'mainapp' did not match any element"
1 Answer
Reset to default 23The problem was that I was including the bundle.js before the mainapp component was defined in the HTML. This fixed the issue.
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Test</title>
</head>
<body>
<mainapp>
</mainapp>
<script src="bundle.js"></script>
</body>
</html>
Update:
<script src="bundle.js" defer></script>
Seems to also solve the problem regardless of the order of the elements.