Skip to content

Angular upgrade from v8 to v9 #558

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
uldisrudzitis merged 5 commits into from
Sep 29, 2025
Merged

Angular upgrade from v8 to v9 #558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
181f026
Prepare to update to angular 9
uldisrudzitis Sep 23, 2025
fcafa1e
Prepare to update to angular 9
uldisrudzitis Sep 23, 2025
043b0dd
Prepare to update to angular 9
uldisrudzitis Sep 23, 2025
1b0d98a
Prepare to update to angular 9
uldisrudzitis Sep 23, 2025
e14afdc
Upgrade Angular to v9. Upgrade other packages to support Angular v9.
uldisrudzitis Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions editor/angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,26 @@
"@schematics/angular:component": {
"inlineTemplate": true,
"inlineStyle": true,
"styleext": "scss",
"spec": false
"style": "scss",
"skipTests": true
},
"@schematics/angular:class": {
"spec": false
"skipTests": true
},
"@schematics/angular:directive": {
"spec": false
"skipTests": true
},
"@schematics/angular:guard": {
"spec": false
"skipTests": true
},
"@schematics/angular:module": {
"spec": false
"skipTests": true
},
"@schematics/angular:pipe": {
"spec": false
"skipTests": true
},
"@schematics/angular:service": {
"spec": false
"skipTests": true
}
},
"architect": {
Expand Down
4,223 changes: 2,898 additions & 1,325 deletions editor/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 23 additions & 23 deletions editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,42 +12,42 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/forms": "^8.2.14",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "^8.2.14",
"@angular/animations": "^9.1.13",
"@angular/cdk": "^9.1.13",
"@angular/common": "^9.1.13",
"@angular/compiler": "^9.1.13",
"@angular/core": "^9.1.13",
"@angular/forms": "^9.1.13",
"@angular/platform-browser": "^9.1.13",
"@angular/platform-browser-dynamic": "^9.1.13",
"@angular/router": "^9.1.13",
Comment on lines +15 to +23
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

🧩 Analysis chain

Tooling alignment for Angular 9: tests and ngcc.

  • Tests: karma 1.x and jasmine-core 2.x are very old and may break with @angular-devkit/build-angular 0.901.x. Align to Angular 9 CLI scaffolded versions (Karma 4/5, Jasmine 3.x, compatible launchers/plugins).

  • ngcc: add a postinstall to process View Engine libs under Ivy for reliable CI/first-run builds.

   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "dev": "ng build --watch",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "postinstall": "ngcc --properties es2015 browser module main --first-only"
   },

Also applies to: 36-36, 39-46, 49-51, 64-64

🏁 Script executed:

#!/bin/bash
# Inspect Angular builder + test deps
jq -r '.projects|keys[] as $k | "\($k): " + (.[$k].architect.test.builder // "")' editor/angular.json 2>/dev/null
rg -n 'karma|jasmine-core|karma-jasmine|karma-chrome-launcher|karma-coverage-istanbul-reporter' editor/package.json

Length of output: 291

🏁 Script executed:

#!/bin/bash
set -e
# Pack schematics package for Angular 9.1.13 and inspect default package.json template
npm pack @schematics/angular@9.1.13 --silent
TARBALL=$(ls *.tgz | grep "schematics-angular" | head -n1)
echo "Using tarball: $TARBALL"
# Extract the default package.json template
tar -xzf "$TARBALL" "package/files/package.json"
# Show devDependencies section including test deps
sed -n '/"devDependencies"/,/"dependencies":/p' package/files/package.json

Length of output: 184

🏁 Script executed:

#!/bin/bash
set -e
TARBALL=$(ls schematics-angular-9.1.13.tgz)
echo "Contents of $TARBALL:"
tar -tzf "$TARBALL" | grep -E 'files|package.json'

Length of output: 4104

🏁 Script executed:

#!/bin/bash
TARBALL=$(ls schematics-angular-9.1.13.tgz)
tar -xOzf "$TARBALL" package/workspace/files/package.json.template | sed -n '/"devDependencies"/,/"dependencies":/p'

Length of output: 674

Update test devDependencies to Angular 9 defaults.

  • In editor/package.json, bump test libraries:
    • jasmine-core: ~2.99.1 → ~3.5.0
    • karma: ~1.7.1 → ~5.0.0
    • karma-chrome-launcher: ~2.2.0 → ~3.1.0
    • karma-coverage-istanbul-reporter: ~2.0.0 → ~2.1.0
    • karma-jasmine: ~1.1.1 → ~3.0.1
    • karma-jasmine-html-reporter: ^0.2.2 → ^1.4.2
    • add jasmine-spec-reporter: ~4.2.1
  • Confirm your test builder remains @angular-devkit/build-angular:karma.

Optional: Postinstall ngcc—CLI v9+ invokes ngcc on demand; add "postinstall": "ngcc" only if you encounter library compatibility issues (github.com)

🤖 Prompt for AI Agents 
In editor/package.json around lines 15-23, the test devDependencies need to be
updated to Angular 9 defaults: bump jasmine-core to ~3.5.0, karma to ~5.0.0,
karma-chrome-launcher to ~3.1.0, karma-coverage-istanbul-reporter to ~2.1.0,
karma-jasmine to ~3.0.1, karma-jasmine-html-reporter to ^1.4.2, and add
jasmine-spec-reporter at ~4.2.1; ensure the test builder remains
"@angular-devkit/build-angular:karma" in the scripts/config and, if you
encounter library compatibility issues, optionally add a "postinstall": "ngcc"
script.

"@kolkov/angular-editor": "^1.1.4",
"@ngxs/store": "^3.4.3",
"@ngxs/store": "~3.7.0",
"@sentry/browser": "^5.4.0",
"core-js": "^2.5.4",
"tslib": "^1.10.0",
"lodash": "^4.17.21",
"ng-sortgrid": "^1.3.3",
"ng2-tooltip-directive": "^2.9.20",
"ng-sortgrid": "^2.0.1",
"ng2-tooltip-directive": "~2.9.22",
"ngx-color-picker": "^8.0.1",
"ngx-image-cropper": "^3.0.0",
"rxjs": "^6.6.7",
"webfontloader": "^1.6.28",
"zone.js": "^0.9.1"
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^8.4.1",
"@angular-devkit/build-angular": "^0.803.29",
"@angular/cli": "~8.3.29",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "^8.2.14",
"@ngxs/devtools-plugin": "^3.4.3",
"@ngxs/logger-plugin": "^3.4.3",
"@angular-builders/custom-webpack": "^9.1.0",
"@angular-devkit/build-angular": "~0.901.15",
"@angular/cli": "~9.1.15",
"@angular/compiler-cli": "^9.1.13",
"@angular/language-service": "^9.1.13",
"@ngxs/devtools-plugin": "~3.7.0",
"@ngxs/logger-plugin": "~3.7.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.182",
"@types/node": "~8.9.4",
"codelyzer": "^5.1.0",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"cpx": "^1.5.0",
"event-hooks-webpack-plugin": "^2.1.6",
"jasmine-core": "~2.99.1",
Expand All @@ -61,6 +61,6 @@
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"twig-loader": "^0.5.5",
"typescript": "~3.5.3"
"typescript": "~3.8.3"
}
}
2 changes: 2 additions & 0 deletions editor/src/app/app-state/app.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
} from './app.actions';
import { AppStateService } from './app-state.service';
import { UserLoginAction } from '../user/user.actions';
import { Injectable } from '@angular/core';

const defaultState: AppStateModel = {
setup: false,
Expand Down Expand Up @@ -51,6 +52,7 @@ const defaultState: AppStateModel = {
name: 'app',
defaults: defaultState,
})
@Injectable()
export class AppState implements NgxsOnInit {
@Selector()
static isSetup(state: AppStateModel) {
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/error-state/error.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ import { ErrorStateModel } from './error.interface';
import { PopupService } from '../popup/popup.service';
import { filter } from 'rxjs/operators';
import { PushErrorAction } from './error.actions';
import { Injectable } from '@angular/core';

const defaultState: ErrorStateModel[] = [];

@State<ErrorStateModel[]>({
name: 'error',
defaults: defaultState,
})
@Injectable()
export class ErrorState implements NgxsOnInit {
@Selector()
static getLastError(state: ErrorStateModel[]) {
Expand Down
2 changes: 1 addition & 1 deletion editor/src/app/inputs/select-input.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export class SelectInputComponent implements OnInit {
@Output() inputFocus = new EventEmitter();
@Input() enabledOnUpdate?: boolean;

@ViewChild('dropDownAnchor', { static: false }) dropDownAnchor: ElementRef;
@ViewChild('dropDownAnchor') dropDownAnchor: ElementRef;
focus = false;
disabled = false;
blurTimeoutId: any;
Expand Down
4 changes: 2 additions & 2 deletions editor/src/app/preview/preview.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ export class PreviewComponent implements OnInit {
// We need a start value for previewUrl while Observable is not ready
// otherwise iframe loads wrong iframe src url: current url + 'null' (http://local.berta.me/engine/null)
// This solves iframe in iframe loading
// this.previewUrl =
// this.sanitizer.bypassSecurityTrustResourceUrl('about:blank');
this.previewUrl =
this.sanitizer.bypassSecurityTrustResourceUrl('about:blank');

// Load iframe with current site and section
combineLatest(
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/shop/orders/shop-orders.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
InitShopOrdersAction,
} from './shop-orders.actions';
import { UserState } from '../../user/user.state';
import { Injectable } from '@angular/core';

interface ShopOrdersModel {
[site: string]: any[];
Expand All @@ -29,6 +30,7 @@ const defaultState: ShopOrdersModel = {};
name: 'shopOrders',
defaults: defaultState,
})
@Injectable()
export class ShopOrdersState implements NgxsOnInit {
@Selector([AppState.getSite])
static getCurrentSiteOrders(state: ShopOrdersModel, site: string) {
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/shop/products/shop-products.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { ShopState } from '../shop.state';
import { HttpErrorResponse } from '@angular/common/http';
import { concat } from 'rxjs';
import { UserState } from '../../user/user.state';
import { Injectable } from '@angular/core';

interface ShopProduct {
id: string;
Expand All @@ -51,6 +52,7 @@ const defaultState: ShopProductsModel = {};
name: 'shopProducts',
defaults: defaultState,
})
@Injectable()
export class ShopProductsState implements NgxsOnInit {
@Selector([AppState.getSite])
static getCurrentSiteProducts(
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/shop/regional-costs/shop-regional-costs.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
import { ShopState } from '../shop.state';
import { AppStateService } from '../../app-state/app-state.service';
import { UserState } from '../../user/user.state';
import { Injectable } from '@angular/core';

interface ShopRegion {
id: number;
Expand All @@ -59,6 +60,7 @@ const defaultState: ShopRegionalCostsModel = {};
name: 'shopRegionalCosts',
defaults: defaultState,
})
@Injectable()
export class ShopRegionalCostsState implements NgxsOnInit {
@Selector([AppState.getSite])
static getCurrentSiteRegionalCosts(
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/shop/settings/shop-settings-config.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from './shop-settings.actions';
import { concat } from 'rxjs';
import { UserState } from '../../user/user.state';
import { Injectable } from '@angular/core';

export interface ShopSettingsConfigModel {
[site: string]: any;
Expand All @@ -19,6 +20,7 @@ const defaultState: ShopSettingsConfigModel = {};
name: 'shopSettingsConfig',
defaults: defaultState,
})
@Injectable()
export class ShopSettingsConfigState implements NgxsOnInit {
constructor(private store$: Store, private stateService: ShopStateService) {}

Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/shop/settings/shop-settings.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
import { AppStateService } from '../../app-state/app-state.service';
import { ShopState } from '../shop.state';
import { UserState } from '../../user/user.state';
import { Injectable } from '@angular/core';

interface ShopSettingsModel {
[site: string]: Array<{
Expand All @@ -47,6 +48,7 @@ const defaultState: ShopSettingsModel = {};
name: 'shopSettings',
defaults: defaultState,
})
@Injectable()
export class ShopSettingsState implements NgxsOnInit {
@Selector([AppState.getSite])
static getCurrentSiteSettings(state: ShopSettingsModel, site: string) {
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/shop/shop.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import {
} from './orders/shop-orders.actions';
import { UserState } from '../user/user.state';
import { ResetShopAction, InitShopAction } from './shop.actions';
import { Injectable } from '@angular/core';

const defaultState: ShopModel = {
sections: [],
Expand All @@ -50,6 +51,7 @@ const defaultState: ShopModel = {
name: 'shop',
defaults: defaultState,
})
@Injectable()
export class ShopState implements NgxsOnInit {
@Selector()
static getSections(state: ShopModel): Array<string> {
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/sites/sections/entries/entries-state/section-entries.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,13 @@ import { UserLoginAction } from '../../../../user/user.actions';
import { UpdateSiteSectionAction } from '../../sections-state/site-sections.actions';
import { UpdateSectionTagsAction } from '../../tags/section-tags.actions';
import { FileUploadService } from '../../../../../app/sites/shared/file-upload.service';
import { Injectable } from '@angular/core';

@State<SectionEntriesStateModel>({
name: 'sectionEntries',
defaults: {},
})
@Injectable()
export class SectionEntriesState implements NgxsOnInit {
@Selector([AppState.getSite])
static getCurrentSiteEntries(state, site): SectionEntry[] {
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/sites/sections/sections-state/site-sections.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,13 @@ import {
} from '../entries/entries-state/section-entries.actions';
import { UserLoginAction } from '../../../user/user.actions';
import { FileUploadService } from '../../shared/file-upload.service';
import { Injectable } from '@angular/core';

@State<SiteSectionStateModel[]>({
name: 'siteSections',
defaults: [],
})
@Injectable()
export class SiteSectionsState implements NgxsOnInit {
@Selector([AppState.getSite])
static getCurrentSiteSections(state, site): SiteSectionStateModel[] {
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/sites/sections/tags/section-tags.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,13 @@ import {
OrderSectionTagsFromSyncAction,
} from './section-tags.actions';
import { UserLoginAction } from '../../../user/user.actions';
import { Injectable } from '@angular/core';

@State<SectionTagsStateModel>({
name: 'sectionTags',
defaults: {},
})
@Injectable()
export class SectionTagsState implements NgxsOnInit {
@Selector([AppState.getSite])
static getCurrentSiteTags(state, site): SectionTagsInterface[] {
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/sites/settings/site-settings-config.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@ import {
InitSiteSettingsConfigAction,
} from './site-settings-config.actions';
import { UserLoginAction } from '../../user/user.actions';
import { Injectable } from '@angular/core';

@State<SiteSettingsConfigStateModel>({
name: 'siteSettingsConfig',
defaults: {},
})
@Injectable()
export class SiteSettingsConfigState implements NgxsOnInit {
constructor(
private store: Store,
Expand Down
30 changes: 0 additions & 30 deletions editor/src/app/sites/settings/site-settings.service.ts
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions editor/src/app/sites/settings/site-settings.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,13 @@ import {
} from './site-settings.actions';
import { UserLoginAction } from '../../user/user.actions';
import { AddSiteSectionAction } from '../sections/sections-state/site-sections.actions';
import { Injectable } from '@angular/core';

@State<SitesSettingsStateModel>({
name: 'siteSettings',
defaults: {},
})
@Injectable()
export class SiteSettingsState implements NgxsOnInit {
@Selector([AppState.getSite])
static getCurrentSiteSettings(
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/sites/sites-state/sites.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,13 @@ import {
AddSiteEntriesAction,
} from '../sections/entries/entries-state/section-entries.actions';
import { UserLoginAction } from '../../user/user.actions';
import { Injectable } from '@angular/core';

@State<SiteStateModel[]>({
name: 'sites',
defaults: [],
})
@Injectable()
export class SitesState implements NgxsOnInit {
@Selector([AppState.getSite])
static getCurrentSite(sites: SiteStateModel[], siteSlug: string) {
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/sites/template-settings/site-template-settings.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,13 @@ import {
ResetToDefaultsSiteTemplateSettingsAction,
} from './site-template-settings.actions';
import { UserLoginAction } from '../../user/user.actions';
import { Injectable } from '@angular/core';

@State<SitesTemplateSettingsStateModel>({
name: 'siteTemplateSettings',
defaults: {},
})
@Injectable()
export class SiteTemplateSettingsState implements NgxsOnInit {
@Selector([AppState.getSite, SiteSettingsState.getCurrentSiteTemplate])
static getCurrentSiteTemplateSettings(
Expand Down
2 changes: 2 additions & 0 deletions editor/src/app/sites/template-settings/site-templates.state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,13 @@ import {
InitSiteTemplatesAction,
} from './site-templates.actions';
import { UserLoginAction } from '../../user/user.actions';
import { Injectable } from '@angular/core';

@State<SiteTemplatesStateModel>({
name: 'siteTemplates',
defaults: {},
})
@Injectable()
export class SiteTemplatesState implements NgxsOnInit {
@Selector([SiteSettingsState.getCurrentSiteTemplate])
static getCurrentTemplate(
Expand Down
Loading