Angular ssr with abp framework

[morshedalomary]

Angular Universal with abp framework

Edited [2024-04-19]

We won't support for @nguniversal/* instead we'll discuss about @angular/ssr Docs

---

I try to add angular universal to project abp angular, I add this command

ng add @nguniversal/express-engine

• After that all files were create and add server.ts file automatically
• After that the project build succussed by this command build:ssr
• When run this command serve:ssr
• Some problems appear
• The first is localStorage is not defined

I fixed it by update app.module.ts with this code

export class AuthModule {
    static forRoot(): ModuleWithProviders<AbpOAuthModule> {
      return {
        ngModule: AuthModule,
        providers: [
          { provide: OAuthStorage, useFactory: storageFactory },
          { provide: "windowObject", useValue: window}
        ]
      };
    }
  } 
  export function storageFactory() : OAuthStorage {
    return localStorage
  }
}

and update the NgModule on the same file

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    OAuthModule.forRoot(),
  ]
})

After that a problem appear

./node_modules/@volo/ngx-lepton-x.core/fesm2020/volo-ngx-lepton-x.core.mjs:1235
    return { provide: WINDOW, useValue: windowObj || window };

I do not know how to fix it, i try to update the server.ts file and i add this

const domino = require('domino');
const win = domino.createWindow(indexHtml);
// mock
global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;

to define the window on the server side but it does not work
I guess there is some thing run in the abp library calling the localstorage and window
before the server.ts

After that I try to do some steps from this article

AspNetBoilerplate - Angular Universal (abp angular startup template)

after I install jsdom , global-jsdom some new errors appear

./node_modules/jsdom/lib/jsdom/utils.js:139:2-27 - Error: Module not found: Error: Can't resolve 'canvas' in \AngularUniversal\angular\node_modules\jsdom\lib\jsdom
After I install the Canvas a new error appear 
./node_modules/canvas/build/Release/canvas.node:1:2 - Error: Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

So, if abp angular support angular universal?
If support what are the steps to do it for build succussed and run with out problems

• Your ABP Framework version 7.0.1.
• Your User Interface type (Angular) if the issue is related to a specific UI

[morshedalomary]

@alaawahbah

[marisvigulis]

Tried with version 6.0.3, same trouble. Any update on it? Abp being incompatible with angular SSR looks like complete blocker.

[vima91]

Any chance this gets given a higher priority? We are stuck without SSR and thus our SEO is really bad. This will be a great help for all that need to use abp with angular for an SEO friendly application.
Also please take into consideration the new Angular.SSR package as this can be replacement for angular universal.

Thanks

[marisvigulis]

I would also recommend to add it to ABP documentation that it doesn't support SSR, cause it is very non transparent that ABP doesn't support one of the basic concepts of Angular.