Typescript inheritance in Angular 5

Question

I am trying to extend some components with another class but I got

[Angular] Can't resolve all parameters for MyProjectsComponent in 'pathtomyproject'/src/app/my-projects/my-projects.component.ts: ([object Object], ?).

security.ts

import { Router} from '@angular/router';

export abstract class Security {

  constructor(
    protected router: Router
   ) { }

  isLogged() {
    if (!sessionStorage.getItem('user')) {
      this.router.navigate(['/login']);
    }
  }
}

my-projects.component

import { Component, OnInit } from '@angular/core';
import { RouterModule, Router, ActivatedRoute } from '@angular/router';

import { ProjectService } from './project.service';
import { Security } from '../security';

@Component({
  selector: 'app-my-projects',
  templateUrl: './my-projects.component.html',
  styleUrls: ['./my-projects.component.scss'],
  providers: [ProjectService],
})
export class MyProjectsComponent extends Security implements OnInit {

  projects: Array<any>;

  constructor(
    private projectService: ProjectService,
    protected router
  ) {
      super(router);
    }

  ngOnInit() {
    this.getProjects();
  }

  async getProjects() {
    const data: any = await this.projectService.getAll();
    this.projects = data._embedded.projects;
  }

  delete(id) {
    this.projectService.delete(id);
    this.getProjects();
  }

  edit(id) {
    const path = `/edit/${id}`;
    this.router.navigate([path]);
  }

}

Can you show your app.module.ts? RouterModule.forRoot() should be imported by the AppModule. If you import it in a feature module or a shared module that's lazy loaded, you could run into issues. Same is true if you've imported .forRoot multiple times. — Michael Kang
– Michael Kang, Commented Dec 19, 2017 at 9:38
Another possibility - check to make sure that @angular/router is installed - some simple things to rule out. — Michael Kang
– Michael Kang, Commented Dec 19, 2017 at 9:43
As I understand is that Angular cannot resolve the router. Can you try this: inject the Router like this public router: Router in the MyProjectsComponent constructor — alfredson
– alfredson, Commented Dec 19, 2017 at 9:49
@pixelbits yeah that was it, and I also changed the injection to router: Router as Daniomi wrote — Emilia Heller
– Emilia Heller, Commented Dec 19, 2017 at 10:24

Philipp Kief · Accepted Answer · 2017-12-19 09:56:31Z

1

There might be some issue in the constructor of the MyProjectsComponent. You misconfigured the dependency injection of the router. Change it to:

constructor(
  private projectService: ProjectService,
  protected router: Router // <-- DI for Router
) {
  super(router);
}

and then it should work.

I tried to reproduce your issue in this stackblitz:

https://stackblitz.com/edit/angular-aifdew

answered Dec 19, 2017 at 9:56

Philipp Kief

8,6745 gold badges36 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emilia Heller Over a year ago

It helped, I also needed to add RouterModule into my module file

Collectives™ on Stack Overflow

Typescript inheritance in Angular 5

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related