11

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"
Simone Zandara
  • 8,041
  • 2
  • 16
  • 26

1 Answers1

23

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

Simone Zandara
  • 8,041
  • 2
  • 16
  • 26