ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘call’ of undefined in Angular Universal

Explanation of the problem

In the current implementation of the Angular 8 application, lazy loading of routes is not functioning properly when utilizing the new behavior of the loadChildren parameter. The issue is indicated by the following error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (/my-app/fronttest/dist/server.js:137764:30)
    at Function.requireEnsure [as e] (/my-app/fronttest/dist/server.js:137783:25)
    at ɵ0 (/my-app/fronttest/dist/server.js:137913:38)
    at RouterConfigLoader.loadModuleFactory (/my-app/fronttest/dist/server.js:150015:39)
    at RouterConfigLoader.load (/my-app/fronttest/dist/server.js:150000:35)
    at MergeMapSubscriber.project (/my-app/fronttest/dist/server.js:149003:47)
    at MergeMapSubscriber._tryNext (/my-app/fronttest/dist/server.js:37063:27)
    at MergeMapSubscriber._next (/my-app/fronttest/dist/server.js:37053:18)
    at MergeMapSubscriber.Subscriber.next (/my-app/fronttest/dist/server.js:33575:18)
    at Observable._subscribe (/my-app/fronttest/dist/server.js:35645:20)
    at resolvePromise (/my-app/fronttest/dist/server.js:1000:31)
    at resolvePromise (/my-app/fronttest/dist/server.js:957:17)
    at /my-app/fronttest/dist/server.js:1061:17
    at ZoneDelegate.invokeTask (/my-app/fronttest/dist/server.js:571:31)
    at Object.onInvokeTask (/my-app/fronttest/dist/server.js:28531:33)
    at ZoneDelegate.invokeTask (/my-app/fronttest/dist/server.js:570:60)
    at Zone.runTask (/my-app/fronttest/dist/server.js:343:47)
    at drainMicroTaskQueue (/my-app/fronttest/dist/server.js:749:35)
    at ZoneTask.invokeTask (/my-app/fronttest/dist/server.js:650:21)
    at Server.ZoneTask.invoke (/my-app/fronttest/dist/server.js:635:48)

The issue occurs when using the following loadChildren definition in the routes:

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule),
    //loadChildren: './home/home.module#HomeModule',
  }
];

Expected Behavior: The routes should be lazy loaded.

Current Behavior: The routes are not being

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘call’ of undefined in Angular Universal

This error occurs when there is an issue with a component or service in your Angular application that is trying to call a property or method that is undefined. To resolve this error, you can try the following steps:

1. Check the component/service that is causing the error and make sure it is imported correctly and all required dependencies are installed.
2. Ensure that the property or method that is being called is defined in the component/service and has the correct syntax and data type.
3. Check for any typos or incorrect names in the component/service and fix them.
4. Make sure that the component/service is being declared in the appropriate module and is being imported and exported correctly.
5. Clear the cache and restart the development server to see if the issue is resolved.
6. If the issue persists, try updating the version of Angular being used or try implementing the component/service in a different way.

Other popular problems with Angular Universal

Problem: Missing Polyfills or Unsupported Features in Server-Side Rendering Problem

Angular Universal depends on server-side rendering for initial loading of web pages. This can cause issues if some of the features used in the application are not supported on the server-side.

Solution:

One way to address this is to add polyfills for the missing or unsupported features. The polyfills can be added to the “polyfills.ts” file in the project, which is responsible for loading the necessary polyfills for the application. Here’s an example of adding a polyfill for the “window” object:

import 'core-js/features/global/window';

It’s also important to check the browser compatibility matrix provided by Angular to see if any polyfills are needed.

Problem: Difficulty Debugging Server-Side Rendered Pages

Debugging server-side rendered pages can be difficult as the source code is not accessible on the server. This makes it hard to diagnose and fix issues with server-side rendering.

Solution:

To debug server-side rendered pages, you can use the “ng serve” command with the “–aot” flag. This will compile the application ahead-of-time and make it possible to debug the server-side code using the browser’s developer tools. You can also use the “ng build” command to build the application for production, which will include source maps for easy debugging.

Here’s an example of using the “ng serve” command with the “–aot” flag:

ng serve --aot

Problem: CORS (Cross-Origin Resource Sharing) Issues with API Requests

When making API requests from the server-side in Angular Universal, CORS issues can arise if the API server does not allow requests from the client’s domain.

Solution:

One way to address this issue is to make API requests from the client-side using the HttpClient module, which automatically handles CORS issues. You can also set up a proxy server to handle API requests and bypass CORS restrictions.

Here’s an example of setting up a proxy server in the “proxy.conf.json” file in your Angular project:

{
  "/api": {
    "target": "https://api.example.com",
    "secure": false
  }
}

And here’s an example of using the proxy server in the “serve” script in the “package.json” file:

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json"
}

A brief introduction to Angular Universal

Angular Universal is a technology that allows Angular applications to run on a server, generating fully rendered pages that can be served to the browser. The purpose of this is to provide improved performance, search engine optimization (SEO), and improved perceived loading times for web applications.

Angular Universal works by rendering the application on the server-side, producing a complete HTML document, which is then sent to the browser for display. This allows for the initial content to be displayed much faster, improving the user experience and helping with SEO, as the search engine crawlers can index the server-generated pages. Additionally, Angular Universal also allows for pre-rendering pages, providing improved performance for users and better perceived loading times.

Most popular use cases for Angular Universal

1. Server-side rendering: Angular Universal enables server-side rendering (SSR) of Angular applications, allowing the application to be rendered on the server before sending the fully-formed HTML to the client. This helps to improve the initial loading performance of the application, especially for users with slower internet connections. The following code block demonstrates how to implement server-side rendering in an Angular Universal application:

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule { }

2. Improved search engine optimization (SEO): Angular Universal provides improved SEO capabilities for Angular applications by rendering the complete HTML on the server. This allows search engine crawlers to index the application’s content more easily and accurately, which can improve the visibility of the application in search results. The following code block demonstrates how to configure an Angular Universal application to improve SEO:

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { REQUEST } from '@nguniversal/express-engine/tokens';

@Injectable({
  providedIn: 'root'
})
export class SEOService {
  constructor(
    private title: Title,
    private meta: Meta,
    @Inject(REQUEST) private request: Request
  ) { }

  setTitle(title: string) {
    this.title.setTitle(title);
  }

  setMetaTags(metaTags: { name: string, content: string }[]) {
    metaTags.forEach(tag => this.meta.updateTag({ name: tag.name, content: tag.content }));
  }
}

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

@Component({
  selector: 'app-root',
  template: `
    <h1 [innerHTML]="title"></h1>
    <nav>
      <a [routerLink]="['/']">Home</a>
      <a [routerLink]="['/about']">About</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  title = 'My Angular Universal App';
}