chore: Migrate to pnpm and upgrade to Angular v21 by SanderElias · Pull Request #106 · validointi/validointi · GitHub

Summary

This PR migrates the project from npm to pnpm and ensures full compatibility with Angular v21.

Changes

Package Manager Migration

✅ Migrated from npm to pnpm across the entire project
✅ Removed package-lock.json and added pnpm-lock.yaml
✅ Updated packageManager field in package.json to specify pnpm 10.0.0
✅ Added pnpm-debug.log to .gitignore

Angular v21 Compatibility

✅ Added missing @angular-devkit/schematics@^21.2.0 dependencies
✅ Added @angular-devkit/schematics-cli@^21.2.0 for schematic testing
✅ Fixed schematic test imports that were failing in Angular v21

CI/CD Updates

✅ Updated GitHub Actions workflows to use pnpm/action-setup@v4
✅ Added pnpm caching to speed up CI builds
✅ Changed all npm ci commands to pnpm install --frozen-lockfile
✅ Updated all npm run commands to pnpm run
✅ Kept npm publish for publishing to registry (correct approach)

Documentation

✅ Updated installation instructions in root README.md
✅ Updated installation instructions in projects/validointi/core/README.md
✅ Changed from npm install --save to pnpm add

Git Hooks

✅ Updated .husky/pre-commit to use pnpm
✅ Updated husky config in package.json

Benefits

🚀 Faster installs: pnpm is significantly faster than npm
💾 Disk space savings: pnpm uses a content-addressable store, saving disk space
🔒 Better monorepo support: Native workspace support
⚡ Stricter: pnpm creates a non-flat node_modules, preventing phantom dependencies
✅ Angular v21 ready: All dependencies now compatible with latest Angular

Testing

✅ All schematic imports resolve without errors
✅ Pre-commit hooks execute successfully
✅ pnpm install works correctly with lockfiles

Breaking Changes

None - this is purely an internal tooling change. Published package remains the same.

- Add @angular-devkit/schematics dependencies for Angular v21 compatibility - Replace all npm commands with pnpm equivalents across the project - Update GitHub Actions workflows to use pnpm/action-setup@v4 - Add pnpm caching to CI workflows for faster builds - Update installation instructions in READMEs - Add pnpm-debug.log to .gitignore - Remove package-lock.json in favor of pnpm-lock.yaml - Update pre-commit hooks to use pnpm - Fix schematic test imports for Angular v21 This migration improves dependency management and build performance while ensuring compatibility with Angular v21.

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Issue Reference

In order to be considered for merging, the pull request description must refer to a specific issue number. This is described in our Contributing Guide. We are closing this pull request for now but you can update the pull request description and reopen the pull request.
The check is looking for a phrase similar to: "Fixes #XYZ" or "Resolves #XYZ" where XYZ is the issue number that this PR is meant to address.

Pull request overview

This PR migrates the repo tooling from npm to pnpm and upgrades the Angular workspace (including the demo app and schematics tooling) to be compatible with Angular v21.

Changes:

Switch CI and git hooks from npm to pnpm and enable pnpm caching in GitHub Actions.
Upgrade Angular (and related tooling) dependencies to v21.x and update the demo templates to use the new built-in control flow (@if, @for).
Add Angular schematics tooling dependencies for schematic development/testing.

Reviewed changes

Copilot reviewed 17 out of 22 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
tsconfig.json	Removes explicit lib configuration (defaults now inferred from target).
projects/validointi/core/schematics/ng-add/index.spec.ts	Reorders imports to resolve Angular v21 schematic test import issues.
projects/validointi/core/pnpm-lock.yaml	Adds a nested pnpm lockfile under the library project.
projects/validointi/core/package.json	Adds schematics-related dependencies to the library package metadata.
projects/validointi/core/README.md	Updates install instructions to pnpm.
projects/demo/src/main.ts	Adds zone change detection provider for Angular v21 demo bootstrap.
projects/demo/src/app/joi-example/joi-example.component.html	Migrates *ngIf to @if.
projects/demo/src/app/home.component.ts	Removes CommonModule import/config now that it’s unused.
projects/demo/src/app/form3/form3.component.html	Migrates ngIf/ngFor to @if/@for.
projects/demo/src/app/form3/contacts/contacts.component.ts	Migrates *ngFor to @for and drops CommonModule.
projects/demo/src/app/form3/contacts/contact/contact.component.ts	Migrates *ngFor to @for and drops CommonModule.
projects/demo/src/app/form2/form2.component.html	Migrates nested ngIf/ngFor to @if/@for and inlines loading state.
projects/demo/src/app/form1/form1.component.html	Migrates *ngIf to @if.
projects/demo/src/app/about.component.ts	Removes CommonModule import/config now that it’s unused.
package.json	Pins pnpm via packageManager and upgrades Angular/tooling deps to v21.
README.md	Updates install instructions to pnpm.
.husky/pre-commit	Switches hook to pnpm run.
.gitignore	Ignores pnpm-debug.log.
.github/workflows/release-please.yml	Migrates release workflow install/build steps to pnpm and adds pnpm caching.
.github/workflows/main.yml	Migrates CI workflow commands to pnpm and adds pnpm setup/caching.

Files not reviewed (1)

projects/validointi/core/pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

.github/workflows/release-please.yml:40

The cd dist/validointi/core/ step won’t affect the following npm publish step (each run step starts in the repo root). As written, npm publish will run from the root package (which is private: true) instead of the built dist package. Use working-directory: dist/validointi/core on the publish step, or combine cd ... && npm publish in a single step.

      - run: cd dist/validointi/core/
        if: ${{ steps.release.outputs.release_created }}
      - run: npm publish --access public

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

node-version: 18 is incompatible with the Angular v21 toolchain you’re installing/building here (e.g. @angular-devkit/*@21.2.0 declares Node ^20.19.0 || ^22.12.0 || >=24.0.0). This job will fail during pnpm install/build on Node 18—bump the workflow Node version to a supported range (and ideally update actions/setup-node to a current major).

Suggested change

      
                  - uses: actions/setup-node@v1
          
                    with:
          
                      node-version: 18
          
                  - uses: actions/setup-node@v4
          
                    with:
          
                      node-version: 20.19.0

PR description says the packageManager field was updated to pnpm 10.0.0, but the actual value here is pnpm@10.30.3. Either adjust the description or pin the intended version so contributors/CI use the same pnpm release.

This file is formatted inconsistently with the repo’s Prettier config (singleQuote: true) and will churn on format/lint (double quotes on the import, missing space after the first comma in the providers array). Reformat to match the established Prettier output.

The library’s schematics import @angular-devkit/schematics at runtime (e.g. schematics/ng-add/index.ts), but it’s added here under devDependencies. With pnpm’s strict node_modules, consumers running the schematics can hit "Cannot find module '@angular-devkit/schematics'" unless it’s declared as a dependency (or as a peerDependency with an appropriate range). Move these entries out of devDependencies in the published package metadata.

There is already a root pnpm-lock.yaml for the repo; committing a second lockfile under projects/validointi/core is likely accidental and can confuse installs/CI (only one lockfile will be honored depending on where pnpm install is run). If this repo is meant to be installed from the root, remove this nested lockfile; if projects/validointi/core is intended to be independently installable, document/enforce that and ensure CI runs installs from that directory as well.

The pnpm/action-setup@v4 automatically reads the version from the packageManager field in package.json, so specifying it explicitly causes a version conflict error.

Add auto-install-peers=false to .npmrc to match local configuration and prevent ERR_PNPM_LOCKFILE_CONFIG_MISMATCH in CI. Regenerate lockfile with explicit settings.

- Pin vest to ^5.4.6 to avoid breaking changes in v6 - v6 removed vest/promisify and changed create() API - This fixes build failures in demo app - Change dependency-review to fail on 'moderate' severity instead of 'low' - Allows low-severity vulnerabilities in devDependencies (like tmp@0.0.33) - Still protects against moderate+ severity issues - Revert zone.js to ~0.15.1 (Angular 21 compatible version)

Pull request overview

Copilot reviewed 19 out of 24 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

projects/validointi/core/pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

.github/workflows/release-please.yml:39

The cd dist/validointi/core/ step runs in its own shell and does not persist to the subsequent npm publish step, so publishing will occur from the repo root instead of the built package directory. Use working-directory: dist/validointi/core on the publish step (or combine cd … && npm publish in a single step).

      - run: pnpm run build
        if: ${{ steps.release.outputs.release_created }}
      - run: cd dist/validointi/core/
        if: ${{ steps.release.outputs.release_created }}
      - run: npm publish --access public
        env:

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

This file mixes double quotes and single quotes, and the providers array is missing a space after a comma. Since the repo is configured for Prettier with singleQuote: true, please run formatting (or update the code) so it matches the established style.

@for (tag of data.tags; track tag …) uses the tag value as the tracking key, but this list can contain duplicates (e.g. the add button pushes ''). Duplicate track keys can cause incorrect DOM reuse / rendering glitches. Track by $index here, or track by a stable unique id per tag entry.

Suggested change

      
                  @for (tag of data.tags; track tag; let index = $index) {
          
                  @for (tag of data.tags; track $index; let index = $index) {

A second lockfile under projects/validointi/core/ is unusual for pnpm unless you intentionally support running installs from that subdirectory. If the repo installs/builds from the root (as CI does), this lockfile can drift independently and create confusion. Consider removing it or documenting/automating why it must exist and how it’s kept in sync.

The cd command in GitHub Actions doesn't persist across steps. Each run step starts fresh in the repo root, so the separate cd step had no effect on the npm publish step. This caused it to attempt publishing from the private root package instead of the built dist/validointi/core package. Use working-directory attribute instead to ensure npm publish runs from the correct directory.

github-actions Bot reviewed Feb 28, 2026

View reviewed changes

SanderElias requested review from Jefiozie and Copilot February 28, 2026 11:35

Copilot started reviewing on behalf of SanderElias February 28, 2026 11:36 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

SanderElias added 3 commits February 28, 2026 12:41

fix(ci): remove explicit pnpm version from workflows

88facd1

The pnpm/action-setup@v4 automatically reads the version from the packageManager field in package.json, so specifying it explicitly causes a version conflict error.

fix(ci): add .npmrc to ensure consistent pnpm settings

55812eb

Add auto-install-peers=false to .npmrc to match local configuration and prevent ERR_PNPM_LOCKFILE_CONFIG_MISMATCH in CI. Regenerate lockfile with explicit settings.

SanderElias requested a review from Copilot February 28, 2026 11:49

Copilot started reviewing on behalf of SanderElias February 28, 2026 11:49 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

                 "version": "0.0.0",
                 "license": "MIT",
                 "type": "module",
+                "packageManager": "pnpm@10.30.3",

+              import { provideZoneChangeDetection } from "@angular/core";
               import { provideHttpClient } from '@angular/common/http';
               import { bootstrapApplication } from '@angular/platform-browser';
               import { provideRouter } from '@angular/router';
               import { AppComponent } from './app/app.component';
               import { rootRoutes } from './app/root.routes';
               bootstrapApplication(AppComponent, {
-                providers: [provideRouter(rootRoutes), provideHttpClient()],
+                providers: [provideZoneChangeDetection(),provideRouter(rootRoutes), provideHttpClient()],

+                "schematics": "./schematics/collection.json",
+                "devDependencies": {
+                  "@angular-devkit/schematics": "^21.2.0",
+                  "@angular-devkit/schematics-cli": "^21.2.0"
+                }

+              lockfileVersion: '9.0'
+              settings:
+                autoInstallPeers: false
+                excludeLinksFromLockfile: false
+              importers:
+                .:
+                  dependencies:
+                    tslib:
+                      specifier: ^2.8.1
+                      version: 2.8.1
+                  devDependencies:
+                    '@angular-devkit/schematics':
+                      specifier: ^21.2.0
+                      version: 21.2.0
+                    '@angular-devkit/schematics-cli':
+                      specifier: ^21.2.0
+                      version: 21.2.0

+              import { provideZoneChangeDetection } from "@angular/core";
               import { provideHttpClient } from '@angular/common/http';
               import { bootstrapApplication } from '@angular/platform-browser';
               import { provideRouter } from '@angular/router';
               import { AppComponent } from './app/app.component';
               import { rootRoutes } from './app/root.routes';
               bootstrapApplication(AppComponent, {
-                providers: [provideRouter(rootRoutes), provideHttpClient()],
+                providers: [provideZoneChangeDetection(),provideRouter(rootRoutes), provideHttpClient()],
               }).catch(console.error);

chore: Migrate to pnpm and upgrade to Angular v21 by SanderElias · Pull Request #106 · validointi/validointi · GitHub

Uh oh!

chore: Migrate to pnpm and upgrade to Angular v21 - #106

chore: Migrate to pnpm and upgrade to Angular v21#106
SanderElias wants to merge 5 commits into
mainfrom
upgradeDeps

SanderElias commented Feb 28, 2026

Uh oh!

github-actions Bot left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

                     <button class="action" type="button" (click)="data.tags.push('')">➕</button>
                     <!-- notice the label[tag][index] is the selector for the tag component -->
-                    <label *ngFor="let tag of data.tags; let index = index" [tag]="tag" [index]="index"> </label>
+                    @for (tag of data.tags; track tag; let index = $index) {

	@for (tag of data.tags; track tag; let index = $index) {
	@for (tag of data.tags; track $index; let index = $index) {

chore: Migrate to pnpm and upgrade to Angular v21 by SanderElias · Pull Request #106 · validointi/validointi · GitHub

Uh oh!

chore: Migrate to pnpm and upgrade to Angular v21 - #106

chore: Migrate to pnpm and upgrade to Angular v21#106SanderElias wants to merge 5 commits intomainvalidointi/validointi:mainfrom upgradeDepsvalidointi/validointi:upgradeDepsCopy head branch name to clipboard

Conversation

SanderElias commented Feb 28, 2026

Summary

Changes

Package Manager Migration

Angular v21 Compatibility

CI/CD Updates

Documentation

Git Hooks

Benefits

Testing

Breaking Changes

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

PR Compliance Checks

Issue Reference

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chore: Migrate to pnpm and upgrade to Angular v21#106
SanderElias wants to merge 5 commits into
mainfrom
upgradeDeps