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

What is the best way to emphasize when the path matches exactly with '/'?

Make sure to enclose the useSearchParams() function within a suspense boundary specifically for the page at "/" location

Sending user input data from a React text field to a function as arguments

Best practices for customizing Material UI v5 Switch using Theme

The process of retrieving input field values from a table within an Angular reactive form

Changing the content of an HTTP response with the help of RXJS

Creating a Redis client in Typescript using the `redis.createClient()` function

What is the reason behind the input text field not preserving its value when disabled?

Exclude the initial argument from functions listed within a JSON structure

Creating a Tailored Validation Function in Angular 6

Error: Unable to install Angular on WSL due to permission denied for Node

What is the process for setting a push key while pushing data to a Firebase database?

Tips for Implementing a Button Click Sound in Ionic 2

SweetAlert2 not displaying properly in Ionic6 - troubleshooting the issue

Problems with Angular 14 and NGRX Selector causing complications

Creating a Modern Application with MEAN stack utilizing Angular 2 and Angular-CLI

The async validator in Angular will only activate upon submission if the user has made changes to the form

The XMLHttpRequest response states that the preflight request did not meet the access control check requirements

Angular 5: Issues with retrieving response using HttpClient's get request

What is the method for retrieving the index of an enum member in Typescript, rather than the member name?