Marka83 commented 4 years ago

🐞 bug report

Is this a regression?

I don't know. I've tried with 9.0.7 and 9.1.0, but it works the same. I haven't tested earlier versions.

Description

We migrated application from 8.2.3 to 9.1. ng build and ng serve works as expected and application works with no errors. When we build with ng build --prod everything goes fine - no errors. But in production it throws this exception on loading of application:

Uncaught TypeError: Cannot read property 'ɵcmp' of undefined at Object.yA (vendor.a5630b07ff8c3731c011.js:1) at Object.mTkS (main.b71bfbef186c603a7db8.js:1) at a (runtime.081b9fa9cdbc29e694e9.js:1) at Object.vkcX (main.b71bfbef186c603a7db8.js:1) at a (runtime.081b9fa9cdbc29e694e9.js:1) at Object.j0Xk (main.b71bfbef186c603a7db8.js:1) at a (runtime.081b9fa9cdbc29e694e9.js:1) at Object.vtpD (main.b71bfbef186c603a7db8.js:1) at a (runtime.081b9fa9cdbc29e694e9.js:1) at Object.vY5A (main.b71bfbef186c603a7db8.js:1)

In vendor chunk. I explicitly set "vendorChunk": true, but even with false error is only reported in main.

🔬 Minimal Reproduction

I can't share code. I could only try to create some new project, but I would have to use every external library to try to find what is causing error.

🔥 Exception or Error


Uncaught TypeError: Cannot read property 'ɵcmp' of undefined
    at Object.yA (vendor.a5630b07ff8c3731c011.js:1)
    at Object.mTkS (main.b71bfbef186c603a7db8.js:1)
    at a (runtime.081b9fa9cdbc29e694e9.js:1)
    at Object.vkcX (main.b71bfbef186c603a7db8.js:1)
    at a (runtime.081b9fa9cdbc29e694e9.js:1)
    at Object.j0Xk (main.b71bfbef186c603a7db8.js:1)
    at a (runtime.081b9fa9cdbc29e694e9.js:1)
    at Object.vtpD (main.b71bfbef186c603a7db8.js:1)
    at a (runtime.081b9fa9cdbc29e694e9.js:1)
    at Object.vY5A (main.b71bfbef186c603a7db8.js:1)

🌍 Your Environment

Angular Version:


Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.0.7
@angular/cdk                      9.0.1
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Marka83 commented 4 years ago

{ "name": "xxx", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "stats": "webpack-bundle-analyzer dist/xxx/stats.json", "build": "ng build", "test": "ng test", "sme": "source-map-explorer", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "9.0.7", "@angular/cdk": "9.0.1", "@angular/common": "9.0.7", "@angular/compiler": "9.0.7", "@angular/core": "9.0.7", "@angular/forms": "9.0.7", "@angular/localize": "9.0.7", "@angular/platform-browser": "9.0.7", "@angular/platform-browser-dynamic": "9.0.7", "@angular/platform-server": "9.0.7", "@angular/router": "9.0.7", "@ng-bootstrap/ng-bootstrap": "6.0.0", "@ng-select/ng-select": "3.7.3", "@ngx-translate/core": "12.1.2", "@ngx-translate/http-loader": "4.0.0", "ajv": "6.12.0", "bootstrap": "4.4.1", "chart.js": "2.9.3", "class-transformer": "0.2.0", "core-js": "3.6.4", "file-saver": "2.0.2", "json-ignore": "0.4.0", "ng2-charts": "2.3.0", "ngx-color-picker": "9.0.0", "ngx-toastr": "12.0.0", "pdfmake": "0.1.65", "print-js": "1.0.63", "reflect-metadata": "0.1.13", "rxjs": "6.5.4", "tslib": "1.11.1", "xlsx": "0.15.6", "zone.js": "0.10.3" }, "devDependencies": { "@angular-builders/custom-webpack": "9.0.0", "@angular-devkit/build-angular": "0.900.7", "@angular/cli": "9.0.7", "@angular/compiler-cli": "9.0.7", "@angular/language-service": "9.0.7", "@biesbjerg/ngx-translate-extract": "6.0.3", "@types/jasmine": "3.5.9", "@types/jasminewd2": "2.0.8", "@types/node": "13.9.2", "codelyzer": "5.2.1", "jasmine-core": "3.5.0", "jasmine-spec-reporter": "4.2.1", "karma": "4.4.1", "karma-chrome-launcher": "3.1.0", "karma-cli": "2.0.0", "karma-coverage-istanbul-reporter": "2.1.1", "karma-jasmine": "3.1.1", "karma-jasmine-html-reporter": "1.5.2", "rxjs-tslint": "0.1.7", "source-map-explorer": "2.4.0", "ts-node": "8.7.0", "tslint": "5.20.1", "typescript": "3.7.5" } }

Marka83 commented 4 years ago

It has to do something with AOT. When I disable "optimization": false, "aot": false, "buildOptimizer": false,

Everything works as expected If i set aot:true, it doesn't work anymore.

flash-me commented 4 years ago

Hi @Marka83

I encountered this error when I tried to load non AOT bundles without @angular/compiler being in the application. Are you trying to dynamically load components in your app?

When compiling with AOT, the runtime compiler is not available

cheers flash :zap:

alxhub commented 4 years ago

Hi @Marka83,

Sorry to hear you're having this issue! It sounds like one of the classes referenced as a component in your application is not actually a component at runtime.

Unfortunately, without more information on your setup (ideally a reproduction that allows us to debug the problem), we don't really have a good way of investigating this.

Marka83 commented 4 years ago

I did find out what is the problematic component. I'll investigate on monday and let you know about the details.

alxhub commented 4 years ago

@Marka83 thanks, appreciated!

Marka83 commented 4 years ago

I've found 2 problematic components. In both cases there was incorrect import

import { XComponent } from "src/app/x.component";
...
public componentType: ClassType<any> = XComponent;

In this case, programmer incorrectly imported component from wrong module and didn't even import that module. ng build --prod passes correctly, but in production this error appears.

Nehal-22-Sharma commented 4 years ago

It has to do something with AOT. When I disable "optimization": false, "aot": false, "buildOptimizer": false,

Everything works as expected If i set aot:true, it doesn't work anymore.

This changes has worked for me even though the project was build on 6.0.0 and i am running on 9.0 v after dealing with the devdependencies and hitting npm install this worked on for me thanks marks83

Marka83 commented 4 years ago

@Nehal-22-Sharma Disabling AOT was just a temporary solution. Problem is somewhere in the code. For us, it was incorrect import.

Vandana0025 commented 4 years ago

@Nehal-22-Sharma Had the same issue. For me it turned out to be an unsupported Library. I deleted node modules, cleared the cache, installed the latest Libraries and the error was gone. Worth a try if you are still stuck.

Hydhen commented 4 years ago

I've found 2 problematic components. In both cases there was incorrect import
import { XComponent } from "src/app/x.component";
...
public componentType: ClassType<any> = XComponent;
In this case, programmer incorrectly imported component from wrong module and didn't even import that module. ng build --prod passes correctly, but in production this error appears.

I'm having the same issue, could you explain more about the import error you faced ? I don't see any trouble with mine so far...

Marka83 commented 4 years ago

@Hydhen In our case, programmer used wrong component. I.e. he referenced some external component in his y.component.ts file, but he never did import the module where that component resides:

@NgModule({
  declarations: [
    ...
  ],
  imports: [ ...

Hydhen commented 4 years ago

@Marka83 Thanks, it helped me to solve my issues, for me the ngCli did a weird import after generating my component, miss-matching or redundant name used I guess. Short story, it was also an import issue.

alxhub commented 4 years ago

Hey all,

Given that a few people have reported experiencing a similar issue and understand what's going on, could one of you create a small reproduction? I'd love for our compiler to be able to catch this.

Marka83 commented 4 years ago

Sure, I'll try to prepare solution today.

Marka83 commented 4 years ago

Strange. I can't reproduce it on a simple solution. Maybe @Hydhen can also give it a try?

Hypenate commented 4 years ago

When resolving a non existing component, this issue seems to arise:

Component:


@Component({
  selector: 'app-dynamic-component',
  templateUrl: './dynamic-component.html',
  styleUrls: ['./dynamic-component.css']
})
export class DynamicComponent implements OnInit {

  @ViewChild('dynamicComponent', { static: true, read: ViewContainerRef }) public dynamicComponent: ViewContainerRef;
  @Input() public componentName: string;

  constructor(
    private _componentFactoryResolver: ComponentFactoryResolver) { }

  public ngOnInit(): void {
    this.createComponent();
  }

  private createComponent(): void {
      const componentFactory = this._componentFactoryResolver.resolveComponentFactory(undefined); // ! This causes the error
      this.dynamicComponent.createComponent(componentFactory);
  }
}

HTML: <ng-template #dynamicComponent></ng-template>

If you would then in another component's HTML use <app-dynamic-component></app-dynamic-component> the error is thrown.

Splaktar commented 4 years ago

When resolving a non existing component, this issue seems to arise

I see this as well when creating dynamic components for a form. But it happens when the component passed into resolveComponentFactory() is defined.

I haven't been able to determine the cause and it only happens on rebuilds in the Angular CLI after I make a change. I updated to the latest Angular versions and updated my libraries, but the issue remains. I checked the paths of the related components and directives, but they all seem valid. I haven't been able to check all ~1000 TS files in the project though.

I haven't been able to create a reproduction (which will have to be in a GitHub repo and not StackBlitz).

Splaktar commented 4 years ago

Oh one more note, I do get these Circular dependency warnings from the related components:

WARNING in Circular dependency detected:
src/app/core/components/dynamic-form-element/dynamic-form-element-component.ts -> src/app/core/directives/dynamic-form-element/dynamic-form-element.directive.ts -> src/app/core/components/tab/tab.component.ts -> src/app/core/components/dynamic-form-element/dynamic-form-element-component.ts

WARNING in Circular dependency detected:
src/app/core/components/tab/tab.component.ts -> src/app/core/components/dynamic-form-element/dynamic-form-element-component.ts -> src/app/core/directives/dynamic-form-element/dynamic-form-element.directive.ts -> src/app/core/components/tab/tab.component.ts

WARNING in Circular dependency detected:
src/app/core/directives/dynamic-form-element/dynamic-form-element.directive.ts -> src/app/core/components/tab/tab.component.ts -> src/app/core/components/dynamic-form-element/dynamic-form-element-component.ts -> src/app/core/directives/dynamic-form-element/dynamic-form-element.directive.ts

In my case, the failure occurs when DynamicFormElementDirective tries to call createComponent() on TabComponent which uses DynamicFormElementComponent in its template.

Solving these Circular dependency issues did not resolve this exception though.

Splaktar commented 4 years ago

It looks like https://github.com/angular/angular-cli/pull/16992 fixed a similar issue in @ngtools/webpack.

Splaktar commented 4 years ago

I've got some additional information to add after looking into this a good deal more.

It only happens for me on rebuilds via the CLI and ng serve. The first build always works, so the workaround is to restart ng serve every single time that you modify a .ts file in the CoreModule.

On that note, rebuilds that only include SCSS, CSS, HTML work fine. Only TypeScript rebuilds fail. Now that I've looked into this some more, it's not all TypeScript rebuilds that fail. Feature module rebuilds seem to work fine. It's only when the CoreModule is changed and the rebuild has a wider scope that we see this failure.

14 unchanged chunks
chunk {main} main.js, main.js.map (main) 775 kB [initial] [rendered]

One difference from the norm on this project is that we've set the following in our build defaults in angular.json:

            "commonChunk": false,

While the OP only sees this in production, I only see this in dev mode builds and prod builds are not affected. Currently 2 developers on the project are able to reproduce/observe this issue (a major productivity drain).

Here are my related dependencies and dev dependencies:

    "@angular/animations": "^10.0.14",
    "@angular/cdk": "^10.1.3",
    "@angular/common": "^10.0.14",
    "@angular/compiler": "^10.0.14",
    "@angular/core": "^10.0.14",
    "@angular/forms": "^10.0.14",
    "@angular/material": "^10.1.3",
    "@angular/platform-browser": "^10.0.14",
    "@angular/platform-browser-dynamic": "^10.0.14",
    "@angular/platform-server": "^10.0.14",
    "@angular/router": "^10.0.14",
    "@angular/service-worker": "^10.0.14",

    "@angular-devkit/build-angular": "~0.1000.8",
    "@angular/cli": "^10.0.8",
    "@angular/compiler-cli": "^10.0.14",
    "@angular/language-service": "^10.0.14",

Additionally, this error does not show up in the terminal and is only visible in the browser window on reload.

This error also seems to be masked by the following exception, related to a custom pipe, in our case:

core.js:4197 ERROR Error: The pipe 'visible' could not be found!
    at getPipeDef$1 (core.js:24656) [angular]
    at Module.ɵɵpipe (core.js:24619) [angular]
    at TabComponent_Template (tab.component.html:7) [angular]
    at executeTemplate (core.js:7303) [angular]
    at renderView (core.js:7112) [angular]
    at renderComponent (core.js:8373) [angular]
    at renderChildComponents (core.js:6971) [angular]
    at renderView (core.js:7137) [angular]
    at ComponentFactory$1.create (core.js:22192) [angular]
    at ViewContainerRef.createComponent (core.js:10108) [angular]

Note that this custom pipe is declared and exported from the CoreModule and the TabComponent mentioned in the error, which is being dynamically created, is in the same CoreModule.

Previously if I commented out import 'zone.js/dist/zone-error'; in environment.ts, then I start seeing this exception:

Uncaught TypeError: Cannot read property 'ɵcmp' of undefined

But I'm having trouble reproducing this error atm.

Splaktar commented 4 years ago

Removing "commonChunk": false, didn't seem to help, but removing "aot": true, from our dev build config appears to have fixed it. This was added during the update to Angular v9 though and it hasn't been a problem since February until some changes that we made about 2 weeks ago.

Perhaps this is not a problem in production (yet) since we only do that build once.

flash-me commented 4 years ago

@Splaktar If you or the two other devs are able to reproduce it, I'd appreciate if you may provide a repro with minimal code!

This would be huge benefit!

cheers flash ⚡

Splaktar commented 4 years ago

@flash-me I agree. However, I can't figure out the root cause, so I'm not sure how to reduce the huge private repo to a minimal example. It's also hard to do a minimal example with dynamic component generation, multiple modules (AppModule, CoreModule, and feature modules), and Angular CLI builds (i.e. no StackBlitz, it would need to be a GitHub repo reproduction).

flash-me commented 4 years ago

@Splaktar yes I totally understand this. Wouldn't keep people that busy if it was sth. easy, right? 😅

But in order to do any progress here, I (we?) need at least something, if not a repro case. Any information may help. So anyone running across this issue, following points:

Disable buildOptimizer & optimization for this!
Where is the component / pipe / directive located and where is it used? (Different NgModule? Compiled Library? path mapping with tsconfig?)
Is AOT enabled / disabled? Is IVY enabled / disabled?
When does the error appears? On Rebuild of ng serve? On compiled bundles?

If error appears with compiled bundles You probably can't upload the main.js bundle, but you may open it and search for the class name of the component and post the compiled code of that class or give a hint if something seems to be missing...

If error appears with ng serve Even though the bundles are not written to the file system, you can still access them in the browser and open it there.

Example

This is the sourcecode of a SampleComponent:

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

@Component({
    selector: 'my-sample',
    templateUrl: 'sample.component.html',
})
export class SampleComponent implements OnInit {
    private _anotherProp = 'This is just a class field';

    ngOnInit(): void {
        console.debug(this._anotherProp);
    }
}

And its template:

<h1>This is a sample component</h1>
<p>There is no other purpose</p>

Ivy is enabled, AOT is enabled, Angular CLI version 9.1.10 The compiled output opened in the browser while ng serving:

Lets see if we can progress this way...

cheers flash ⚡

JoostK commented 3 years ago

@Splaktar are you seeing this error, assuming you are using AOT?

Since this issue is lacking a reproduction and there has not been recent signals this is still a problem, I am inclined to close this. I'll leave it open for a couple more days for people to chime in.

Splaktar commented 3 years ago

@JoostK our workaround in https://github.com/angular/angular/issues/36279#issuecomment-685922802 was to set aot: false for dev builds with Ivy enabled. We haven't changed that since Sept 2020 since we haven't received any kind of assistance or help in debugging this. I haven't been able to create a separate reproduction.

We're currently on 11.2.10, I'll give AOT dev builds another shot to see if this is still an issue...

Splaktar commented 3 years ago

Based on my testing today, it appears that this is no longer reproducible in 11.2.13. I'll file another issue if this pops up again.

JoostK commented 3 years ago

Based on my testing today, it appears that this is no longer reproducible in 11.2.13. I'll file another issue if this pops up again.

Thank you for testing. There have been fixes to incremental compilations in both the compiler and the CLI so these may well have resolved the broken recompiles.

JoostK commented 3 years ago

Based on the confirmation that this issue no longer occurs in incremental rebuilds and that there's otherwise no reproduction, I'll go ahead and close this. Please open a new issue if a similar issue occurs, including a reproduction so we can investigate.