Schematic to Enable SSR in Existing ABP Angular Projects #23428
Conversation
# Conflicts: # npm/ng-packs/packages/schematics/src/commands/ssr-add/files/server-builder/server.ts.template
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a schematic to enable Server-Side Rendering (SSR) in existing ABP Angular projects. The implementation includes configuration files, template files, and build scripts to support both standalone and NgModule-based Angular applications using either the application builder or server builder.
Key Changes:
- Added SSR schematic command with schema definitions and factory functions
- Implemented server-side authentication flow using OpenID Connect
- Created template files for both standalone and NgModule architectures
Reviewed Changes
Copilot reviewed 23 out of 23 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 list |
npm/ng-packs/packages/schematics/src/utils/angular/workspace.ts |
Exported readWorkspace alias for backwards compatibility |
npm/ng-packs/packages/schematics/src/utils/angular/latest-versions/package.json |
Removed package.json file (migrated to TypeScript) |
npm/ng-packs/packages/schematics/src/utils/angular/latest-versions/index.ts |
Created TypeScript version with updated dependency versions |
npm/ng-packs/packages/schematics/src/utils/angular/index.ts |
Added dependency export |
npm/ng-packs/packages/schematics/src/commands/ssr-add/server/schema.json |
Schema definition for server schematic options |
npm/ng-packs/packages/schematics/src/commands/ssr-add/server/index.ts |
Server schematic implementation |
npm/ng-packs/packages/schematics/src/commands/ssr-add/server/files/** |
Template files for server-builder configurations |
npm/ng-packs/packages/schematics/src/commands/ssr-add/schema.json |
Schema definition for SSR-add schematic |
npm/ng-packs/packages/schematics/src/commands/ssr-add/index.ts |
Main SSR schematic implementation |
npm/ng-packs/packages/schematics/src/commands/ssr-add/files/** |
Template files for both builder types |
npm/ng-packs/packages/schematics/src/collection.json |
Registered new schematics in the 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: This line exports getWorkspace as readWorkspace from the same file ('./workspace'), creating a circular reference. The export should reference the actual source of getWorkspace, not the current file itself.
| export { getWorkspace as readWorkspace } from './workspace'; // for backwards compatibility | |
| export { getWorkspace, getWorkspace as readWorkspace }; // for backwards compatibility |
Copilot uses AI. Check for mistakes.
| ], | ||
| providers: [ | ||
| { | ||
| provide: APP_INITIALIZER, |
There was a problem hiding this comment.
APP_INITIALIZER is used but not imported. Add APP_INITIALIZER to the imports from @angular/core on line 1.
Copilot uses AI. Check for mistakes.
| useFactory: () => { | ||
| const platformId = inject(PLATFORM_ID); | ||
| const transferState = inject<TransferState>(TransferState); | ||
| if (isPlatformServer(platformId)) { |
There was a problem hiding this comment.
isPlatformServer is used but not imported. Add isPlatformServer to the imports from @angular/common (add a new import statement).
Copilot uses AI. Check for mistakes.
| @NgModule({ | ||
| imports: [<%= appModuleName %>], | ||
| providers: [{ | ||
| provide: APP_INITIALIZER, |
There was a problem hiding this comment.
APP_INITIALIZER is used but not imported. Add APP_INITIALIZER to the imports from @angular/core on line 1.
Copilot uses AI. Check for mistakes.
| useFactory: () => { | ||
| const platformId = inject(PLATFORM_ID); | ||
| const transferState = inject<TransferState>(TransferState); | ||
| if (isPlatformServer(platformId)) { |
There was a problem hiding this comment.
isPlatformServer is used but not imported. Add isPlatformServer to the imports from @angular/common (add a new import statement).
Copilot uses AI. Check for mistakes.
| if (environment.production === false) { | ||
| process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0"; | ||
| } | ||
|
|
There was a problem hiding this comment.
Disabling TLS certificate validation in non-production environments is a security risk. Consider using a more secure approach such as configuring trusted certificates or using a development proxy with proper certificates.
| if (environment.production === false) { | |
| process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0"; | |
| } |
Copilot uses AI. Check for mistakes.
| const transferState = inject<TransferState>(TransferState); | ||
| if (isPlatformServer(platformId)) { | ||
| transferState.set(SSR_FLAG, true); | ||
| } |
There was a problem hiding this comment.
[nitpick] The provideAppInitializer callback does not return a value. For consistency with Angular patterns, return the function result (which can be void or a Promise). Add return before the closing brace if needed, or explicitly return nothing: return;
| } | |
| } | |
| return; |
Copilot uses AI. Check for mistakes.
2 participants
Description
Resolves #23427
Testing
Run this commmand
npx ng g @abp/ng.schematics:ssr-add