Search code examples
angularserver-side-renderingtree-shakingangular18

Angular 18 with SSR: Setting optimization to true ignores library loaded inside scripts

My Angular 18 application runs smoothly with SSR in development mode. However, when I switch to production mode with optimization set to true, the application fails to locate the 'igv.js' file, even though it is already included in the scripts section of the angular.json file.

Configurations section:

  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb"
        }
      ],
      "optimization": true,
      "sourceMap": true,
      "namedChunks": true,
      "extractLicenses": true,
      "outputHashing": "all"
    },
    "development": {
      "optimization": false,
      "extractLicenses": false,
      "sourceMap": true
    }
  },

Scripts section:

    "scripts": [
      "node_modules/swagger-ui-dist/swagger-ui-bundle.js",
      "node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js",
      "igv.js"
    ],

This is how I am calling the IGV module. Since I am using SSR, I have to call the file on the client-side.

 ngAfterViewInit() {
    if (this.isBrowser) {
      import('igv').then(igvModule => {
        const igv = igvModule.default;
        if (igv && typeof igv.createBrowser === 'function') {
          this.igvModule = igv;
        } else {
          console.error('igv.createBrowser is not a function');
        }
      }).catch(error => {
        console.error('Error loading igv module:', error);
      });
    }
  }

Any suggestion on what could be missing?

Solution

  • Could you try importing igv directly using the below import and start using it on your components?

    import igv from '../node_modules/igv/dist/igv.esm.js';

    Related github issue