Lazy-loading modules in SSR Angular 8 applications are currently unspecified

Question

Lazy-loading modules in SSR Angular 8 applications are currently unspecified

I am currently in the process of setting up my Angular 8 application to work with server-side rendering (SSR). However, I am encountering some undefined errors in webpack when running my application using ng serve, especially with lazy-loaded modules. Everything was functioning properly when I was using Angular 7, but after migrating to Angular 8, everything seems to be broken.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:137403:30)
    at Function.requireEnsure [as e] (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:137422:25)
    at ɵ11 (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:139660:6210)
    at RouterConfigLoader.loadModuleFactory (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:232758:39)

I have made adjustments to both the tsconfig and angular.json configurations, but I keep encountering the same error consistently. I have disabled Ivy as it was also causing issues during the build process. While I suspect a connection between these problems, I cannot confirm it at this point, so my focus is on getting things to work without Ivy.

ERROR in src/app/pages/search/search.module.ts(68,12): error TS-991010: Value at position 12 in the NgModule.importss of SearchModule is not a reference: [object Object]
src/app/app.module.ts(41,12): error TS-991010: Value at position 6 in the NgModule.importss of AppModule is not a reference: [object Object]

tsconfig.json

... (omitted for brevity)

I am compiling my application using npm run build:ssr and serving it with npm run serve:ssr. My main goal is to ensure that all modules and markup are rendered with SSR for SEO purposes. Any assistance in pinpointing the root cause of these issues would be greatly appreciated.

angular typescript webpack lazy-loading server-side-rendering

Answer 1

Answer №1

One issue arises from having two copies of Angular in the traditional Universal setup, leading to confusion within the lazy loading system.

To resolve this problem manually, follow these steps:

Modify package.json

Add --bundleDependencies all at the end of the value for build:client-and-server-bundles

Adjust server.ts

Delete the following lines

import {enableProdMode} from '@angular/core';     
import {ngExpressEngine} from '@nguniversal/express-engine';  
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
enableProdMode();
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

Then add

const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

Update main.server.ts

Include

export {ngExpressEngine} from '@nguniversal/express-engine';
export {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

Edit webpack.server.config.js

Insert

externals: {
 './dist/server/main': 'require("./server/main")'
}

For further details, check out: fix lazy loading and bundleDependencies

Answer 2

One issue arises from having two copies of Angular in the traditional Universal setup, leading to confusion within the lazy loading system.

To resolve this problem manually, follow these steps:

Modify package.json

Add --bundleDependencies all at the end of the value for build:client-and-server-bundles

Adjust server.ts

Delete the following lines

import {enableProdMode} from '@angular/core';     
import {ngExpressEngine} from '@nguniversal/express-engine';  
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
enableProdMode();
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

Then add

const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

Update main.server.ts

Include

export {ngExpressEngine} from '@nguniversal/express-engine';
export {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

Edit webpack.server.config.js

Insert

externals: {
 './dist/server/main': 'require("./server/main")'
}

For further details, check out: fix lazy loading and bundleDependencies

Answer 3

Answer №2

Encountered a similar issue and found a solution here: https://github.com/angular/universal/issues/1195. I was able to resolve it by following the steps outlined in this guide (https://github.com/angular/universal/blob/master/docs/v8-upgrade-guide.md), but excluding the --bundleDependencies all flag.

For those interested, here's a simple example using gCloud for SSR: https://github.com/jrodl3r/ng-fire-universal

Answer 4

Encountered a similar issue and found a solution here: https://github.com/angular/universal/issues/1195. I was able to resolve it by following the steps outlined in this guide (https://github.com/angular/universal/blob/master/docs/v8-upgrade-guide.md), but excluding the --bundleDependencies all flag.

For those interested, here's a simple example using gCloud for SSR: https://github.com/jrodl3r/ng-fire-universal

Answer 5

Answer №3

In short, I successfully got my project to work by simply removing the line enableProdMode(); from server.ts.

While this code was necessary for Angular 7, it seems that Angular 8 required some changes in the server.ts file.

To be safe, I created a backup file called server.bak.ts,
I then started a new blank project with SSR,
and finally copied the necessary code from the new project into the server.ts file.

Answer 6

In short, I successfully got my project to work by simply removing the line enableProdMode(); from server.ts.

While this code was necessary for Angular 7, it seems that Angular 8 required some changes in the server.ts file.

To be safe, I created a backup file called server.bak.ts,
I then started a new blank project with SSR,
and finally copied the necessary code from the new project into the server.ts file.

Lazy-loading modules in SSR Angular 8 applications are currently unspecified

Answer №1

Answer №2

Answer №3

Similar questions

Best Practices for Architecture and Routing in Angular 8 (suggestions)

As I attempt to log in, the GitHub API is sending back a message stating that authentication

Facing a problem with querying interfaces and types in TypeScript

Tips on changing the name of a property within an object using JavaScript

Higher-Order Component integrated with HTMLElement

Obtain information from a JSON file based on a specific field in Angular

Bringing in a directive to a component in Angular

Guide on utilizing the maven-exec-plugin to execute npm clean commands

Node.js is raising an error because it cannot locate the specified module, even though the path

Testing Next.js's getServerSideProps function with Jest: A Step-by-Step Guide

What are the steps to resolve the error "Module parse failed: Unexpected character '�' (1:0)"?

Trouble arises in AWS Code Pipeline as a roadblock is encountered with the Module

Position components in Angular 2 based on an array's values

What is the most efficient way to retrieve 10,000 pieces of data in a single client-side request without experiencing any lag

Angular 5 - Empty array containing objects has a length of zero

Utilize *ngIf to conceal a row within a material table

PrimeNG's Angular component pTree TreeNode

When using RxJS forkjoin, it will cease subscription if there is a flatMap present within one of the observables it is awaiting

Top recommendations for steering clear of memory leaks in Angular

Comparing JSON objects with JavaScript models: A guide