To access ponents in the current URL path, the following works in my application:

constructor(private route: ActivatedRoute) { }
...
load() {
    this.route.params.subscribe((params) => {
      const id = +params['id'];
      console.log('got parameter', id);
 ... etc

This is the textbook case and the variable id gets set as advertised. But I want to use the more elegant await form and it doesn't work. (Of course I will have a string of await statements following.) Like this:

async load() {
    try {
      console.log('getting parameters');
      const params = await this.route.params.toPromise();
      console.log('got params', params);
      const id = +params['id'];
  ... etc

What I get is the output from the first console.log() call but the second never es. And of course the id variable doesn't get set and the rest of the code never executes.

The documentation and the working code says that this.route.params is an Observable, which should be convertable to a Promise via toPromise() and thereby used with Typescript async/await. I use await statements with the Observables that e out of the HttpClient module just fine.

But it doesn't work. Anyone know why?

To access ponents in the current URL path, the following works in my application:

constructor(private route: ActivatedRoute) { }
...
load() {
    this.route.params.subscribe((params) => {
      const id = +params['id'];
      console.log('got parameter', id);
 ... etc

This is the textbook case and the variable id gets set as advertised. But I want to use the more elegant await form and it doesn't work. (Of course I will have a string of await statements following.) Like this:

async load() {
    try {
      console.log('getting parameters');
      const params = await this.route.params.toPromise();
      console.log('got params', params);
      const id = +params['id'];
  ... etc

What I get is the output from the first console.log() call but the second never es. And of course the id variable doesn't get set and the rest of the code never executes.

The documentation and the working code says that this.route.params is an Observable, which should be convertable to a Promise via toPromise() and thereby used with Typescript async/await. I use await statements with the Observables that e out of the HttpClient module just fine.

But it doesn't work. Anyone know why?

• javascript
• angular
• typescript
• rxjs

2 Answers 2

The basic answer is: You are having incontrollable race conditions here

When you access the Observable route.params it's pretty normal that it isn't pleted yet. Calling toPromise() on it at this point in time will lead to an enduringly pending Promise and this is the problem you are facing.

If you are not bound to using this async await construct leave it and better directly access synchronously params.id via ActivatedRouteSnapshot.

ngOnInit() {
    const id: string = route.snapshot.params.id;
}

Apropos AlanObject's question ... why the ActivatedRoute uses Observables in the first place ..., the reason is the ngOnInit() is called only on ponent initiation, that is, when it is created. Imagine your ponent is used to display item details with a route like /item/123, where 123 is the current item ID.

Now, if your ponent would implement also a Previous and Next links navigating to /item/122 and /item/124, the ponent would not be instantiated again. In such cases you would need a subscription or another way to get the ID and related data updated.