feat(workspace): upgrade to Angular 13

tomastrajan · tomastrajan · commit 53f264c3ce78 · 2021-11-21T16:04:28.000+01:00
BREAKING CHANGE: Angular 13 support, IVY partial compilation
diff --git a/.gitignore b/.gitignore
@@ -33,6 +33,7 @@ speed-measure-plugin.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
diff --git a/angular.json b/angular.json
@@ -47,7 +47,6 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "deployUrl": "/elements/",
             "baseHref": "/elements/",
             "outputPath": "dist/elements-demo",
             "index": "projects/elements-demo/src/index.html",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,55 +42,57 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^12.1.0",
-    "@angular/cdk": "^12.0.0",
-    "@angular/common": "^12.1.0",
-    "@angular/compiler": "^12.1.0",
-    "@angular/core": "^12.1.0",
-    "@angular/forms": "^12.1.0",
-    "@angular/material": "^12.0.0",
-    "@angular/platform-browser": "^12.1.0",
-    "@angular/platform-browser-dynamic": "^12.1.0",
-    "@angular/pwa": "^12.0.0",
-    "@angular/router": "^12.1.0",
-    "@angular/service-worker": "^12.1.0",
-    "highlight.js": "^10.2.1",
-    "ngx-highlightjs": "^4.1.1",
-    "ngx-markdown": "^12.0.1",
+    "@angular/animations": "^13.0.2",
+    "@angular/cdk": "^13.0.2",
+    "@angular/common": "^13.0.2",
+    "@angular/compiler": "^13.0.2",
+    "@angular/core": "^13.0.2",
+    "@angular/forms": "^13.0.2",
+    "@angular/material": "^13.0.2",
+    "@angular/platform-browser": "^13.0.2",
+    "@angular/platform-browser-dynamic": "^13.0.2",
+    "@angular/pwa": "^13.0.3",
+    "@angular/router": "^13.0.2",
+    "@angular/service-worker": "^13.0.2",
+    "highlight.js": "^11.3.1",
+    "ngx-highlightjs": "^6.1.0",
+    "ngx-markdown": "^13.0.0",
     "rxjs": "^6.6.3",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^12.1.0",
-    "@angular-devkit/build-angular": "^12.1.0",
-    "@angular-eslint/builder": "12.0.0",
-    "@angular-eslint/eslint-plugin": "12.0.0",
-    "@angular-eslint/eslint-plugin-template": "12.0.0",
-    "@angular-eslint/schematics": "^12.1.0",
-    "@angular-eslint/template-parser": "12.0.0",
-    "@angular/cli": "^12.1.0",
-    "@angular/compiler-cli": "^12.1.0",
+    "@angular-builders/jest": "^13.0.0",
+    "@angular-devkit/build-angular": "^13.0.3",
+    "@angular-eslint/builder": "^13.0.1",
+    "@angular-eslint/eslint-plugin": "^13.0.1",
+    "@angular-eslint/eslint-plugin-template": "^13.0.1",
+    "@angular-eslint/schematics": "^13.0.1",
+    "@angular-eslint/template-parser": "^13.0.1",
+    "@angular/cli": "^13.0.3",
+    "@angular/compiler-cli": "^13.0.2",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^27.0.3",
     "@types/systemjs": "^6.1.0",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "all-contributors-cli": "^6.17.4",
     "compression": "^1.7.4",
     "cpx": "^1.5.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.26.0",
     "express": "^4.17.1",
     "husky": "^4.3.8",
-    "jest": "^27.0.6",
-    "ng-packagr": "^12.0.0",
+    "jest": "^27.3.1",
+    "jest-preset-angular": "^11.0.0",
+    "ng-packagr": "^13.0.6",
     "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
+    "raw-loader": "^4.0.2",
     "replace": "^1.2.0",
     "standard-version": "^9.3.0",
-    "typescript": "4.3.4",
+    "typescript": "4.4.4",
     "webpack-bundle-analyzer": "^4.4.1"
   },
   "keywords": [
diff --git a/projects/elements-demo/src/app/app.component.scss-theme.scss b/projects/elements-demo/src/app/app.component.scss-theme.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin demo-root-component-theme($theme) {
   $primary: map-get($theme, primary);
diff --git a/projects/elements-demo/src/app/core/core.module.ts b/projects/elements-demo/src/app/core/core.module.ts
@@ -8,6 +8,7 @@ import { ToolbarComponent } from './layout/toolbar/toolbar.component';
 import { NavigationComponent } from './layout/navigation/navigation.component';
 import { SponsorComponent } from './sponsor/sponsor.component';
 import { FooterComponent } from './layout/footer/footer.component';
+import { HIGHLIGHT_JS_PROVIDER } from './higlightjs/highlightjs.config';
 
 @NgModule({
   declarations: [
@@ -24,18 +25,7 @@ import { FooterComponent } from './layout/footer/footer.component';
     // local
     SharedModule,
   ],
-  providers: [
-    {
-      provide: HIGHLIGHT_OPTIONS,
-      useValue: {
-        coreLibraryLoader: () => import('highlight.js/lib/core'),
-        languages: {
-          typescript: () => import('highlight.js/lib/languages/typescript'),
-          xml: () => import('highlight.js/lib/languages/xml'),
-        },
-      },
-    },
-  ],
+  providers: [HIGHLIGHT_JS_PROVIDER],
   exports: [
     ToolbarComponent,
     NavigationComponent,
diff --git a/projects/elements-demo/src/app/core/higlightjs/highlightjs.config.ts b/projects/elements-demo/src/app/core/higlightjs/highlightjs.config.ts
@@ -0,0 +1,12 @@
+import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
+
+export const HIGHLIGHT_JS_PROVIDER = {
+  provide: HIGHLIGHT_OPTIONS,
+  useValue: {
+    coreLibraryLoader: () => import('highlight.js/lib/core'),
+    languages: {
+      typescript: () => import('highlight.js/lib/languages/typescript'),
+      xml: () => import('highlight.js/lib/languages/xml'),
+    },
+  },
+};
diff --git a/projects/elements-demo/src/app/core/layout/footer/footer.component.scss-theme.scss b/projects/elements-demo/src/app/core/layout/footer/footer.component.scss-theme.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin demo-footer-component-theme($theme) {
   $primary: map-get($theme, primary);
diff --git a/projects/elements-demo/src/app/core/layout/navigation/navigation.component.scss-theme.scss b/projects/elements-demo/src/app/core/layout/navigation/navigation.component.scss-theme.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin demo-navigation-component-theme($theme) {
   $primary: map-get($theme, primary);
diff --git a/projects/elements-demo/src/app/features/docs/api/api.component.scss-theme.scss b/projects/elements-demo/src/app/features/docs/api/api.component.scss-theme.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin demo-api-component-theme($theme) {
   $primary: map-get($theme, primary);
diff --git a/projects/elements-demo/src/app/features/docs/change-detection/change-detection.component.spec.ts b/projects/elements-demo/src/app/features/docs/change-detection/change-detection.component.spec.ts
@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HighlightModule } from 'ngx-highlightjs';
-import typescript from 'highlight.js/lib/languages/typescript';
 
 import { SharedModule } from '../../../shared/shared.module';
+import { HIGHLIGHT_JS_PROVIDER } from '../../../core/higlightjs/highlightjs.config';
 
 import { ChangeDetectionComponent } from './change-detection.component';
 
@@ -15,6 +15,7 @@ describe('ChangeDetectionComponent', () => {
       TestBed.configureTestingModule({
         imports: [HighlightModule, SharedModule],
         declarations: [ChangeDetectionComponent],
+        providers: [HIGHLIGHT_JS_PROVIDER],
       }).compileComponents();
     })
   );
diff --git a/projects/elements-demo/src/app/features/docs/configuration/configuration.component.spec.ts b/projects/elements-demo/src/app/features/docs/configuration/configuration.component.spec.ts
@@ -1,9 +1,9 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HighlightModule } from 'ngx-highlightjs';
-import typescript from 'highlight.js/lib/languages/typescript';
 
 import { SharedModule } from '../../../shared/shared.module';
+import { HIGHLIGHT_JS_PROVIDER } from '../../../core/higlightjs/highlightjs.config';
 
 import { ConfigurationComponent } from './configuration.component';
 
@@ -16,6 +16,7 @@ describe('ConfigurationComponent', () => {
       TestBed.configureTestingModule({
         imports: [HighlightModule, RouterTestingModule, SharedModule],
         declarations: [ConfigurationComponent],
+        providers: [HIGHLIGHT_JS_PROVIDER],
       }).compileComponents();
     })
   );
diff --git a/projects/elements-demo/src/app/features/docs/faq/faq.component.scss-theme.scss b/projects/elements-demo/src/app/features/docs/faq/faq.component.scss-theme.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin demo-faq-component-theme($theme) {
   $primary: map-get($theme, primary);
diff --git a/projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.spec.ts b/projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.spec.ts
@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HighlightModule } from 'ngx-highlightjs';
-import typescript from 'highlight.js/lib/languages/typescript';
 
 import { SharedModule } from '../../../shared/shared.module';
+import { HIGHLIGHT_JS_PROVIDER } from '../../../core/higlightjs/highlightjs.config';
 
 import { GettingStartedComponent } from './getting-started.component';
 
@@ -15,6 +15,7 @@ describe('GettingStartedComponent', () => {
       TestBed.configureTestingModule({
         imports: [HighlightModule, SharedModule],
         declarations: [GettingStartedComponent],
+        providers: [HIGHLIGHT_JS_PROVIDER],
       }).compileComponents();
     })
   );
diff --git a/projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.component.spec.ts b/projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.component.spec.ts
@@ -1,9 +1,9 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HighlightModule } from 'ngx-highlightjs';
-import typescript from 'highlight.js/lib/languages/typescript';
 
 import { SharedModule } from '../../../shared/shared.module';
+import { HIGHLIGHT_JS_PROVIDER } from '../../../core/higlightjs/highlightjs.config';
 
 import { HowItWorksComponent } from './how-it-works.component';
 
@@ -16,6 +16,7 @@ describe('HowItWorksComponent', () => {
       TestBed.configureTestingModule({
         imports: [HighlightModule, RouterTestingModule, SharedModule],
         declarations: [HowItWorksComponent],
+        providers: [HIGHLIGHT_JS_PROVIDER],
       }).compileComponents();
     })
   );
diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.spec.ts b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.spec.ts
@@ -1,12 +1,13 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HighlightModule } from 'ngx-highlightjs';
-import typescript from 'highlight.js/lib/languages/typescript';
 
 import { LazyElementsModule } from '../../../../../../elements/src/lib/lazy-elements/lazy-elements.module';
 
-import { AdvancedComponent } from './advanced.component';
 import { SharedModule } from '../../../shared/shared.module';
+import { HIGHLIGHT_JS_PROVIDER } from '../../../core/higlightjs/highlightjs.config';
+
+import { AdvancedComponent } from './advanced.component';
 
 describe('AdvancedComponent', () => {
   let component: AdvancedComponent;
@@ -15,9 +16,10 @@ describe('AdvancedComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        declarations: [AdvancedComponent],
         schemas: [CUSTOM_ELEMENTS_SCHEMA],
         imports: [LazyElementsModule, HighlightModule, SharedModule],
-        declarations: [AdvancedComponent],
+        providers: [HIGHLIGHT_JS_PROVIDER],
       }).compileComponents();
     })
   );
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.spec.ts b/projects/elements-demo/src/app/features/examples/basic/basic.component.spec.ts
@@ -1,10 +1,10 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HighlightModule } from 'ngx-highlightjs';
-import typescript from 'highlight.js/lib/languages/typescript';
 
 import { LazyElementsModule } from '../../../../../../elements/src/lib/lazy-elements/lazy-elements.module';
 
+import { HIGHLIGHT_JS_PROVIDER } from '../../../core/higlightjs/highlightjs.config';
 import { SharedModule } from '../../../shared/shared.module';
 
 import { BasicComponent } from './basic.component';
@@ -16,9 +16,10 @@ describe('BasicComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        declarations: [BasicComponent],
         schemas: [CUSTOM_ELEMENTS_SCHEMA],
         imports: [LazyElementsModule, HighlightModule, SharedModule],
-        declarations: [BasicComponent],
+        providers: [HIGHLIGHT_JS_PROVIDER],
       }).compileComponents();
     })
   );
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.spec.ts b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.spec.ts
@@ -4,19 +4,22 @@ import { HighlightModule } from 'ngx-highlightjs';
 
 import { LazyElementsModule } from '../../../../../../elements/src/lib/lazy-elements/lazy-elements.module';
 
-import { DynamicComponent } from './dynamic.component';
+import { HIGHLIGHT_JS_PROVIDER } from '../../../core/higlightjs/highlightjs.config';
 import { SharedModule } from '../../../shared/shared.module';
 
+import { DynamicComponent } from './dynamic.component';
+
 describe('DynamicComponent', () => {
   let component: DynamicComponent;
   let fixture: ComponentFixture<DynamicComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        declarations: [DynamicComponent],
         schemas: [CUSTOM_ELEMENTS_SCHEMA],
         imports: [LazyElementsModule, HighlightModule, SharedModule],
-        declarations: [DynamicComponent],
+        providers: [HIGHLIGHT_JS_PROVIDER],
       }).compileComponents();
     })
   );
diff --git a/projects/elements-demo/src/app/features/examples/testing/testing.component.spec.ts b/projects/elements-demo/src/app/features/examples/testing/testing.component.spec.ts
@@ -5,6 +5,7 @@ import { HighlightModule } from 'ngx-highlightjs';
 import { LazyElementsModule } from '../../../../../../elements/src/lib/lazy-elements/lazy-elements.module';
 
 import { SharedModule } from '../../../shared/shared.module';
+import { HIGHLIGHT_JS_PROVIDER } from '../../../core/higlightjs/highlightjs.config';
 
 import { TestingComponent } from './testing.component';
 
@@ -15,9 +16,10 @@ describe('TestingComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        declarations: [TestingComponent],
         schemas: [CUSTOM_ELEMENTS_SCHEMA],
         imports: [LazyElementsModule, HighlightModule, SharedModule],
-        declarations: [TestingComponent],
+        providers: [HIGHLIGHT_JS_PROVIDER],
       }).compileComponents();
     })
   );
diff --git a/projects/elements-demo/src/app/features/home/home/home.component.spec.ts b/projects/elements-demo/src/app/features/home/home/home.component.spec.ts
@@ -1,9 +1,9 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { HighlightModule } from 'ngx-highlightjs';
-import typescript from 'highlight.js/lib/languages/typescript';
 
 import { SharedModule } from '../../../shared/shared.module';
+import { HIGHLIGHT_JS_PROVIDER } from '../../../core/higlightjs/highlightjs.config';
 
 import { HomeComponent } from './home.component';
 
@@ -16,6 +16,7 @@ describe('HomeComponent', () => {
       TestBed.configureTestingModule({
         imports: [HighlightModule, HttpClientTestingModule, SharedModule],
         declarations: [HomeComponent],
+        providers: [HIGHLIGHT_JS_PROVIDER],
       }).compileComponents();
     })
   );
diff --git a/projects/elements-demo/src/polyfills.ts b/projects/elements-demo/src/polyfills.ts
@@ -18,18 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/**
- * IE11 requires the following for NgClass support on SVG elements
- */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
diff --git a/projects/elements-demo/src/styles-reset.scss-theme.scss b/projects/elements-demo/src/styles-reset.scss-theme.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin styles-reset-theme($theme) {
   $primary: map-get($theme, primary);
diff --git a/projects/elements-demo/src/styles-theme.scss b/projects/elements-demo/src/styles-theme.scss
@@ -1,6 +1,6 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
diff --git a/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.spec.ts b/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@use '~@angular/material' as mat;`
	`1`	`+@use '@angular/material' as mat;`
`2`	`2`
`3`	`3`	`@mixin demo-root-component-theme($theme) {`
`4`	`4`	`$primary: map-get($theme, primary);`