Develop Reference

Angular request redirect to URL after POST submission

I am new to Angular and following this tutorial to create a MailChimp submission form. I have replaced the list information & id and the tutorial with my own. On submission of the form, I want to redirect to a Thank You page, which was not shown in the tutorial.
When I submit user email to the list, I get a 200 response back from the server on my POST request.
However, I have two problems.
#1 The redirect does not navigate to the '/thanks' route. I'm not sure if this is the actual way this function should be used for navigation. I thought it would work similar to React's this.history.push. I got the basic idea for this function from this Stack Overflow question
subscribe-form-component.ts
export class SubscribeFormComponent implements OnInit {
subscribeData: any = <any>{};
constructor(
private subscribeService: SubscribeService,
private router: Router
) {}
ngOnInit() {}
onSuccess() {
this.router.navigate(['/thanks']);
}
subscribe(subscribeForm: NgForm) {
if (subscribeForm.invalid) {
return;
}
this.subscribeService.subscribeToList(this.subscribeData).subscribe({
complete: () => {this.subscribeData},
next: () => {this.onSuccess},
error: (err) => {
console.log('err', err);
},
});
}
}
However, in the console log console.log('err', err), though the submit form returns a 200 response from the sever, I did notice a JSONP error:
Error: JSONP injected script did not invoke callback.
message: "Http failure response for https://xxxxxxx.us11.list-manage.com/subscribe/post?u=afd1f3490xxxxxxxx7883fb&id=035xxxx952&f_id=009fa6e0f0&EMAIL=xxxxxx#icloud.com&c_afd1f34907923e052b17883fb_009fa6e0f0=&c=ng_jsonp_callback_0: 0 JSONP Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "JSONP Error"
url: "https://xxxxxx.us11.list-manage.com/subscribe/post?u=afd1f349xxxxxxx7883fb&id=035b97f952&f_id=009xxxxf0&EMAIL=xxxxx#icloud.com&c_afd1f34907923e052b17883fb_009fa6e0f0=&c=ng_jsonp_call
If my onSuccess navigation route function/syntax is correct, I'm assuming that the reason it is not redirecting is because of this error in the console.
subscribe.service.ts
import { Injectable } from '#angular/core';
import { HttpClient, HttpParams } from '#angular/common/http';
import { Router } from '#angular/router';
#Injectable({
providedIn: 'root'
})
export class SubscribeService {
mailChimpEndpoint = 'https://xxxxxx.us11.list-manage.com/subscribe/post?u=afd1f3490xxxxxxxxxb&id=035b9xxxx52&f_id=009faxxxf0';
constructor(
private http: HttpClient,
private router: Router
) { }
subscribeToList(data: any) {
const params = new HttpParams()
.set('EMAIL', data.email)
.set('afd1f3490xxxxxxxxxxb_009fa6e0f0', '');
const mailChimpUrl = `${this.mailChimpEndpoint}&${params.toString()}`;
return this.http.jsonp(mailChimpUrl, 'c')
}
}
How do I fix this JSON P error and correctly redirect after submission?

By default, JSONP will cause the error that you are seeing when using the Angular HttpClient.
There is a HttpClientJsonpModule that can be used instead of the HttpClientModule, and it does support JSONP.
Documentation is at https://angular.io/api/common/http/HttpClientJsonpModule

how to get data seesion id and all from external url given, which not from my app(routing) in angular 6

Url: https://admin/workadd/cust_session?sessionId=1500c980954d7a81e6c428a16d8c25&srId=SR1234&custId=cust12345&custName=sam
This url is external given by backend to me, i need to fetch the data from url like session id, srid and all,
Whenever user clicks on this link it should open in my app and fetch details from url, my app in angular 6 using

import { ActivatedRoute, Router } from '#angular/router';
export class AppComponent{
public session;
constructor(private activatedRoute: ActivatedRoute){
this.activatedRoute.queryParams.subscribe(params =>{
this.session = params['sessionId'];
console.log("SessionId ",this.session)
});
}
}

Angular 6 route params reload after Location.go

In order to avoid any component reload I'm using Location.go to change the URL from my first Component (SearchboxComponent).
The thing is that I'm using the route params in a second Component (ListingComponent) to reflect the URL changes in some links, pagination etc. But the new URL is not detected by my subscription and the params don't change. Can I make the router module reparse the URL to fill the new params?
ListingComponent
this.route.params.subscribe( async (params: IListingUrlParams) => {
console.log('params', params);
});
SearchboxComponent
const url = this.parametersService.searchParamsToUrl(params);
// this.router.navigate([url]); This works but reloads my main component
this.listingsService.getList(params); // Fetch the new data before navigation
Location.go(url); // This works but params are not reloaded

If you want to update your current route parameters.
Lets say your route as:
path/:id
Current path : path/123
in component:
import { Location } from '#angular/common';
constructor(private location: Location) { }
updateRoute(){
let url = this.location.path().replace('123', '456');
this.location.go(url);
}
Updated path : path/456

how to redirect to error component when service give error?

Could you please tell me how to redirect to component when service give error ?In my app I am requesting a service , I want if I got any error some service it will show error component
Here is my code
https://stackblitz.com/edit/angular-ctwnid?file=src%2Fapp%2Ftest.service.ts
In my current example I am using resolver to get data.
const routes: Routes = [
{
path: 'home',
component: HelloComponent,
resolve: { data: TestResolver }
},
{
path: 'error',
component: ErrorComponent
},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
I changed requested url so that I will get an error
correct url :https://jsonplaceholder.typicode.com/todos/1
wrong url :https://jsonplaceholder.typicode.com/todoss/1
I want that if I get an error it redirects to Errorcomponent.
#Injectable()
export class TestResolver implements Resolve<Observable<string>> {
constructor(private testService: TestService) {}
resolve(): Observable<any> {
return this.testService.getConfiguration();
}
}
any update ?

You have a couple of options. You could use a Guard to handle this, but because it's based on resolved data, it would probably be a good idea to make it an interceptor. Here's a post that should point you in the right direction re: interceptors
Using Router in services in Angular 4

You can handle this in your component.ts
Whenever the API call fails just use
this._service.function().subscribe(success => {
.....
},
error => {
this.router.navigate['error'];
});
where you call your service.

Angular 2 app base initialization

How can I make basic initialization of my data in app. For example if user logged in and press F5 I need to request current user data from server before all queries starts like get user order etc. In Angular 1 we have .run() directive for this case. How can I solve this problem?

There are several ways to do that:
You could execute some requests before bootstrapping your Angular2 application. Such first requests could rely what you save into the local / session storage.
var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
var http = injector.get(Http);
http.get('/userdetails').map(res => res.json())
.subscribe(data => {
bootstrap(AppComponent, [
HTTP_PROVIDERS
provide('userDetails', { useValue: data })
]);
});
See this question for more details:
How to bootstrap an Angular 2 application asynchronously
You could extend the HTTP request to transparently get these data when requests are actually executed. This would be a lazy approach.
#Injectable()
export class CustomHttp extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, userDetailsService: UserDetailsService) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
console.log('request...');
return this.userDetailsService.getUserDetails().flatMap((userDetails) => {
return super.request(url, options);
});
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
console.log('get...');
return this.userDetailsService.getUserDetails().flatMap((userDetails) => {
return super.get(url, options);
});
}
}
implement the UserDetailsDetails this way:
export class UserDetailsService {
constructor(private http:Http) {
}
getUserDetails() {
if (this.userDetails) {
return Observable.of(this.userDetails);
} else {
return this.http.get(...)
.map(...)
.do(data => {
this.userDetails = data;
// Store in local storage or session storage
});
}
}
and register this CustomHttp class this way:
bootstrap(AppComponent, [HTTP_PROVIDERS,
UserDetailsService,
new Provider(Http, {
useFactory: (backend: XHRBackend,
defaultOptions: RequestOptions,
userDetailsService: UserDetailsService) => new CustomHttp(backend, defaultOptions, userDetailsService),
deps: [XHRBackend, RequestOptions, UserDetailsService]
})
]);
See these questions for more details:
Angular 2 - How to get Observable.throw globally
Cache custom component content in ionic 2
Things could also be done at the level of the router outlet if you use routing. It's possible to implement a custom router-outlet that checks security / user details when a route is activated. I think that it's a little further from your need...
See this question for more details:
Angular 2 Cancelling Route Navigation on UnAuthenticate

You could fetch the current user data before you call Angular2's bootstrap(...)
You could also fire an event (using an Observable for example) to notify other that the logged-in user is now known and initiate further requests only after this event was received.