Angular-cli: JSONP callback

Created on 13 Feb 2017  路  5Comments  路  Source: angular/angular-cli

Greeting,
I getting a error using jsonp link to get some data. I can receive it without using a angular-cli project, but I wanna do the effort to use it. I didn't change any config code. I realize there a issue almost the same as my 8153, but anything there help me.
There a image of my error
My backend is done ASP.NET C#.
There a example of the link I'm using
http://xxx.xxx.xxx.xxx:0000/api/dashboard/serverStatus?callback=JSONP_CALLBACK
and return
/**/ typeof JSONP_CALLBACK === 'function' && JSONP_CALLBACK({"SIJStatus":{"status":200,"text":"OK"},"DJEStatus":{"status":200,"text":"OK"},"OACVStatus":{"status":200,"text":"OK"},"IdentityStatus":{"status":200,"text":"OK"},"ITopStatus":{"status":200,"text":"OK"}});
using Headers() or URLSearchParams, happens the same.

There the code from service:
`
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { Jsonp } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

getServer() {
return this.jsonp.get(this.statusURL)
.map(res => res.json() )
.catch(error => Observable.throw(error)
);
}
**There the code from module**
import { HttpModule, JsonpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ServerStatusService } from './app.service';

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule
],
providers: [
ServerStatusService
],
bootstrap: [AppComponent]
})
`

There the code from component
`
import { Component } from '@angular/core';
import { ServerStatusModel } from './app.model';
import { ServerStatusService } from './app.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
//styleUrls: ['./app.component.css']
providers: [ServerStatusService]
})
export class AppComponent {

private errorMessage: string;
private serverStatus: ServerStatusModel;

constructor(
    private guiasService: ServerStatusService
) { }

ngAfterViewInit(){
    this.refreshInfo();
}

refreshInfo(){
    let response: any[];
    this.guiasService.getServer()
        .subscribe(
            res => { 
                response = res;
                console.log(response);         // debug
            },
            err => {
                this.errorMessage = err;
                console.log(this.errorMessage);  // debug
            },
            () =>  {
                this.serverStatus = new ServerStatusModel();
                this.serverStatus.fill(response);
                console.log(this.serverStatus);
                //this.proc.configPanel();
                //this.updatePanelArr();
            }
        );
}

}
`

OS?

Windows10

Versions.

angular-cli: 1.0.0-beta.26
node: 6.9.5

Thank you in advance for the time.

Most helpful comment

Rather put these into package.json

"@angular/common": "~2.4.7",
"@angular/compiler": "~2.4.7",
"@angular/core": "~2.4.7",
"@angular/forms": "~2.4.7",
"@angular/http": "~2.4.7",
"@angular/platform-browser": "~2.4.7",
"@angular/platform-browser-dynamic": "~2.4.7",
"@angular/router": "~3.4.7",

then "npm i && npm i -S @angular/[email protected]"

and ignore these warnings until installing next version of angular modules to be released in a couple of days.

npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.

As far as I know, the broken JSONP commit is only difference between 2.4.5 and 2.4.7 versions. So I think you can safely ignore the above warnings.

All 5 comments

https://github.com/angular/angular/issues/14267

what's @angular/http version in your cli project? If your issue is related to the above @angular/http issue, please try with 2.4.5 or wait for next angular release (hopefully 2.4.8) which will include this commit.
https://github.com/angular/angular/commit/4676df5833941529c8558f607993c4fee50aa9b3

Otherwise, you might need to create a plnkr to reproduce your issue.

Thank you for show me 14267 issue ! It works for me.
I search but didn't appear nothing! I just got something on console that is making me scratching my head.
my package.json
"dependencies": {
"@angular/common": "^2.4.5",
"@angular/compiler": "^2.4.5",
"@angular/core": "2.4.5",
"@angular/forms": "^2.4.5",
"@angular/http": "2.4.5",
"@angular/platform-browser": "2.4.5",
"@angular/platform-browser-dynamic": "^2.4.5",
"@angular/router": "3.4.5",
"core-js": "^2.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},

the output
(...)
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
| +-- @angular/[email protected]
| | -- [email protected] | +-- [email protected] |-- [email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected] +-- @angular/[email protected]
(...)

UNMET PEER DEPENDENCY ... Should trust that is everything ok? What I must be my dependence version?

Thank you in advance for the time and any help.

Rather put these into package.json

"@angular/common": "~2.4.7",
"@angular/compiler": "~2.4.7",
"@angular/core": "~2.4.7",
"@angular/forms": "~2.4.7",
"@angular/http": "~2.4.7",
"@angular/platform-browser": "~2.4.7",
"@angular/platform-browser-dynamic": "~2.4.7",
"@angular/router": "~3.4.7",

then "npm i && npm i -S @angular/[email protected]"

and ignore these warnings until installing next version of angular modules to be released in a couple of days.

npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.

As far as I know, the broken JSONP commit is only difference between 2.4.5 and 2.4.7 versions. So I think you can safely ignore the above warnings.

Closing as answered.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jbeckton picture jbeckton  路  3Comments

rajjejosefsson picture rajjejosefsson  路  3Comments

hartjo picture hartjo  路  3Comments

gotschmarcel picture gotschmarcel  路  3Comments

sysmat picture sysmat  路  3Comments