Angular 2: The ngOnInit method will be executed after attempting to render the template when initiating from a URL containing an identifier

Question

Angular 2: The ngOnInit method will be executed after attempting to render the template when initiating from a URL containing an identifier

I'm currently developing an angular application that utilizes the Router to navigate between multiple components starting from AppComponent. In order to demonstrate the issue I am facing, I have created a simplified version on plunker (Interestingly, the code runs without any problems locally but encounters issues on plunker.)

When the application is accessed from either http://localhost:3000 or http://localhost:3000/home, everything works as intended when clicking on the links fruit1 and fruit2 which correctly changes the URL to http://localhost:3000/fruit/1 with the corresponding description text. However, the problem arises when directly accessing the URL http://localhost:3000/fruit/1 (typing it in the browser and hitting enter), it appears that the service call within the ngOnInit of the fruit-detail.component.ts occurs AFTER attempting to render the HTML component, resulting in the following stack trace:

EXCEPTION: TypeError: Cannot read property 'description' of null in [ desc: {{fruit.description}}  in FruitDetailComponent@1:6]
angular2.dev.js:23925 EXCEPTION: TypeError: Cannot read property 'description' of null in [ desc: {{fruit.description}}  in FruitDetailComponent@1:6]BrowserDomAdapter.logError @ angular2.dev.js:23925BrowserDomAdapter.logGroup @ angular2.dev.js:23936ExceptionHandler.call @ angular2.dev.js:1320(anonymous function) @ angular2.dev.js:12857schedulerFn @ angular2.dev.js:13264SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13245NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13666NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2143ZoneDelegate.handleError @ angular2-polyfills.js:394Zone.runGuarded @ angular2-polyfills.js:300NgZoneImpl.runInner @ angular2.dev.js:2155NgZone.run @ angular2.dev.js:13749(anonymous...
and so on...

<p>Subsequently, the console logs the message "got fruit inside fruitComponent !apple", reinforcing my suspicion that ngOnInit is called after rendering. How can I ensure that the app functions properly even when directly loading from the 'fruit/1' URL? Any assistance would be greatly appreciated. Thank you!</p>

<pre><code>===== extract data called!!
fruit-detail.component.ts:25 got fruit inside fruitComponent !apple

typescript angular

Answer 1

Answer №1

To ensure data availability with asynchronous execution, consider using the elvis operator:

<h2> desc: {{fruit?.description}} </h2>

When executing this._foodService.getData() asynchronously, the result is obtained after the completion of the ngOnInit method.

If routing is utilized, the OnActivate interface along with its routerOnActivate method may be suitable. By returning a promise within this method, the component will wait for resolution before proceeding with route changes. This ensures that the data is available upon component display, preventing any related issues.

For implementation reference, refer to the following example:

@Component({
  (...)
})
export class FruitDetailComponent implements OnInit, OnActivate {
  fruit = null;

  constructor(
    private _rbacService: FoodService,
    private _routeParams: RouteParams) {}

  routerOnActivate(next: ComponentInstruction,
                   prev: ComponentInstruction) {
    return new Promise(resolve => {
      let id = +this._routeParams.get('id');
      console.log('on init fruit component: id = '+id);
      
      this._rbacService.getData().subscribe(data =>{
        this.fruit = data['fruits'].filter(obj => obj.id === id)[0];
        console.log('got fruit inside fruitComponent '+this.fruit.description);
        resolve(null);
      })
    });
  }
}

Additional information can be found at:

https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

Answer 2

To ensure data availability with asynchronous execution, consider using the elvis operator:

<h2> desc: {{fruit?.description}} </h2>

When executing this._foodService.getData() asynchronously, the result is obtained after the completion of the ngOnInit method.

If routing is utilized, the OnActivate interface along with its routerOnActivate method may be suitable. By returning a promise within this method, the component will wait for resolution before proceeding with route changes. This ensures that the data is available upon component display, preventing any related issues.

For implementation reference, refer to the following example:

@Component({
  (...)
})
export class FruitDetailComponent implements OnInit, OnActivate {
  fruit = null;

  constructor(
    private _rbacService: FoodService,
    private _routeParams: RouteParams) {}

  routerOnActivate(next: ComponentInstruction,
                   prev: ComponentInstruction) {
    return new Promise(resolve => {
      let id = +this._routeParams.get('id');
      console.log('on init fruit component: id = '+id);
      
      this._rbacService.getData().subscribe(data =>{
        this.fruit = data['fruits'].filter(obj => obj.id === id)[0];
        console.log('got fruit inside fruitComponent '+this.fruit.description);
        resolve(null);
      })
    });
  }
}

Additional information can be found at:

https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

Angular 2: The ngOnInit method will be executed after attempting to render the template when initiating from a URL containing an identifier

Answer №1

Similar questions

Reinforced.Typings does not generate fully qualified names (FQN) for types when UseModules is set to true or false

Calling the ngSubmit.emit() function does not alter the submitted property within the formGroup

What is the best way to bring in local modules within the browser environment using Playwright?

M.E.A.N - Suite for setting up and defining backend boundaries consisting of MongoDB, Express.js, Angular2, node.js

Wrapper for Material UI - leverage TypeScript types for a specific property

Navigating a relative path import to the correct `@types` in Typescript

Encountering a navCtrl problem in Ionic 3 while attempting to utilize it within a service

What is the best way to create an interactive experience with MapLibre GL in Full Screen mode?

The Angular Node server is responding with the error message "You have entered 'undefined' instead of a stream."

Issue with mat-selection-list search filter losing selections upon searching

Element is missing the necessary "key" property. (React and TypeScript)

Encountering a problem in Angular 2 when initiating a project

Guiding you through the process of dynamically defining a port in proxy.conf.json or proxy.conf.js

Discover the return types in Typescript by inferring from a collection of functions within an

How can I extract a value from an object that is readonly, using a formatted string as the key?

Searching for several arrays in Angular

A comprehensive guide on integrating rappid.js and joint.js into an Angular 2 application

Tips for eliminating hash from a URL in Angular 9

Mastering regular expressions in TypeScript

What steps are needed to generate a production version of a TypeScript monorepo application that can be deployed to an Azure Function App?