CODEWITHSUNDEEP
angularangular-services
kaotik
kaotik

Reputation: 45

Example of http get using Angular2 final release 2.0.1 in ES5

Since ng.http.HTTP_PROVIDERS is deprecated in favor of ng.http.HttpModule, I cannot get HTTP GET request to work in my component.

Here's the component:

(function (app) {
app.ServiceComponent = ng.core
    .Component({
        selector: 'service',
        templateUrl: 'app/service/service.component.html',
        directives: [ ng.router.ROUTER_DIRECTIVES, app.NestedComponent ],
        providers: [app.TestService, ng.http.HttpModule ]
    })
    .Class({
        constructor: [app.TestService, function(testService) {
            this.title = 'Service Page Test';
            this.body =  'Service Body Test';
            this.message = '';
            this.xhr = {};
            this.testService = testService;
        }],
        ngOnInit: function() {
            this.message = this.testService.getMessage();
            this.xhr = this.testService.getData();
        }
    });
})(window.app || (window.app = {}));

Here's the service:

(function(app) {

app.TestService = function (http) {
    this.message = 'Hello Message Test';
    this.url = "service.json";
    this.http = http;
};


app.TestService.parameters = [ ng.http.Http ];

app.TestService.prototype.getMessage = function () {
    return this.message;
};

app.TestService.prototype.setMessage = function (newMessage) {
    this.message = newMessage;
};

app.TestService.prototype.getData = function () {
    return this.http.get(this.url)
        .map(function (response) {
            return response.json().data;
        })
        .catch();
   };})(window.app || (window.app = {}));

I get the error:

core.umd.js:3433 Error: Uncaught (in promise): TypeError: Cannot read property '__platform_browser_private__' of undefined
at resolvePromise ([email protected]:418)

Upvotes: 1

Views: 434

Answers (1)

yurzui
yurzui

Reputation: 214007

You have to include angular2 scripts in the right order within your html:

<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>

<script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/http.umd.js"></script>

Plunker Example Http request in ES5

Upvotes: 2

Related Questions