Update to angular 21 by shlomoa · Pull Request #531 · angular-split/angular-split

shlomoa · 2026-02-09T11:46:18Z

Moved to angular 21 and ran over all stages properly including manual verification

Updated .gitignore with PLAN.md

- Update ngx-bootstrap to v21 - Update typescript-eslint - Migrate to inject() function (Angular 21) - Update peerDependencies in library

Update to angular 21

SanderElias

LGTM,
But I'm unsure if we are ready to move to V21?
@Harpush @Jefiozie, when you both are Ok, feel free to merge.

Copilot

Pull request overview

Upgrades the workspace (demo app + angular-split library) to Angular 21, aligning build tooling/config and refactoring DI usage to Angular’s inject() pattern.

Changes:

Upgrade Angular/tooling dependencies and switch Angular builders to @angular/build.
Update TS config to moduleResolution: "bundler" and refactor components/services to use inject().
Update library peer dependencies to Angular >=21 and adjust CI Node matrix.

Reviewed changes

Copilot reviewed 16 out of 19 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
tsconfig.json	Switch module resolution to `bundler` and adjust compiler options formatting.
src/main.ts	Adds `provideZoneChangeDetection()` during app bootstrap.
src/app/ui/components/topbar.component.ts	Refactors DI from constructor injection to `inject()`.
src/app/changelog/changelog.service.ts	Refactors DI to `inject()` while keeping service behavior.
src/app/changelog/changelog.component.ts	Refactors DI to `inject()` and keeps observable wiring.
src/app/app.component.ts	Refactors Router DI to `inject()` and keeps scroll-on-nav behavior.
projects/angular-split/tsconfig.lib.json	Switch library TS module resolution to `bundler`.
projects/angular-split/src/lib/split/split.component.ts	Adjusts `DOCUMENT` import source for library internals.
projects/angular-split/src/lib/split-custom-events-behavior.directive.ts	Adjusts `DOCUMENT` import source for directive internals.
projects/angular-split/package.json	Bumps Angular peer dependency floor to `>=21`.
package.json	Upgrades Angular/tooling deps, adds/adjusts wireit scripts, updates ngx-bootstrap version.
angular.json	Switches builders to `@angular/build:*` and adds schematic defaults.
CHANGELOG.md	Adds 21.0.0 release notes entry.
.gitignore	Adds `PLAN.md` to ignored files.
.github/workflows/tests.yml	Updates CI Node versions tested.
.github/workflows/lint.yml	Updates CI Node versions tested.
.github/workflows/build.yml	Updates CI Node versions tested.
.github/copilot-instructions.md	Adds repo-specific Copilot guidance document.

Comments suppressed due to low confidence (1)

package.json:174

lib_build no longer copies LICENSE/README into dist/angular-split, but ng-packagr config only lists _theme.css as an asset. This likely means the published package will miss LICENSE/README unless they are added to ng-package.json assets or the copy step is restored.

    "lib_build": {
      "command": "ng build angular-split",
      "files": [
        "projects/angular-split/"
      ],
      "output": [
        "dist/angular-split"
      ]

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-16T13:36:04Z

CHANGELOG.md

+## 21.0.0 (2026-02-09)
+
+- feat: update to angular 21
+- feat: update to angular 20


The new 21.0.0 changelog entry includes both "update to angular 21" and "update to angular 20" under the same release header, which is internally inconsistent and confusing for readers. Consider removing/relocating the Angular 20 line or clarifying what actually shipped in 21.0.0.

Suggested change

- feat: update to angular 20

AI could add to confusion when trying to characterize human nature

Copilot · 2026-02-16T13:36:05Z

src/main.ts

 bootstrapApplication(AppComponent, {
  providers: [
-    importProvidersFrom(BrowserModule, FormsModule),
+    provideZoneChangeDetection(),importProvidersFrom(BrowserModule, FormsModule),


In the providers array, provideZoneChangeDetection() and importProvidersFrom(...) are concatenated without whitespace/newline, which breaks formatting and makes it easy to miss entries. Split these into separate array items (and let Prettier format the list).

Suggested change

provideZoneChangeDetection(),importProvidersFrom(BrowserModule, FormsModule),

provideZoneChangeDetection(),

importProvidersFrom(BrowserModule, FormsModule),

Copilot · 2026-02-16T13:36:05Z

.github/workflows/tests.yml

    strategy:
      matrix:
-        node-version: [20.x, 22.x]
+        node-version: [22.x, 24.x]


CI is running on Node 24, but package.json engines.node does not include Node 24. Either add Node 24 to engines (if supported) or keep the CI matrix aligned with the supported engine range.

Suggested change

node-version: [22.x, 24.x]

node-version: [22.x]

Copilot · 2026-02-16T13:36:05Z

.github/workflows/lint.yml

    strategy:
      matrix:
-        node-version: [20.x, 22.x]
+        node-version: [22.x, 24.x]


CI is running on Node 24, but package.json engines.node does not include Node 24. Either add Node 24 to engines (if supported) or keep the CI matrix aligned with the supported engine range.

Suggested change

node-version: [22.x, 24.x]

node-version: [22.x]

Copilot · 2026-02-16T13:36:06Z

projects/angular-split/package.json

  "peerDependencies": {
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
    "rxjs": ">=7.0.0"
  },


The library peerDependencies now require Angular >=21, and the root changelog introduces a 21.0.0 release, but projects/angular-split/package.json still declares version 20.0.0. Bump the library version (or adjust the changelog) so the published package metadata matches the intended major release.

Copilot · 2026-02-16T13:36:06Z

package.json

    "eslint": "^8.57.0",
    "husky": "^8.0.3",
    "lint-staged": "^14.0.1",
-    "ng-packagr": "^19.0.1",
+    "ng-packagr": "^21.1.0",
+    "ngx-bootstrap": "^21.0.1",
    "postcss": "8.4.28",


ngx-bootstrap is now in devDependencies, but it is imported by runtime app components (e.g. Topbar and examples). If installs/builds run with devDependencies omitted, the app build will fail. Move it back to dependencies or ensure the app is never built/served from a production-only install.

Copilot · 2026-02-16T13:36:06Z

.github/workflows/build.yml

    strategy:
      matrix:
-        node-version: [20.x, 22.x]
+        node-version: [22.x, 24.x]


CI is running on Node 24, but package.json engines.node does not include Node 24. Either add Node 24 to engines (if supported) or keep the CI matrix aligned with the supported engine range.

Suggested change

node-version: [22.x, 24.x]

node-version: [22.x]

Copilot · 2026-02-16T13:36:06Z

.github/copilot-instructions.md

+
+# expectations from github copilot
+Always ask user for guidance.
+- Provide best in class respose:


Typo: "respose" should be "response".

Suggested change

- Provide best in class respose:

- Provide best in class response:

SanderElias · 2026-02-16T13:40:54Z

@shlomoa Thanks for your PR.
Can you address the AI-nits, as it's not wrong ;)

Harpush · 2026-02-20T15:12:17Z

We have still some stuff which are bot v20. For example:

The demo site is v19
The stackblitz is v19

I guess there are more places... Maybe we should align to v20 first and then move to v21 while applying those changes in v21 too?

Also the changelog still works weird I think.

@SanderElias @Jefiozie

…ular-split into update_to_angular_21

shlomoa · 2026-02-22T13:29:47Z

Sorry folks, first experience on a github project.

Committed fixes to the issues flagged by github copilot.
Validated as much as I could.

This is not critical for me, but I would like to see this completed successfully.
How can I help ?

SanderElias · 2026-02-24T10:32:54Z

@shlomoa, I restarted the Copilot review after your changes. It probably will find a couple of nits.
Then @Harpush mentioned we should also address the StackBlitz and the demo site, since they're still on v19.
And we should check whether those are really the last 2, or if we have older versions elsewhere too.

Perhaps it is a bit too much to address all of those in this same PR, and I think @Jefiozie has ownership of the StackBlitz to begin with?

Copilot

Pull request overview

Copilot reviewed 25 out of 28 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-24T10:35:52Z

src/app/changelog/changelog.service.ts

      this.http.get(this.url, { responseType: 'text' }).pipe(
        map((md) => {
-          this.cachedHtml = marked(md)
+          this.cachedHtml = marked.parse(md) as string
          return this.cachedHtml
        }),


marked.parse(md) as string forces a synchronous string result. Newer marked typings commonly allow parse to return string | Promise<string> depending on options, so this cast can hide a real async return and lead to runtime issues. Prefer handling both cases (e.g., converting to an Observable via from(...)) rather than asserting string.

Copilot · 2026-02-24T10:35:52Z

projects/angular-split/tsconfig.lib.json

  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
-    "compilationMode": "partial",
+    "compilationMode": "full",


angularCompilerOptions.compilationMode is set to full for the published library build. Angular libraries are expected to be built in partial compilation mode for distribution; full can break downstream consumption and bypass the Angular linker.

Suggested change

"compilationMode": "full",

"compilationMode": "partial",

SanderElias · 2026-02-24T10:36:13Z

And I just noticed there are merge conflicts; These should be addressed anyhow.
@shlomoa, can you please merge the upstream changes into your PR?

shlomoa and others added 14 commits February 9, 2026 11:51

added copilot instructions

2124b4c

Updated .gitignore with PLAN.md

build: restore dependencies (npm install)

0df4960

build(deps): update Angular Core and CLI to v20

47e87ed

build(deps): update angular-eslint packages to v20

8280721

build(deps): update ngx-bootstrap to v20

d2f904a

build: update to Angular 20 and fix build scripts

9d52b5c

build: update to Angular 21

7d9bd0d

build: finalize Angular 21 update

91fdd3a

- Update ngx-bootstrap to v21 - Update typescript-eslint - Migrate to inject() function (Angular 21) - Update peerDependencies in library

docs: update CHANGELOG for Angular 21 update

6984d24

ci: update node versions for Angular 21

06022b1

Merge pull request #1 from shlomoa/update_to_angular_21

e5f1d20

Update to angular 21

build: update supported node versions to 24

05f9ed2

build: additional updates (to be stashed in rebase)

2544c03

Merge branch 'main' into update_to_angular_21

54048ac

SanderElias requested review from Jefiozie and Copilot February 16, 2026 13:32

Copilot started reviewing on behalf of SanderElias February 16, 2026 13:32 View session

SanderElias approved these changes Feb 16, 2026

View reviewed changes

Copilot AI reviewed Feb 16, 2026

View reviewed changes

SanderElias added 2 commits February 17, 2026 16:44

Merge branch 'main' into update_to_angular_21

1c428b2

Merge branch 'main' into update_to_angular_21

01df0d3

shlomoa added 5 commits February 22, 2026 13:23

fix(packaging): fixed issues flaged by github AI agent

f945a47

Merge branch 'update_to_angular_21' of https://github.com/shlomoa/ang…

a205db9

…ular-split into update_to_angular_21

fix(build): fixed all AI requirements

3910106

fix: enabled cleaner install

99d4cb6

fix: updated several package versions

bc13682

SanderElias requested a review from Copilot February 24, 2026 10:29

Copilot started reviewing on behalf of SanderElias February 24, 2026 10:30 View session

Copilot AI reviewed Feb 24, 2026

View reviewed changes

	provideZoneChangeDetection(),importProvidersFrom(BrowserModule, FormsModule),
	provideZoneChangeDetection(),
	importProvidersFrom(BrowserModule, FormsModule),

	- Provide best in class respose:
	- Provide best in class response:

Conversation

shlomoa commented Feb 9, 2026

Uh oh!

SanderElias left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

shlomoa Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

SanderElias commented Feb 16, 2026

Uh oh!

Harpush commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shlomoa commented Feb 22, 2026

Uh oh!

SanderElias commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

SanderElias commented Feb 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Harpush commented Feb 20, 2026 •

edited

Loading

SanderElias commented Feb 24, 2026 •

edited

Loading