Angular 8 throws a TS2339 error, yet the code is functioning perfectly and delivering the desired output

Question

Angular 8 throws a TS2339 error, yet the code is functioning perfectly and delivering the desired output

Upon compiling my code, I encountered the following error:

ERROR in src/app/home/home.component.ts:13:37 - error TS2339: Property 'name' does not exist on type 'string | Type'. Property 'name' does not exist on type 'string'.

13 this.pageName=route.component.name;

Surprisingly, the code works perfectly fine. The error only surfaces during the build process.

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

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
pageName;
constructor(private route: ActivatedRoute,
private router: Router) { 
  this.pageName=route.component.name;
}
ngOnInit() {
}
}

I've even attempted changing the ES version, but unfortunately, it did not resolve the issue.

angular typescript

Answer 1

Answer №1

Aside from the information shared in this post, you have the option to utilize the Route's data property to provide your components with route-specific custom data.

data:

This is additional developer-defined data sent to a component through ActivatedRoute. By default, no extra data is transmitted.

Relying on developer-defined data is considered the safe and practical approach because once an application is created for production, class names are assigned arbitrary identifiers that should not be depended upon.

For example:

Routing config

const routes: Routes = [
  // ...
  {
    path: 'home',
    component: HomeComponent,
    data: {
      page: 'Home Page',
      class: 'super-sweet-home',
      color: 'blue',
      // ....
    },
  }
];

Accessing the data

Solution 1: Inside a component, such as HomeComponent.

private subscription: Subscription;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.subscription = this.route.data.subscribe((data: any) => { 
        /* Data will be available after successful navigation */ 
    });
}

Solution 2: Using Router events with a singleton service, like SiteService

public readonly currentPageData = new Subject<any>();

constructor(private router: Router) {
this.router.events.pipe(filter(event => event instanceof ActivationEnd))
  .subscribe(event => {
    this.currentPageData.next((event as ActivationEnd).snapshot.data as any);
  });
}

In a component, you can then inject the service and subscribe to the currentPageData of the SiteService, for instance:

constructor(private siteService: SiteService) {
    this.siteService.currentPageData.subscribe((data) => {
      /* Handle the received data */
    });
}

Lastly, remember to always unsubscribe from subscriptions.😬

Answer 2

Aside from the information shared in this post, you have the option to utilize the Route's data property to provide your components with route-specific custom data.

data:

This is additional developer-defined data sent to a component through ActivatedRoute. By default, no extra data is transmitted.

Relying on developer-defined data is considered the safe and practical approach because once an application is created for production, class names are assigned arbitrary identifiers that should not be depended upon.

For example:

Routing config

const routes: Routes = [
  // ...
  {
    path: 'home',
    component: HomeComponent,
    data: {
      page: 'Home Page',
      class: 'super-sweet-home',
      color: 'blue',
      // ....
    },
  }
];

Accessing the data

Solution 1: Inside a component, such as HomeComponent.

private subscription: Subscription;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.subscription = this.route.data.subscribe((data: any) => { 
        /* Data will be available after successful navigation */ 
    });
}

Solution 2: Using Router events with a singleton service, like SiteService

public readonly currentPageData = new Subject<any>();

constructor(private router: Router) {
this.router.events.pipe(filter(event => event instanceof ActivationEnd))
  .subscribe(event => {
    this.currentPageData.next((event as ActivationEnd).snapshot.data as any);
  });
}

In a component, you can then inject the service and subscribe to the currentPageData of the SiteService, for instance:

constructor(private siteService: SiteService) {
    this.siteService.currentPageData.subscribe((data) => {
      /* Handle the received data */
    });
}

Lastly, remember to always unsubscribe from subscriptions.😬

Angular 8 throws a TS2339 error, yet the code is functioning perfectly and delivering the desired output

Answer №1

Similar questions

Whenever you run the ng (Angular) command, it automatically opens up a text editor for you

From JSON Schema to ng2-tree treemodel: Implementing in Angular 4

After compiling the code, a mysterious TypeScript error pops up out of nowhere, despite no errors being

Styles applied in the child component will have a cascading effect on the entire webpage

Consistent tree view nesting persists with each refresh

Utilizing Emotion CSS to incorporate images into buttons

React-querybuilder experiencing issues with validator functionality

Steps to reset Pipe in Angular 4

Encountering a Problem with vue-check-view Library in Typescript

The ngx-translate/core is throwing an error message that says: "HttpClient provider not found!"

Is there a way to reverse the color scheme on ngx-charts-heat-map?

Select numerous files and conveniently delete them using the angular delete button

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Why am I encountering issues accessing a child property in TypeScript?

Having trouble declaring a module in an npm package with Typescript?

The angular schematic workflow encountered an error while attempting to create a new project

Using `reduce` in TypeScript, you can organize an array of objects based on a shared property

You cannot call this expression. The type 'String' does not have any call signatures. Error ts(2349)

Steps for initiating a download for an Angular Progressive Web App

Steps for creating a dynamic validation using a new form control