Angular service providing components (TypeScript error)

This is my first time trying to dynamically inject components and so far, I've been successful. However, there's an error in Typescript that's bothering me (I don't like having errors in my code).

If you want to check out the app, here's the link: https://stackblitz.com/edit/angular-vrtr51?embed=1&file=src/app/app.component.ts

My aim was to create a service that can provide any component I need so that I can inject it from anywhere (especially for a widget-based website).

However, I'm seeing this error message in the console: error TS2339: Property 'data' does not exist on type '{}'.

You can find this error in app.component.ts at line 35.

The code is functioning properly, but I'd like to understand why this error is occurring.

Thank you!

angulartypescript

Answer №1

const componentFactory = this.resolver.resolveComponentFactory(this.componentProvider.get('header'));

Upon examining the type of componentFactory, you will find that it is ComponentFactory<{}>. This is due to the service returning a type of any when fetching the component type.

export class ComponentProviderService {
  public get(id): any {
    console.log(this.componentMap[id]);
    return this.componentMap[id];
  }
}

On line 30, by creating the component using componentFactory's type, which is implicitly ComponentFactory<{}>, the resulting comRef is of type ComponentRef<{}>. The error arises from the property instance having a type of {}.

To resolve this issue, replace line 29 with 

const componentFactory = this.resolver.resolveComponentFactory(HeaderComponent);

With this change, componentFactory now has an explicit type of 

ComponentFactory<HeaderComponent>
, resulting in comRef being of type 
ComponentRef<HeaderComponent>
and the property instance being of type HeaderComponent.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`How to Merge Angular Route Parameters?`

In the Angular Material Docs application, path parameters are combined in the following manner: // Combine params from all of the path into a single object. this.params = combineLatest( this._route.pathFromRoot.map(route => route.params) ...

javascriptangulartypescriptrxjs

Tips for optimizing Angular source code to render HTML for better SEO performance

Our web platform utilizes Angular JS for the front-end and node js for the backend, creating dynamic pages. When inspecting the code by viewing the source, it appears like this: For our business to succeed, our website needs to be SEO-friendly in order to ...

javascripthtmlangularseo

What is the method for typing an array of objects retrieved from realmDB?

Issue: Argument type 'Results<Courses[] & Object>' cannot be assigned to the parameter type 'SetStateAction<Courses[]>'. Type 'Results<Courses[] & Object>' lacks properties such as pop, push, reverse, ...

typescriptreact-nativerealm

Troubleshooting: After Updating to Angular 8.3.5, App Module and Components Fail to Load in Angular Application

Recently, I attempted to upgrade our Angular 4 project to Angular 8. Following the migration guide provided by Angular, I made syntax changes. However, I encountered issues with styles not loading properly both locally and on Azure. To resolve this, I deci ...

angularwebpackangular8webpack-style-loaderangular-upgrade

Creating a data structure that filters out specific classes when returning an object

Consider the following scenario: class MyClass {} class MyOtherClass { something!: number; } type HasClasses = { foo: MyClass; bar: string; doo: MyClass; coo: {x: string;}; boo: MyOtherClass; }; type RemovedClasses = RemoveClassTypes& ...

typescripttypescript-typingstypescript-generics

Create a single datetime object in Ionic (Angular) by merging the date and time into a combined string format

I have a string in an ionic project that contains both a date and time, and I need to merge them into a single datetime object for sending it to the server const date = "Fri Jan 07 2022 13:15:40 GMT+0530 (India Standard Time)"; const time = " ...

angulartypescriptdatetimeionic-framework

A guide on efficiently storing and retrieving a webpage containing two angular2 components using local storage

I've been attempting to store and retrieve a page containing two angular2 components from local storage using the following code, but the component CSS is not being applied. Here is the code I'm using to save: localStorage.setItem('pageCon ...

javascriptangulartypescriptlocal-storage

The functionality of d3 transition is currently non-existent

I've encountered an issue with my D3 code. const hexagon = this.hexagonSVG.append('path') .attr('id', 'active') .attr('d', lineGenerator(<any>hexagonData)) .attr('stroke', 'url(#gradi ...

typescriptd3.js

Is it possible to efficiently utilize Map/Set in TypeScript/JavaScript when working with objects?

I'm currently transitioning from Java to TypeScript and I've encountered an issue with working with objects in hashmaps and hashsets. In Java, I would simply override the hashCode method to easily manipulate these data structures. Is there a simi ...

javascripttypescripthashmaphashset

What is the best way to display multiple HTML files using React?

Looking to develop a web application using React that consists of multiple HTML pages. For instance, login.html and index.html have been created and linked to URIs through the backend - resulting in localhost:8080/login and localhost:8080/index. However, R ...

htmltypescriptreact-nativejsxtsx

Saving the name and corresponding value of a selected option element into separate fields using Angular framework

I have implemented the following code to generate a select field. The ngModel is successfully updating the value, but I am also looking to capture the name of the selected option and store it in a different field. Is there a solution to achieve this? ( & ...

htmlangular

Disable Styling and Override Readonly CSS restrictions

What is the correct approach for customizing material design styling when input fields are disabled? Out of the Box Explore Angular Material Input Examples I managed to achieve my objective using the following CSS, but I am concerned if this is a recomm ...

angularangular-material

What is the method for utilizing a class variable without assigning a value to it initially

class testClass { student: { name: string, age: number } constructor(options?: any) { this.student = { name: '', age: 0 }; } setStudent(name:string, age:number) { this.student.name ...

typescript

Is there a way to specifically identify modified values in Angular forms?

When working with Angular forms, what is the best method to detect fields that have been changed and no longer contain their original values? ...

angularformbuilder

Bypass React Query execution when the parameter is null

I am facing an issue with a react query problem. I have a separate file containing all the queries: const useFetchApTableQuery = (date: string): UseQueryResult => { const axiosClient = axios.create() const fetchApTableQuery = async (): Promise<A ...

reactjstypescriptaxiosreact-query

I encountered a TS error warning about a possible null value, despite already confirming that the value

In line 5 of the script, TypeScript raises an issue regarding the possibility of gameInstanceContext.gameInstance being null. Interestingly, this concern is not present in line 3. Given that I have verified its existence on line 1, it is perplexing as to w ...

javascriptreactjstypescriptreact-hooks

The error message 'ReferenceError: MouseEvent is not defined' indicates that

Recently, I attempted to incorporate ng2-select into a project that relies on angular/universal-starter (TypeScript 2.x) as its foundation. (Interestingly, ng2-select worked perfectly fine when added to an angular-cli generated project.) However, upon ad ...

angulartypescriptwebpacktypescript2.0angular2-universal

The type 'elementfinder' cannot be assigned to a parameter of type 'boolean'

Currently, I am working on a function that checks if a checkbox is selected. If it's not checked, then the function should click on it. However, I encountered an error message stating "argument of type 'elementfinder' is not assignable to pa ...

typescriptprotractor

Sending data to templates in Angular 2 using @Input()

I can't seem to figure out what I'm doing wrong with my listing template. I am trying to make it more dynamic by passing parameters using []="" and @Input(). Here is an example: <div class="listing wrapper"> <div class="wrapper" ...

angular

Set the parameter as optional when the type is null or undefined

I need to create a function that can take a route and an optional set of parameters, replacing placeholders in the route with the given params. The parameters should match the placeholders in the route, and if there are no placeholders, the params should b ...

typescripttypescript-generics