Angular not defined when trying angular2?

Question

I am trying out angular2 in the ES5 way with this code:

<html>
    <head>
            <script src="https://code.angularjs.org/2.0.0-alpha.31/angular2.sfx.dev.js"></script>
            <script>
            function AppComponent() {}

            AppComponent.annotations = [
                new angular.Component({
                        selector: 'my-app'
                }),
                new angular.View({
                        template: '<h1>My first Angular 2 App</h1>'
                })
            ];

            document.addEventListener('DOMContentLoaded', function() {
              angular.bootstrap(AppComponent);
            });
            </script>
    </head>
    <body>
        <my-app></my-app>
    </body>
</html>

In chrome I am getting the nasty error:

Uncaught ReferenceError: angular is not defined

Specifically with the line that says:

 new angular.Component({

I'm stuck on this too. The Angular 2 displaying data guide uses this format, though I haven't found it in the other guides. — Phil D.
– Phil D., Commented Feb 15, 2016 at 4:27

Anil Singh · Accepted Answer · 2015-10-08 09:05:11Z

3

Try this one.

<!DOCTYPE html>
<html>

<head>
        <link rel="stylesheet" href="style.css" />
        <script src="https://code.angularjs.org/2.0.0-alpha.31/angular2.sfx.dev.js"></script>
        <script>
                function Service() {};

                Service.prototype.greeting = function() {
                        return 'hello';
                };

                var Cmp = ng.
                Component({
                        selector: 'cmp',
                        viewInjector: [Service]
                }).
                View({
                        template: '{{greeting}} world!'
                }).
                Class({
                        constructor: [Service, function Cmp(service) {
                                this.greeting = service.greeting();
                        }]
                });

                document.addEventListener('DOMContentLoaded', function() {
                        ng.bootstrap(Cmp);
                });
        </script>
</head>

<body>
        <cmp></cmp>
</body>

</html>

edited Oct 8, 2015 at 9:05

user456814

answered Jul 21, 2015 at 5:18

Anil Singh

4,2224 gold badges45 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rolando Over a year ago

I dont know if this is normal, but if i name "cmp something else", it gives me an error in chrome that "cmp" does not match any elements... what gives? is there a way to hide that error? JUst because I include a "directive" doesnt mean i have to use it right?

Anil Singh Over a year ago

I think you missed any where. I have setup plunker with update name "cmp" to 'anil' but its working. Please see on plnkr example embed.plnkr.co/9Xbw3M/preview

Anil Singh Over a year ago

At the time your angular code runs, angular does not exist yet. So, throw this is an error..

Rolando Over a year ago

This does not work: plnkr.co/edit/4ZhVNHTk2kSME2DvkWTd, I changed anil to anill. Usually if the directive is not used, there shouldnt be an error.

Rolando Over a year ago

I know but it seems to suggest that any angular directive defined must be used in the DOM to avoid that error. In angular1 i can define multiple directives/components, but not have to use them in the DOM.

|

TuffyHe · Accepted Answer · 2015-12-17 05:55:13Z

0

use ng, not angular

    function AppComponent() {
        this.text = 'Hello';
    };

    AppComponent.annotations = [
        new ng.ComponentAnnotation({
                selector: 'my-app'
        }),
        new ng.ViewAnnotation({
                template: '<h1>{{text}}, My first Angular 2 App</h1>'
        })
    ];

    document.addEventListener('DOMContentLoaded', function() {
      ng.bootstrap(AppComponent);
    });

answered Dec 17, 2015 at 5:55

TuffyHe

1

Comments

Evan Wieland · Accepted Answer · 2017-09-13 21:12:54Z

0

Here you go this is your example working in a JSFiddle

https://jsfiddle.net/rmt7m0km/1/ with the angular being set as an external resource

<body>
    <script>
        function AppComponent() {}
            AppComponent.annotations = [
              new angular.ComponentAnnotation({
                selector: 'my-app'
              }),
              new angular.ViewAnnotation({
                template: '<h1>My first Angular 2 App</h1>'
              })
            ];
            document.addEventListener('DOMContentLoaded', function() {
              angular.bootstrap(AppComponent);
            });
    </script>
    <my-app></my-app>
</body>

I used https://angular.io/guide/setup

edited Sep 13, 2017 at 21:12

Evan Wieland

1,5281 gold badge22 silver badges36 bronze badges

answered Jul 21, 2015 at 5:20

jamcoupe

1,4511 gold badge20 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular not defined when trying angular2?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related