feat: upgrade to Angular 11

.github/workflows/main.yml

@@ -0,0 +1,45 @@
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint
+      - run: yarn stylelint
+      - run: yarn prettier
+      - run: yarn build
+      - run: yarn test
+  deploy:
+    runs-on: ubuntu-20.04
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+        env:
+          FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
+          FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
+          FIREBASE_DATABASE_URL: ${{ secrets.FIREBASE_DATABASE_URL }}
+          FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
+          FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
+          FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
+          FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
+          FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          force_orphan: true

angular.json

@@ -45,7 +45,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "extractLicenses": true,
               "namedChunks": false,
               "vendorChunk": true,

package.json

@@ -12,16 +12,16 @@
     "prettier:fix": "prettier --write \"**/*.{md,ts,js,scss,html,json,yml}\" --ignore-path .gitignore"
   },
   "dependencies": {
-    "@angular/animations": "^10.0.0",
-    "@angular/common": "^10.0.0",
-    "@angular/compiler": "^10.0.0",
-    "@angular/core": "^10.0.0",
+    "@angular/animations": "^11.1.0-next.3",
+    "@angular/common": "^11.1.0-next.3",
+    "@angular/compiler": "^11.1.0-next.3",
+    "@angular/core": "^11.1.0-next.3",
     "@angular/fire": "^6.0.0",
-    "@angular/forms": "^10.0.0",
-    "@angular/platform-browser": "^10.0.0",
-    "@angular/platform-browser-dynamic": "^10.0.0",
-    "@angular/router": "^10.0.0",
-    "@angular/service-worker": "^10.0.0",
+    "@angular/forms": "^11.1.0-next.3",
+    "@angular/platform-browser": "^11.1.0-next.3",
+    "@angular/platform-browser-dynamic": "^11.1.0-next.3",
+    "@angular/router": "^11.1.0-next.3",
+    "@angular/service-worker": "^11.1.0-next.3",
     "@fortawesome/fontawesome-free": "^5.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
     "bulma": "^0.9.0",
@@ -30,20 +30,18 @@
     "rxjs": "~6.6.0",
     "subsink": "^1.0.0",
     "tslib": "^2.0.0",
-    "webfontloader": "^1.0.0",
     "zone.js": "~0.10.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^10.0.0",
-    "@angular-devkit/build-angular": "^0.1002.0",
-    "@angular/cli": "^10.0.0",
-    "@angular/compiler-cli": "^10.0.0",
-    "@angular/language-service": "^10.0.0",
+    "@angular-builders/custom-webpack": "^11.0.0-beta.4",
+    "@angular-devkit/build-angular": "^0.1101.0-next.3",
+    "@angular/cli": "^11.1.0-next.3",
+    "@angular/compiler-cli": "^11.1.0-next.3",
+    "@angular/language-service": "^11.1.0-next.3",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@types/jasmine": "^3.0.0",
-    "@types/node": "^12.0.0",
-    "@types/webfontloader": "^1.0.0",
+    "@types/node": "^14.0.0",
     "codelyzer": "^6.0.0",
     "dotenv-webpack": "^6.0.0",
     "glob": "^7.0.0",
@@ -65,7 +63,7 @@
     "stylelint-scss": "^3.0.0",
     "tslint": "^6.0.0",
     "tslint-config-prettier": "^1.0.0",
-    "typescript": "~3.9.0"
+    "typescript": "~4.1.0"
   },
   "husky": {
     "hooks": {

src/app/app.component.spec.ts

@@ -1,13 +1,13 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
 	let component: AppComponent;
 	let fixture: ComponentFixture<AppComponent>;
 
-	beforeEach(async(() => {
+	beforeEach(waitForAsync(() => {
 		TestBed.configureTestingModule({
 			declarations: [AppComponent],
 			schemas: [CUSTOM_ELEMENTS_SCHEMA],

src/app/components/footer/footer.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { FooterComponent } from './footer.component';
 
 describe('FooterComponent', () => {
 	let component: FooterComponent;
 	let fixture: ComponentFixture<FooterComponent>;
 
-	beforeEach(async(() => {
+	beforeEach(waitForAsync(() => {
 		TestBed.configureTestingModule({
 			declarations: [FooterComponent],
 		}).compileComponents();

src/app/components/navbar/navbar.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 
@@ -8,7 +8,7 @@ describe('NavbarComponent', () => {
 	let component: NavbarComponent;
 	let fixture: ComponentFixture<NavbarComponent>;
 
-	beforeEach(async(() => {
+	beforeEach(waitForAsync(() => {
 		TestBed.configureTestingModule({
 			declarations: [NavbarComponent],
 			imports: [RouterTestingModule, ScrollToModule.forRoot()],

src/app/modules/index/components/face/face.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { FaceComponent } from './face.component';
@@ -7,7 +7,7 @@ describe('FaceComponent', () => {
 	let component: FaceComponent;
 	let fixture: ComponentFixture<FaceComponent>;
 
-	beforeEach(async(() => {
+	beforeEach(waitForAsync(() => {
 		TestBed.configureTestingModule({
 			declarations: [FaceComponent],
 			imports: [NoopAnimationsModule],

src/app/modules/index/components/project-tile/project-tile.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { ProjectTileComponent } from './project-tile.component';
@@ -7,7 +7,7 @@ describe('ProjectTileComponent', () => {
 	let component: ProjectTileComponent;
 	let fixture: ComponentFixture<ProjectTileComponent>;
 
-	beforeEach(async(() => {
+	beforeEach(waitForAsync(() => {
 		TestBed.configureTestingModule({
 			declarations: [ProjectTileComponent],
 			imports: [RouterTestingModule],

src/app/modules/index/index.component.spec.ts

@@ -1,5 +1,5 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Directive, Input } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 
@@ -30,7 +30,7 @@ describe('IndexComponent', () => {
 	let mockExperienceService: jasmine.SpyObj<ExperienceService>;
 	let mockProjectService: jasmine.SpyObj<ProjectService>;
 
-	beforeEach(async(() => {
+	beforeEach(waitForAsync(() => {
 		mockEducationService = jasmine.createSpyObj<EducationService>([
 			'getEducations',
 		]);

src/app/modules/project/project.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { of } from 'rxjs';
 
@@ -11,7 +11,7 @@ describe('ProjectComponent', () => {
 	let fixture: ComponentFixture<ProjectComponent>;
 	let mockProjectService: jasmine.SpyObj<ProjectService>;
 
-	beforeEach(async(() => {
+	beforeEach(waitForAsync(() => {
 		mockProjectService = jasmine.createSpyObj<ProjectService>([
 			'getProjects',
 		]);

src/index.html

@@ -34,6 +34,7 @@
 				color: darkred;
 			}
 		</style>
+		<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet"/>
 	</head>
 	<body>
 		<noscript>

src/main.ts

@@ -1,6 +1,5 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowser } from '@angular/platform-browser';
-import * as WebFont from 'webfontloader';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
@@ -12,9 +11,3 @@ if (environment.production) {
 platformBrowser()
 	.bootstrapModule(AppModule)
 	.catch((err) => console.error(err));
-
-WebFont.load({
-	google: {
-		families: ['Playfair Display:700,900', '&display=swap'],
-	},
-});

webpack.config.js

@@ -7,13 +7,17 @@ const PATHS = {
 	src: path.join(__dirname, 'src'),
 };
 
-module.exports = {
-	plugins: [
+module.exports = (cfg) => {
+	cfg.plugins.push(
 		new dotenvWebpack({
 			systemvars: true,
 		}),
+	);
+	cfg.plugins.push(
 		new purgecssWebpackPlugin({
 			paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
 		}),
-	],
+	);
+
+	return cfg;
 };