lazy load module not working in server side

[edvenkat]

Hi @enten @pwnpsasin @dvaldivia
if we add the module:commonjs in tsconfig.server.json
all our modules are compiled inside the main.js and not lazy-loaded on server side.. I can see the file difference in dist folder after the build. it will be good if we use the lazy loading module in server side as well. Not sure how we can do this..

[enten]

@edvenkat

all our modules are compiled inside the main.js and not lazy-loaded on server side.

Because it's the behavior of webpack when the configuration target is node.

Package like webpack-node-externals can help to update webpack configuration externals with package names from node_modules folder.

The point is that all externals module ids marked as webpack externals won't be bundled: each import will be replace by a native require instruction (because remember that the target is node).

This is the only way to achieve "lazy loading" when you compile with webpack for node.js.
Excludes node_modules from webpack compilation is enought to achieve lazy loading on node.js because the require's native behavior is to import module lazily.

You can use angular server builder option externalDependencies with value false.
In that way, all your node_modules will be exclude from compilation.
But it seems that it's not compatible with angular AOT compiler.

    "bundleDependencies": {
      "description": "Which external dependencies to bundle into the bundle. By default, all of node_modules will be bundled.",
      "default": true,
      "oneOf": [
        {
          "type": "boolean"
        },
        {
          "type": "string",
          "enum": ["none", "all"]
        }
      ]
    },

Unless that lazy loading on server side is mandatory (because of context-specific reasons), I think that working on make angular server bundle work without bundle all node_modules is a "waste of time".
In fact, exclude node_modules from compilation will prevent ngcc compiler to work well with aot. An alternative is to use jit compilation, but it's slowy on runtime.

Moreover, if you achieve to adjustments to make the server bundle works without node_modules bundled, when all kind of routes will be render once time, the server memory will have a memory footprint similary as the one when you start a compilation which bundles all dependencies.

Conclusion: I recommand to bundle server depdnencies ("bundleDependencies": true).

[enten]

@edvenkat
Can we close this issue?

[edvenkat]

@enten still im look for where to add the configuration in angular project can you please share it

[enten]

@edvenkat In app:server target in angular.json, if you want to avoid webpack bundles dependencies for the server build:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "...": "..."
        },
        "browser": {
          "...": "..."
        },
        "server": {
          "...": "...",
          "configurations": {
            "production": {
-             "bundleDependencies": true,
              "extractLicenses": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "media"
            },
            "...": "..."