Skip to content

Commit 95cbda0

Browse files
XanderVertegaalXanderVertegaal
committed
Upgrade to Angular 18
1 parent 07b75e6 commit 95cbda0

17 files changed

Lines changed: 1732 additions & 1012 deletions

‎frontend/angular.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"index": "src/index.html",
2525
"browser": "src/main.ts",
2626
"polyfills": [
27-
"zone.js"
27+
"zone.js",
28+
"@angular/localize/init"
2829
],
2930
"tsConfig": "tsconfig.app.json",
3031
"inlineStyleLanguage": "scss",
@@ -119,7 +120,8 @@
119120
"options": {
120121
"polyfills": [
121122
"zone.js",
122-
"zone.js/testing"
123+
"zone.js/testing",
124+
"@angular/localize/init"
123125
],
124126
"tsConfig": "tsconfig.spec.json",
125127
"inlineStyleLanguage": "scss",
@@ -150,4 +152,4 @@
150152
}
151153
}
152154
}
153-
}
155+
}

‎frontend/package.json‎

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,62 @@
11
{
2-
"name": "langpro-annotator",
3-
"scripts": {
4-
"start": "yarn serve",
5-
"build": "ng build --base-href=/static/ --localize",
6-
"watch": "ng build --watch",
7-
"test": "ng test --watch=true",
8-
"serve:ssr:langpro-annotator": "node dist/langpro-annotator/server/server.mjs",
9-
"prebuild": "node ./build/build-pre.js",
10-
"i18n": "ng extract-i18n --output-path locale",
11-
"preserve": "yarn prebuild",
12-
"serve": "ng serve",
13-
"serve:en": "ng serve --configuration=en",
14-
"serve:nl": "ng serve --configuration=nl",
15-
"stop": "lsof -t -i tcp:4200 | xargs kill -9 || echo \"not running\"",
16-
"pretest": "yarn prebuild",
17-
"test-once": "ng test --watch=false"
18-
},
19-
"private": true,
20-
"dependencies": {
21-
"@angular/animations": "^17.3.0",
22-
"@angular/common": "^17.3.0",
23-
"@angular/compiler": "^17.3.0",
24-
"@angular/core": "^17.3.0",
25-
"@angular/forms": "^17.3.0",
26-
"@angular/platform-browser": "^17.3.0",
27-
"@angular/platform-browser-dynamic": "^17.3.0",
28-
"@angular/platform-server": "^17.3.0",
29-
"@angular/router": "^17.3.0",
30-
"@angular/ssr": "^17.3.13",
31-
"@fortawesome/angular-fontawesome": "^0.14.1",
32-
"@fortawesome/fontawesome-svg-core": "^6.5.2",
33-
"@fortawesome/free-solid-svg-icons": "^6.5.2",
34-
"@ng-bootstrap/ng-bootstrap": "^16.0.0",
35-
"@ngrx/effects": "^17.2.0",
36-
"@ngrx/store": "^17.2.0",
37-
"@popperjs/core": "^2.11.8",
38-
"bootstrap": "^5.3.3",
39-
"colors": "^1.4.0",
40-
"express": "^4.18.2",
41-
"rxjs": "~7.8.0",
42-
"tslib": "^2.3.0",
43-
"zone.js": "~0.14.3"
44-
},
45-
"devDependencies": {
46-
"@angular-devkit/build-angular": "^17.3.13",
47-
"@angular/cli": "^17.3.13",
48-
"@angular/compiler-cli": "^17.3.0",
49-
"@angular/localize": "17.3.12",
50-
"@types/express": "^4.17.17",
51-
"@types/jasmine": "~5.1.0",
52-
"@types/node": "^18.18.0",
53-
"jasmine-core": "~5.1.0",
54-
"karma": "~6.4.0",
55-
"karma-chrome-launcher": "~3.2.0",
56-
"karma-coverage": "~2.2.0",
57-
"karma-jasmine": "~5.1.0",
58-
"karma-jasmine-html-reporter": "~2.1.0",
59-
"ng-extract-i18n-merge": "^2.12.0",
60-
"typescript": "~5.4.2"
61-
}
2+
"name": "langpro-annotator",
3+
"scripts": {
4+
"start": "yarn serve",
5+
"build": "ng build --base-href=/static/ --localize",
6+
"watch": "ng build --watch",
7+
"test": "ng test --watch=true",
8+
"serve:ssr:langpro-annotator": "node dist/langpro-annotator/server/server.mjs",
9+
"prebuild": "node ./build/build-pre.js",
10+
"i18n": "ng extract-i18n --output-path locale",
11+
"preserve": "yarn prebuild",
12+
"serve": "ng serve",
13+
"serve:en": "ng serve --configuration=en",
14+
"serve:nl": "ng serve --configuration=nl",
15+
"stop": "lsof -t -i tcp:4200 | xargs kill -9 || echo \"not running\"",
16+
"pretest": "yarn prebuild",
17+
"test-once": "ng test --watch=false"
18+
},
19+
"private": true,
20+
"dependencies": {
21+
"@angular/animations": "^18.2.13",
22+
"@angular/common": "^18.2.13",
23+
"@angular/compiler": "^18.2.13",
24+
"@angular/core": "^18.2.13",
25+
"@angular/forms": "^18.2.13",
26+
"@angular/platform-browser": "^18.2.13",
27+
"@angular/platform-browser-dynamic": "^18.2.13",
28+
"@angular/platform-server": "^18.2.13",
29+
"@angular/router": "^18.2.13",
30+
"@angular/ssr": "^18.2.19",
31+
"@fortawesome/angular-fontawesome": "^0.14.1",
32+
"@fortawesome/fontawesome-svg-core": "^6.5.2",
33+
"@fortawesome/free-solid-svg-icons": "^6.5.2",
34+
"@ng-bootstrap/ng-bootstrap": "^16.0.0",
35+
"@ngrx/effects": "^17.2.0",
36+
"@ngrx/store": "^17.2.0",
37+
"@popperjs/core": "^2.11.8",
38+
"bootstrap": "^5.3.3",
39+
"colors": "^1.4.0",
40+
"express": "^4.18.2",
41+
"rxjs": "~7.8.0",
42+
"tslib": "^2.3.0",
43+
"zone.js": "~0.14.3"
44+
},
45+
"devDependencies": {
46+
"@angular-devkit/build-angular": "^18.2.19",
47+
"@angular/cli": "^18.2.19",
48+
"@angular/compiler-cli": "^18.2.13",
49+
"@angular/localize": "18.2.13",
50+
"@types/express": "^4.17.17",
51+
"@types/jasmine": "~5.1.0",
52+
"@types/node": "^18.18.0",
53+
"jasmine-core": "~5.1.0",
54+
"karma": "~6.4.0",
55+
"karma-chrome-launcher": "~3.2.0",
56+
"karma-coverage": "~2.2.0",
57+
"karma-jasmine": "~5.1.0",
58+
"karma-jasmine-html-reporter": "~2.1.0",
59+
"ng-extract-i18n-merge": "^2.12.0",
60+
"typescript": "~5.4.2"
61+
}
6262
}

‎frontend/src/app/app.component.spec.ts‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
1-
import { TestBed, waitForAsync } from '@angular/core/testing';
2-
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
3-
import { RouterTestingModule } from '@angular/router/testing';
4-
import { HttpClientTestingModule } from '@angular/common/http/testing';
1+
import { TestBed, waitForAsync } from "@angular/core/testing";
2+
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
3+
import { provideHttpClientTesting } from "@angular/common/http/testing";
54

6-
import { AppComponent } from './app.component';
5+
import { AppComponent } from "./app.component";
6+
import {
7+
provideHttpClient,
8+
withInterceptorsFromDi,
9+
} from "@angular/common/http";
10+
import { ActivatedRoute } from "@angular/router";
711

8-
describe('AppComponent', () => {
12+
describe("AppComponent", () => {
913
beforeEach(waitForAsync(() => {
1014
TestBed.configureTestingModule({
11-
imports: [
12-
AppComponent, NoopAnimationsModule, RouterTestingModule, HttpClientTestingModule]
15+
imports: [AppComponent, NoopAnimationsModule],
16+
providers: [
17+
provideHttpClient(withInterceptorsFromDi()),
18+
provideHttpClientTesting(),
19+
{
20+
provide: ActivatedRoute,
21+
useValue: {},
22+
},
23+
],
1324
}).compileComponents();
1425
}));
1526

16-
17-
it('should create the app', () => {
27+
it("should create the app", () => {
1828
const fixture = TestBed.createComponent(AppComponent);
1929
const app = fixture.debugElement.componentInstance;
2030
expect(app).toBeTruthy();
@@ -26,10 +36,12 @@ describe('AppComponent', () => {
2636
expect(app.title).toEqual(`LangPro Annotator`);
2737
});
2838

29-
it('should render title', () => {
39+
it("should render title", () => {
3040
const fixture = TestBed.createComponent(AppComponent);
3141
fixture.detectChanges();
3242
const compiled = fixture.debugElement.nativeElement;
33-
expect(compiled.querySelector('.navbar-brand').textContent).toContain('LangPro Annotator');
43+
expect(compiled.querySelector(".navbar-brand").textContent).toContain(
44+
"LangPro Annotator"
45+
);
3446
});
3547
});

‎frontend/src/app/app.component.ts‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,43 @@
1-
import { Component, Inject, afterRender } from '@angular/core';
2-
import { DOCUMENT } from '@angular/common';
3-
import { RouterOutlet } from '@angular/router';
4-
import { MenuComponent } from './menu/menu.component';
5-
import { FooterComponent } from './footer/footer.component';
6-
import { DarkModeService } from './services/dark-mode.service';import { ToastContainerComponent } from './toast-container/toast-container.component';
7-
1+
import { Component, Inject, afterRender } from "@angular/core";
2+
import { DOCUMENT } from "@angular/common";
3+
import { RouterOutlet } from "@angular/router";
4+
import { MenuComponent } from "./menu/menu.component";
5+
import { FooterComponent } from "./footer/footer.component";
6+
import { DarkModeService } from "./services/dark-mode.service";
7+
import { ToastContainerComponent } from "./toast-container/toast-container.component";
88

99
@Component({
10-
selector: 'la-root',
10+
selector: "la-root",
1111
standalone: true,
1212
imports: [
1313
RouterOutlet,
1414
MenuComponent,
15-
FooterComponent,ToastContainerComponent
16-
15+
FooterComponent,
16+
ToastContainerComponent,
1717
],
18-
templateUrl: './app.component.html',
19-
styleUrl: './app.component.scss'
18+
templateUrl: "./app.component.html",
19+
styleUrl: "./app.component.scss",
2020
})
2121
export class AppComponent {
22-
title = 'LangPro Annotator';
22+
title = "LangPro Annotator";
2323

24-
constructor(@Inject(DOCUMENT) private document: Document, private darkModeService: DarkModeService) {
24+
constructor(
25+
@Inject(DOCUMENT) private document: Document,
26+
private darkModeService: DarkModeService
27+
) {
2528
// Using the DOM API to only render on the browser instead of on the server
2629
afterRender(() => {
27-
const style = this.document.createElement('link');
28-
style.rel = 'stylesheet';
30+
const style = this.document.createElement("link");
31+
style.rel = "stylesheet";
2932
this.document.head.append(style);
3033

31-
this.darkModeService.theme$.subscribe(theme => {
32-
this.document.documentElement.setAttribute('data-bs-theme', theme);
34+
this.darkModeService.theme$.subscribe((theme) => {
35+
this.document.documentElement.setAttribute(
36+
"data-bs-theme",
37+
theme
38+
);
3339
style.href = `${theme}.css`;
3440
});
3541
});
3642
}
37-
3843
}

‎frontend/src/app/footer/footer.component.spec.ts‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
1-
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { HttpClientTestingModule } from '@angular/common/http/testing';
3-
import { FooterComponent } from './footer.component';
1+
import { waitForAsync, ComponentFixture, TestBed } from "@angular/core/testing";
2+
import { provideHttpClientTesting } from "@angular/common/http/testing";
3+
import { FooterComponent } from "./footer.component";
4+
import {
5+
provideHttpClient,
6+
withInterceptorsFromDi,
7+
} from "@angular/common/http";
48

5-
describe('FooterComponent', () => {
9+
describe("FooterComponent", () => {
610
let component: FooterComponent;
711
let fixture: ComponentFixture<FooterComponent>;
812

913
beforeEach(waitForAsync(() => {
1014
TestBed.configureTestingModule({
11-
imports: [FooterComponent, HttpClientTestingModule]
12-
})
13-
.compileComponents();
15+
imports: [FooterComponent],
16+
providers: [
17+
provideHttpClient(withInterceptorsFromDi()),
18+
provideHttpClientTesting(),
19+
],
20+
}).compileComponents();
1421
}));
1522

1623
beforeEach(() => {
@@ -19,7 +26,7 @@ describe('FooterComponent', () => {
1926
fixture.detectChanges();
2027
});
2128

22-
it('should create', () => {
29+
it("should create", () => {
2330
expect(component).toBeTruthy();
2431
});
2532
});

‎frontend/src/app/home/home.component.spec.ts‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
1-
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { HttpClientTestingModule } from '@angular/common/http/testing';
3-
import { HomeComponent } from './home.component';
1+
import { waitForAsync, ComponentFixture, TestBed } from "@angular/core/testing";
2+
import { provideHttpClientTesting } from "@angular/common/http/testing";
3+
import { HomeComponent } from "./home.component";
4+
import {
5+
provideHttpClient,
6+
withInterceptorsFromDi,
7+
} from "@angular/common/http";
48

5-
describe('HomeComponent', () => {
9+
describe("HomeComponent", () => {
610
let component: HomeComponent;
711
let fixture: ComponentFixture<HomeComponent>;
812

913
beforeEach(waitForAsync(() => {
1014
TestBed.configureTestingModule({
11-
imports: [HomeComponent, HttpClientTestingModule]
12-
})
13-
.compileComponents();
15+
imports: [HomeComponent],
16+
providers: [
17+
provideHttpClient(withInterceptorsFromDi()),
18+
provideHttpClientTesting(),
19+
],
20+
}).compileComponents();
1421
}));
1522

1623
beforeEach(() => {
@@ -19,7 +26,7 @@ describe('HomeComponent', () => {
1926
fixture.detectChanges();
2027
});
2128

22-
it('should create', () => {
29+
it("should create", () => {
2330
expect(component).toBeTruthy();
2431
});
2532
});

‎frontend/src/app/menu/menu.component.spec.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11
import { waitForAsync, ComponentFixture, TestBed } from "@angular/core/testing";
22
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
3-
import { HttpClientTestingModule } from "@angular/common/http/testing";
3+
import { provideHttpClientTesting } from "@angular/common/http/testing";
44

55
import { MenuComponent } from "./menu.component";
66
import { provideRouter } from "@angular/router";
7+
import {
8+
provideHttpClient,
9+
withInterceptorsFromDi,
10+
} from "@angular/common/http";
711

812
describe("MenuComponent", () => {
913
let component: MenuComponent;
1014
let fixture: ComponentFixture<MenuComponent>;
1115

1216
beforeEach(waitForAsync(() => {
1317
TestBed.configureTestingModule({
14-
imports: [
15-
MenuComponent,
16-
NoopAnimationsModule,
17-
HttpClientTestingModule,
18+
imports: [MenuComponent, NoopAnimationsModule],
19+
providers: [
20+
provideRouter([]),
21+
provideHttpClient(withInterceptorsFromDi()),
22+
provideHttpClientTesting(),
1823
],
19-
providers: [provideRouter([])]
2024
}).compileComponents();
2125
}));
2226

0 commit comments

Comments
 (0)