I'm currently working on a project using Angular. One of my methods involves dynamically creating a component, but I'm encountering difficulties when trying to use directives like ngClass and ngIf from the CommonModule within this component.
Here's an example of the issue:
See the error when using ngIf or ngClass within the dynamically loaded component
WHAT I'VE TRIED SO FAR:
- I've already imported the CommonModule in my app.module.ts file
- The CommonModule is also imported in my display component, where I can successfully use ngIf and ngClass without any problems
- I can import any component without any errors, as long as I'm not using directives from the CommonModule in the HTML
- I attempted to import an instance of NgModule through the component factory createComponent function as outlined in the Angular documentation.
Check out the Angular documentation on component factory createComponent for more details
I've spent countless hours on this issue and I suspect it's related to my usage of the createComponent method.
Please, I need assistance!
Here's a snippet from my app.module.ts file:
import { NgModule } from '@angular/core';
import { BrowserModule, HammerGestureConfig, HammerModule,
HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GoogleAnalyticsService } from
'./shared/services/googleanalytics'; // import our Google Analytics
service
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [AppComponent],
imports: [
CommonModule,
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
],
providers: [GoogleAnalyticsService],
bootstrap: [AppComponent],
})
export class AppModule {}
Here's a snippet from my Display component (Bdoc-a.component.ts):
// Code for Display component goes here
Here's a snippet from Logo1a.component.html:
// Code for Logo1a component HTML goes here
Here's a snippet from Logo1a.component.ts:
// Code for Logo1a component TypeScript logic goes here
Here's a snippet from Logo1a.module.ts:
// Code for Logo1a module definition goes here
After dynamically importing the module instead of the component in my Angular 10 app, I encountered this error:
ERROR Error: Uncaught (in promise): Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property. ....