Angular library functionality works with server-side-rendering (SSR) but not in client-only...

I've been working with an Angular project where I'm using a internal library "frontend.kit-npm" for styling and functionality. It comes as a local .tgz file which is installed via npm. My Angular angular.json configuration includes the following:

"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/angular-standalone-sample",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"./node_modules/@.../frontend.kit-npm/dist/frontend-kit.css"
],
"scripts": [
"./node_modules/@.../frontend.kit-npm/dist/frontend-kit.js"
]
}
}



The CSS from the library loads and works correctly, but some components that depend on the JavaScript functionality from frontend-kit.js are not working as expected. I have verified that the paths to the scripts are correct.

To investigate further, I created two new empty Angular projects as a test:

• One project with Server-Side Rendering (SSR) enabled.
• One project without SSR.

I installed the library and configured angular.json for both projects similarly. I noticed that the library works fine in the project with SSR, but not in the project without SSR.

These are my versions:

Angular CLI: 19.1.7
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 19.1.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1901.7
@angular-devkit/build-angular 19.1.7
@angular-devkit/core 19.1.7
@angular-devkit/schematics 19.1.7
@angular/cli 19.1.7
@angular/ssr 19.1.7
@schematics/angular 19.1.7
rxjs 7.8.1
typescript 5.7.3
zone.js 0.15.0

• Verified the script paths in angular.json.
• Checked the browser console for any errors, but found none.
• Ensured that all dependencies are installed correctly.
• Compared the package.json and tsconfig.json files of both projects to ensure consistency.
• Attempted to load the script directly in index.html, but the issue persists.

Why does the frontend-kit.js library work in the SSR-enabled project but not in the non-SSR project? What could be causing this discrepancy, and how can I resolve it?

Continue reading...