Uncaught TypeError : undefined is not a function & Uncaught RangeError : maximum call stack size exceeded Angular2

Question

I've been following the Angular2 quicstart using javascript in the purpose of learning the Angular2 framework.. I've been doing exactly like the guidelines told me but I'm having an errors

Uncaught TypeError: undefined is not a function angular2-all.umd.js:3528
Uncaught RangeError: Maximum call stack size exceeded angular2-polyfills.js:143

I'm not sure if I missed something, this is the file structure of my app

app/
- app.component.js
- boot.js
node_modules/
index.html
package.json

and this is the code base

app.component.js

(function (app) {

    app.AppComponent = ng.core
        .Component({
            selector: 'my-app',
            template: '<h1>My First Angular 2 App</h1>'
        })
        .Class({
            constructor: function () {
            }
        });

})(window.app || (window.app == {}));

boot.js

(function(app) {

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

})(window.app || (window.app = {}));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular 2</title>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>

    <script src="app/app.component.js"></script>
    <script src="app/boot.js"></script>

</head>
<body>
    <my-app>Loading..</my-app>
</body>
</html>

I think I followed the quickstart perfectly, but I'm not sure on where did I missed since I'm new to Angular2

dfsq · Accepted Answer · 2016-01-13 09:29:17Z

1

You have a little almost unnoticeable typo in your code that makes a huge difference. This is your IIFE in app.component.js file:

(function (app) {
    // ...
})(window.app || (window.app == {}));
// comparison operator ------^

Note, that you use comparison operator, while you want assignment:

(function (app) {
    // ...
})(window.app || (window.app = {}));

answered Jan 13, 2016 at 9:29

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

8 Comments

Eka Rudianto Over a year ago

yes I did a typo, thanks for noticing ! unfortunately that didn't solve the problem though... I still got the error message

dfsq Over a year ago

Really? Because I actually tested your code - that's how I realised about this typo. It did fix the problem though.

Eka Rudianto Over a year ago

could you share me the tested codes ? or is it possible that browser version caused this issue ?

dfsq Over a year ago

Did you try angular.io/resources/live-examples/quickstart/js/plnkr.html ?

Eka Rudianto Over a year ago

tried it and it returns Uncaught TypeError: undefined is not a function collection.ts:65 so I guess my chrome has an issue about it ? I run it on ubuntu though

|

Collectives™ on Stack Overflow

Uncaught TypeError : undefined is not a function & Uncaught RangeError : maximum call stack size exceeded Angular2

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related