Angular: Cannot read property 'call' of undefined (when bootstrapping)

Question

Check the update on the bottom!

I have a service that throws an error while the app is bootstrapping. Cannot read property 'call' of undefined. I'm using ng2 2.4.2 and angular-cli 1.0.0-beta.24.

ERROR

Uncaught TypeError: Cannot read property 'call' of undefined at webpack_require (bootstrap 81b10f8…:52) at Object.621 (environment.ts:8) at webpack_require (bootstrap 81b10f8…:52) at Object.450 (src async:7) at webpack_require (bootstrap 81b10f8…:52) at Object.1057 (util.service.ts:35) at webpack_require (bootstrap 81b10f8…:52) at webpackJsonpCallback (bootstrap 81b10f8…:23) at main.bundle.js:1

As you can see it's a problem with the util service - this looks as follows:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Project } from '../datatypes/';
import { Response } from '@angular/http';


@Injectable()
export class UtilService {
    constructor(private router: Router) {}

    public redirectToProject(project: Project) {
        let query = project.ProjectName.split(' ')
            .join('-')
            .concat('-' + project.Id)
            .toLowerCase();
        this.router.navigate(['/project', query]);
    }

    public extractData(res: Response) {
        let body = res.json();
        return body || {};
    }
}

Strange: When inspecting the source file in chrome it has no syntax highlighting, which would suggest a syntax error - in my opinion there's none though.

Update January 20. 2017

I updated to ng2.4.4 and angular-cli 1.0.0-beta26. The problem is still the same. While playing around, Arjan found out that it works with beta 21. Will have to check the changes. The problem now isn't in the service above but in the environment.ts file (which has all the defaults).

Answer 1

I think it happens when you make changes to module imports during run time.

Run the application again using ng serve and it fixed the issue for me.

It may also occur when you try to use components of lazy loaded modules in other modules before the lazy module getting loaded or such similar scenarios.

Answer 2

For me, this was caused by using our own client-side JavaScript to dynamically load the webpack-generated bundles. That was easily fixed in our own loader script.

When using webpack, a regular Angular 2 index.html does not include any <style> or <script> elements, but just <app-root></app-root>. When running ng serve or ng build, the file is enhanced server-side to add something like the following to the end of the file:

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

...or, for ng build --prod:

<link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
...
<script type="text/javascript" src="inline.66e3ead788094772ecc4.bundle.js"></script>
<script type="text/javascript" src="polyfills.477266e3ead78809ecc4.bundle.js"></script>
<script type="text/javascript" src="vendor.18c581546c015d1bfc6e.bundle.js"></script>
<script type="text/javascript" src="main.9a5c1002f220245829cd.bundle.js"></script>

The resulting server-side HTML file is sent to the browser. And browsers will run <script> elements already present in the HTML in the order in which they are encountered.

But that's different when adding those <script> elements client-side, dynamically at runtime, which by default will be executed asynchronously. See the notes on "parser-inserted scripts" and "script-inserted scripts" on MDN's script page.

In our case we're including the Angular 2 application into pages in our CMS. To avoid having to change the CMS page whenever we release a new version (which will change the hashes in the names of the generated bundles), we're adding the bundles using our own JavaScript code. For a browser these are "script-inserted scripts". To ensure these are executed in the correct order, just set async to false (setting defer did not do the trick for me):

var script = document.createElement('script');
script.async = false;
script.src = ...

Or, when using document.write, ensure it includes the async="false" attribute:

document.write(unescape('%3Cscript async="false" src="..." %3E%3C/script%3E'));

(Fun fact: beware that Chrome 55 and later might skip these blocking scripts on slow connections, if they are hosted on a different domain.)

Without this, things most often were fine up to angular-cli 1.0.0-beta.21, though we did see an occasional "Can't find variable: webpackJsonp". For later versions different errors might show, depending on which script is executed first, and which browser is used. Like:

Cannot read property 'call' of undefined
TypeError: modules[moduleId] is undefined
ReferenceError: Can't find variable: webpackJsonp
TypeError: undefined is not an object (evaluating modules[moduleId].call')
Unable to get property 'call' of undefined or null reference

Also note that vendor.bundle.js and polyfills.bundle.js were not used in older versions. And the scripts might need to be inserted somewhere below the <app-root> element.

Answer 3

Finally I found the answer - works with beta.32.3. We have to use these files:

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

It's also important to update the local and the global package. Updating globally is described well on their github page. Updating locally is easy too - simply update the dependency in your package.json.

Important: Since beta.29 angular cli is the package @angular/cli, not angular-cli anymore..

Answer 4

In my case, I needed to make sure that I had the script tags in the right order.

  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="scripts.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>

Answer 5

I had a similar issue. I updated to @angular-cli (1.0.0-rc.2) and @angular/core(2.4.9) and followed Sandrooco's solution. However, there is an additional file polyfills.bundle.js required to work.

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

I hope it helps.

Answer 6

Changing the port for some reason solved this for me ng serve --port 4300