Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
gowthamr123 opened this issue Oct 8, 2018 · 5 comments
Closed

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

gowthamr123 opened this issue Oct 8, 2018 · 5 comments
Labels
area: devkit/build-angular
Milestone
needsTriage

Comments

@gowthamr123
Copy link

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 alan-agius4 added the needs: repro steps We cannot reproduce the issue with the information given label Oct 9, 2018
@alan-agius4
Copy link
Collaborator

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
Copy link
Author

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

@alan-agius4 alan-agius4 added area: devkit/build-angular and removed needs: repro steps We cannot reproduce the issue with the information given labels Oct 9, 2018
@ngbot ngbot bot added this to the needsTriage milestone Oct 9, 2018
@filipesilva
Copy link
Contributor

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
Copy link

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
Copy link

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-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: devkit/build-angular
Projects
None yet
Milestone
needsTriage
Development

No branches or pull requests
4 participants
@gowthamr123 @filipesilva @jnorman67 @alan-agius4