Schematic to Enable SSR in Existing ABP Angular Projects #24026
Conversation
erdemcaygor
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR implements server-side rendering (SSR) support for ABP Angular applications, enabling improved initial load performance and SEO capabilities. The implementation adds a new ssr-add schematic that configures SSR for both application builder and webpack builder setups, supporting both standalone and NgModule-based applications.
Key changes:
- Added
ssr-addschematic with support for both Angular builders (application and webpack) - Implemented OAuth/OIDC authentication flow for SSR environments
- Created template files for SSR configuration including server entry points and application configs
Reviewed Changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| npm/ng-packs/scripts/build-schematics.ts | Added SSR-related files to the build copy configuration |
| npm/ng-packs/packages/schematics/src/utils/angular/workspace.ts | Added backward compatibility export for readWorkspace |
| npm/ng-packs/packages/schematics/src/utils/angular/latest-versions/index.ts | Added dependency versions for SSR packages |
| npm/ng-packs/packages/schematics/src/utils/angular/index.ts | Exported new dependency utilities module |
| npm/ng-packs/packages/schematics/src/commands/ssr-add/server/schema.json | Defined schema for server SSR configuration options |
| npm/ng-packs/packages/schematics/src/commands/ssr-add/server/index.ts | Implemented server-side configuration logic for both builder types |
| npm/ng-packs/packages/schematics/src/commands/ssr-add/server/files/**/*.template | Added template files for server configurations |
| npm/ng-packs/packages/schematics/src/commands/ssr-add/schema.json | Defined schema for main SSR schematic options |
| npm/ng-packs/packages/schematics/src/commands/ssr-add/index.ts | Implemented main SSR schematic orchestration logic |
| npm/ng-packs/packages/schematics/src/commands/ssr-add/files/**/*.template | Added server application templates for both builders |
| npm/ng-packs/packages/schematics/src/collection.json | Registered new SSR schematics in collection |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| } | ||
| } | ||
|
|
||
| export { getWorkspace as readWorkspace } from './workspace'; // for backwards compatibility |
There was a problem hiding this comment.
Circular export detected: exporting getWorkspace from the same file ('./workspace') creates a circular reference. The export should reference the actual module path where getWorkspace is defined, or this line should be removed if getWorkspace is already defined in this file.
| export { getWorkspace as readWorkspace } from './workspace'; // for backwards compatibility |
.../commands/ssr-add/server/files/server-builder/ngmodule-src/app/app.module.server.ts.template
Outdated
Show resolved
Hide resolved
.../commands/ssr-add/server/files/server-builder/ngmodule-src/app/app.module.server.ts.template
Outdated
Show resolved
Hide resolved
...ands/ssr-add/server/files/application-builder/ngmodule-src/app/app.module.server.ts.template
Show resolved
Hide resolved
...ands/ssr-add/server/files/application-builder/ngmodule-src/app/app.module.server.ts.template
Show resolved
Hide resolved
| if (environment.production === false) { | ||
| process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0"; | ||
| } |
There was a problem hiding this comment.
Disabling TLS certificate validation (NODE_TLS_REJECT_UNAUTHORIZED = \"0\") in non-production environments creates a security vulnerability by allowing man-in-the-middle attacks. Consider using valid certificates even in development, or add a prominent warning comment about the security implications.
| if (environment.production === false) { | |
| process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0"; | |
| } | |
| // WARNING: Disabling TLS certificate validation is a serious security risk. | |
| // Do NOT use the following line in production or commit it to version control. | |
| // Instead, use valid certificates in all environments. | |
| // If you must use self-signed certificates in development, consider configuring your environment to trust them. | |
| // process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0"; |
| ? [ | ||
| updateApplicationBuilderWorkspaceConfigRule(sourceRoot, options, context), | ||
| updateApplicationBuilderTsConfigRule(options), | ||
| updateRootTsConfigRule(options) |
There was a problem hiding this comment.
Missing comma after updateRootTsConfigRule(options) will cause a syntax error. Add a comma to separate array elements.
There was a problem hiding this comment.
Hello @erdemcaygor thank you for creating such command to serve the ssr migration smoothly both for module and standalone structure.
Except the points I mention below, this PR is mergable 🚀
- I think we could remove the loader in
index.html
<body>
<app-root></app-root>
<!-- <div id="lp-page-loader"></div> -->
</body>I have come across some of these problems for the previous versions that use module structure instead:
- Some missing imports for module structure
// angular/src/app/app.module.server.ts
for APP_INITIALIZER and isPlatformServer()- We are getting such error
Module '"@angular/platform-browser"' has no exported member 'withIncrementalHydration'.ts(2305)
// angular/src/app/app.module.ts
import {
// ...
withIncrementalHydration, [error]
} from '@angular/platform-browser';- We are also getting an import error on server file, probably related to the typescript version
// angular/src/server.ts
// import express from 'express';
import * as express from 'express';
Description
Resolves #23427
Testing
Run this commmand
npx ng g @abp/ng.schematics:ssr-add