Uncaught (in promise): Cannot read property 'call' of undefined

gowthamr123 commented 5 years ago

Versions

"devDependencies": { "@angular-devkit/build-angular": "^0.7.0-rc.0", "@angular/cli": "^6.2.3", "@angular/compiler-cli": "^6.1.8", "@angular/language-service": "^6.0.3", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "pre-commit": "^1.2.2", "protractor": "~5.3.0", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~2.7.2" }

Repro steps

Getting following error when using external angular elements (webcomponents) in my angular application.

error

It occurs only when building in production mode (ng build --prod), when optimisation is set true and with lazy loading.

orangeheaderfooter is a JS file that is generated as part of webcomponent. Following is the AppModule file of webcomponent.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';
import { OrangeHeaderComponent } from './orange-header/orange-header.component';
import { OrangeFooterComponent } from './orange-footer/orange-footer.component';

import { SelfCareHeaderDevModule } from './orange-header/selfcare/selfcare-header-dev/selfcare-header-dev.module';
import { SelfCareFooterDevModule } from './orange-footer/selfcare/selfcare-footer-dev/selfcare-footer-dev.module';

@NgModule({
  declarations: [
    AppComponent,
    OrangeHeaderComponent,
    OrangeFooterComponent
  ],
  imports: [
    BrowserModule,
    SelfCareHeaderDevModule,
    SelfCareFooterDevModule
  ],
  providers: [],
  entryComponents: [
    OrangeHeaderComponent,
    OrangeFooterComponent
  ]
})
export class AppModule { 

  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const header = createCustomElement(OrangeHeaderComponent, { injector: this.injector });
    customElements.define('orange-header', header);

    const footer = createCustomElement(OrangeFooterComponent, { injector: this.injector });
    customElements.define('orange-footer', footer);

  }
}

Following is the index.html of end application where I am using angular elements by including js files. This issue occurs when using lazy loading and ng build --prod.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MypCrm</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" type="text/css" href="/orangeheaderfooter/headerfooterStyles.css">
  <script type="text/javascript" src="/orangeheaderfooter/custom-elements-es5-adapter.js"></script>
  <script src="/orangeheaderfooter/orangeheaderfooter.js"></script>
  <script src="/orangeheaderfooter/assets/b2c-global-header-footer.min.js"></script>
</head>

<body>
  <app-root></app-root>

</body>

</html>

Desired functionality

ng build --prod should work correctly

alan-agius4 commented 5 years ago

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

gowthamr123 commented 5 years ago

Hi,

Please find the below repro-steps .

Git repo :

https://github.com/gowthamr123/repro-app

after running npm install do ng serve and go to below url :

http://localhost:4200/selfcare/tariff-change

It will work fine.

Now run in production mode ng serve --prod

Error occurs :

Uncaught (in promise): TypeError: Cannot read property 'call' of undefined TypeError: Cannot read property 'call' of undefined

filipesilva commented 5 years ago

Hi @gowthamr123, I looked at your repro and am sorry to say this isn't a usecase we support.

In https://github.com/gowthamr123/repro-app/blob/master/headerfooter/headerfooter.js, you import a whole additional webpack bundle. This causes the production build to stop working because both wepback builds interact similarly with the global scope.

jnorman67 commented 5 years ago

Can the Angular Element project be modified to produce an artifact that does include another webpack bundle? I am in this same spot -- I need to use Angular Elements in my Angular app.

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / angular-cli