Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined in angular 10

Question

I am getting this error Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined in angular when trying to load the app I just compiled with --prod flag with both optimization and buildOptimizer set as true, when I set both to false the issue disappear and application is loading without issues but the application size is bigger and performance isn't as expected, I need to build a production with both optimization and buildOptimizer set as true, anyone have a good solution to this issue?

angular.json file :

            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }

My Code in .ts to load dynamic component and this part not work when production angular application and have pervious error :

//Directive created
  @ViewChild(RequestsDirective) tabHost: RequestsDirective;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef,
    public requestsMainService: RequestsMainService,
    private spinner: NgxSpinnerService) { }

  ngOnInit(): void { }

  // Load Component in ng template  and set request name in services and hide category - request type part
  async loadTabComponent(_requestid: number, _requestname: string) {
    //debugger;
    // to set request name dynamic in all requests
    this.requestsMainService.RequestName = _requestname;
    // Hide Category And Requests type
    $('#div_main').hide('slow');

    // Search in App Model about component name
    const factories = Array.from( 
        this.componentFactoryResolver['ngModule']
            .instance.constructor.ɵmod.declarations
    );
    const factoryClass = factories.find(
        (x: any) => x.name === ('Request1Component')
    ) as Type<any>;

    // clear any previous component
    this.viewContainerRef.detach();
    this.viewContainerRef.clear();
    // get dynamic component by name
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
    // load it in ng template
    this.viewContainerRef = this.tabHost.viewContainerRef;
    this.viewContainerRef.createComponent(componentFactory);
  }

Note

Request1Component this name of component I want to load it dynamic

Digiovanni

does this issue seem like what you are having ? #62013602 – Indebtedness

@Indebtedness no my issue deferent i want to load component which name created dynamic in type script and load this component in <ng-template> – Digiovanni

I am having the same problem and I believe it is only happening in Angular 9 due to the new ivy compiler. So far have not been able to find a clear solution to this issue.. This post was helpful but I was not able to get it to work github.com/angular/angular/issues/33715 – Doily

@Digiovanni i have formatted the code, but its still unclear - which line is throwing the error you are getting ? – Indebtedness

@Indebtedness my issue when use ComponentFactoryResolver to load dynamic component in production and getting this error Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined in angular in line ` this.componentFactoryResolver['ngModule'].instance.constructor.ɵmod.declarations` – Digiovanni

I got this error because I had a wrong component (non-existing) imported in my test file. I changed the name of the original one, but for some reason test file remained untouched – Leveret

I'm receiving this error too, but it's not in a Promise: TypeError: Cannot read properties of undefined (reading 'ɵcmp'). After digging through the angular source code, it seems to be that the imports for one particular component are not resolving correctly: the NgIf resolves to a value, and then the other dependency is marked as null. I haven't been able to figure out why it would import as null since I am using that same component in other components... – Premedical

Answer 1

I was faced this error while used microfrontends with NX on angular 15, and it was happened because some of components inside the shared lib were not exported from index.ts file. Just check the index.ts files which component you forgot to export.

Balsamic

same issue, thank you. – Peppergrass

Answer 2

If you are importing components from an Angular library project, please double-check for circular dependencies. One common cause of this error is having circular dependencies in your project.

Baier

Had this similar issue where I had some circular dependencies between a parent and child components and a service imported in both, which was also importing one of the components. – Sarita

Answer 3

this issue happens when you try to create/add/attach an undefined component to an existing component ref

change this line:

this.viewContainerRef.createComponent(componentFactory);

to this:

if (factoryClass != undefined) this.viewContainerRef.createComponent(factoryClass);

*note 1:

you don't need to use componentFactoryResolver.resolveComponentFactory() for createComponent() anymore it is deprecated, you should simply pass the class reference directly to createComponent()

*note 2:

when passing a value to viewContainerRef.createComponent() always check if it is undefined if it is not (maybe the class was not registered or created yet) - then don't add it, or replace it with some place holder component

Adenaadenauer

Answer 4

In my case I had:

A - standalone, wraps <svg> to make custom icon
B - standalone, wraps A, injects ngrx store and sets inputs of A based on the result
C - regular, in module, uses A and B and also injects store
D - regular, unrelated module, loaded later, also uses A and B

And the culprit was that when B was importing A it did so via a barrel file.
One of other imports in that barrel was causing issues.

Rambling

Answer 5

I had this issue using Angular 17 and Angular Material:

• Have a standalone component A
• Open another standalone component B inside a MatDialog
• Referencing another standalone component C inside component B caused this issue to appear (when commenting out the reference to component C, the error disappeared)

What solved it for me was to convert standalone component A to an oldschool module and component (pre standalone).

Subtotal

Can you please explain what you mean by oldschool module and component? – Giaour

With "oldschool module and component" I am refering to pre standalone components @Giaour – Subtotal

I have standalone A and B and regular C. B imports A, C imports A and B. Error disappears if I remove A from B. No clear solution yet. B is injecting ngrx store - may be a culprit – Rambling

Answer 6

I also had it when testing my library on local using npm link. Instead of running the npm link command from the library in dist folder, I was running it from the library in projects folder.

Finitude