CODEWITHSUNDEEP
angularimplementsngoninitngondestroy
AdvApp
AdvApp

Reputation: 1170

Angular 2: Cannot find ngOnInit/ngOnDestroy

NOTE: I found the article cannot find OnInit in typescript during implementation but the code below is already importing OnInit/OnDestroy.

All the examples I've found (e.g., Using Route Parameters) indicate adding the implements OnInit/OnDestroy clause to the class definition and including the ngOnInit/ngOnDestroy methods when subscribing to obtain a parameter from the route -- which the code is doing.

However, VS2017 reports the error "incorrectly implements OnInit/OnDestroy" for the clause and reports the error "Cannot find ngOnInit/ngOnDestroy" for the functions.

If I remove the implements clause and comment the ngOnInit/ngOnDestroy functions (leaving only the code in the body of the ngOnInit), the code works; it successfully obtains the parameter from the route parameters.

import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
import { Http } from '@angular/http';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'submission',
    templateUrl: './submission.component.html'
})
export class SubmissionComponent implements OnInit, OnDestroy {
    private baseUrl: string;
    private http: Http;
    private route: ActivatedRoute;
    private sub: any;

    public caseId: string;
    public submission: Submission;

    constructor(http: Http, route: ActivatedRoute, @Inject('BASE_URL') baseUrl: string) {
        this.http = http;
        this.route = route;
        this.baseUrl = baseUrl;

        ngOnInit() {
            this.sub = this.route.params.subscribe(params => {
                this.caseId = params['caseId'];

                // In a real app: dispatch action to load the details here.
            });
        }

        ngOnDestroy() {
            this.sub.unsubscribe();
        }

        this.get(this.caseId);
    }

    public get(caseId: string) {
        var url = this.baseUrl + 'api/Submission/GetSubmission?caseId=' + caseId;
        this.http.get(url).subscribe(result => {
            this.submission = result.json() as Submission;
        }, error => console.error(error));
    }

    public put() {
        var url = this.baseUrl + 'api/Submission/PutSubmission';
        this.http.put(url, this.submission).subscribe(result => {
            this.submission = result.json() as Submission;
        }, error => console.error(error));
    }
}

Upvotes: 1

Views: 4887

Answers (2)

Andrey Seregin
Andrey Seregin

Reputation: 325

I can see from your code that ngOnInit and ngOnDestroy are inside constructor, so if you take it outside you should be fine.

Code example:

constructor(http: Http, route: ActivatedRoute, @Inject('BASE_URL') baseUrl: string) {
    this.http = http;
    this.route = route;
    this.baseUrl = baseUrl;
}

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.caseId = params['caseId'];

      this.get(this.caseId);

      // In a real app: dispatch action to load the details here.
    });
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

Generally, when adding ngOnInit and ngOnDestroy you should always check these steps:

  1. Check that you have imported OnInit and OnDestroy from 'angular/core'
  2. Then add them to class

  3. Add these functions

    import { OnInit, OnDestroy } from '@angular/core';
export class ComponentComponent implements OnInit, OnDestroy {
  ngOnInit(){}

  ngOnDestroy(){}
}

Upvotes: 3

lealceldeiro
lealceldeiro

Reputation: 14958

The methods ngOnInit and ngOnDestroy should be outside the constructor. Like this:

// imports ...

@Component({
  // ...
})
export class SubmissionComponent implements OnInit, OnDestroy {
  // ...

  constructor( /* ... */ ) {
    // ...
  }

  ngOnInit() {
    // ...
  }

  ngOnDestroy() {
    // ...
  }
}

Upvotes: 5

Related Questions