feat!: update to Angular 12 (#2110)

* feat!: update to Angular 12 * feat(demo): new utility `assets` (to get URL to file from assets) * chore: run `ng update @angular/cli@12 --migrate-only production-by-default` * fix(demo-integrations): addition to `stubExternalIcons` * fix: update `@nguniversal/express-engine`-dependency
taiga-family · Aug 8, 2022 · 55e1c2a · 55e1c2a
1 parent 5ab0387
commit 55e1c2a
Show file tree

Hide file tree

Showing 38 changed files with 239 additions and 231 deletions.
diff --git a/angular.json b/angular.json
@@ -504,7 +504,6 @@
                         }
                     ],
                     "options": {
-                        "aot": true,
                         "outputPath": "dist/demo/browser",
                         "index": "projects/demo/src/index.html",
                         "main": "projects/demo/src/main.browser.ts",
@@ -539,7 +538,13 @@
                             "node_modules/prismjs/components/prism-markup.min.js",
                             "node_modules/prismjs/components/prism-typescript.min.js"
                         ],
-                        "allowedCommonJsDependencies": ["angular2-text-mask", "markdown-it"]
+                        "allowedCommonJsDependencies": ["angular2-text-mask", "markdown-it"],
+                        "vendorChunk": true,
+                        "extractLicenses": false,
+                        "buildOptimizer": false,
+                        "sourceMap": true,
+                        "optimization": false,
+                        "namedChunks": true
                     },
                     "configurations": {
                         "production": {
@@ -553,9 +558,6 @@
                             "outputHashing": "all",
                             "sourceMap": false,
                             "namedChunks": false,
-                            "aot": true,
-                            "extractLicenses": false,
-                            "vendorChunk": true,
                             "buildOptimizer": true,
                             "statsJson": false,
                             "progress": false,
@@ -580,9 +582,6 @@
                             "outputHashing": "all",
                             "sourceMap": false,
                             "namedChunks": false,
-                            "aot": true,
-                            "extractLicenses": false,
-                            "vendorChunk": true,
                             "buildOptimizer": true,
                             "statsJson": false,
                             "progress": false,
@@ -614,8 +613,10 @@
                         },
                         "ru": {
                             "localize": ["ru"]
-                        }
-                    }
+                        },
+                        "development": {}
+                    },
+                    "defaultConfiguration": "production"
                 },
                 "mkcert": {
                     "builder": "@nrwl/workspace:run-commands",
@@ -640,7 +641,6 @@
                         }
                     ],
                     "options": {
-                        "browserTarget": "demo:build",
                         "port": 3333,
                         "sslCert": ".ssl/localhost.pem",
                         "sslKey": ".ssl/localhost-key.pem"
@@ -658,8 +658,12 @@
                         },
                         "ru": {
                             "browserTarget": "demo:build:ru"
+                        },
+                        "development": {
+                            "browserTarget": "demo:build:development"
                         }
-                    }
+                    },
+                    "defaultConfiguration": "development"
                 },
                 "serve:ssl": {
                     "builder": "@nrwl/workspace:run-commands",
@@ -683,16 +687,18 @@
                 },
                 "serve:ssr": {
                     "builder": "@nguniversal/builders:ssr-dev-server",
-                    "options": {
-                        "browserTarget": "demo:build",
-                        "serverTarget": "demo:server"
-                    },
+                    "options": {},
                     "configurations": {
                         "production": {
                             "browserTarget": "demo:build:production",
                             "serverTarget": "demo:server:production"
+                        },
+                        "development": {
+                            "serverTarget": "demo:server:development",
+                            "browserTarget": "demo:build:development"
                         }
-                    }
+                    },
+                    "defaultConfiguration": "development"
                 },
                 "serve:compiled": {
                     "builder": "@nrwl/workspace:run-commands",
@@ -706,15 +712,19 @@
                         "tsConfig": "projects/demo/tsconfig.server.json",
                         "stylePreprocessorOptions": {
                             "includePaths": ["projects/core/styles"]
-                        }
+                        },
+                        "sourceMap": true,
+                        "optimization": false
                     },
                     "configurations": {
                         "production": {
                             "outputHashing": "media",
                             "sourceMap": false,
                             "optimization": true
-                        }
-                    }
+                        },
+                        "development": {}
+                    },
+                    "defaultConfiguration": "production"
                 },
                 "prerender": {
                     "builder": "@nguniversal/builders:prerender",

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "scripts": {
         "postinstall": "husky install && ngcc --async",
         "start": "nx serve",
-        "build:ssr": "nx build --prod && nx run demo:server:production",
+        "build:ssr": "nx build --configuration production && nx run demo:server:production",
         "prerender": "nx run demo:prerender",
         "i18n": "nx xi18n --output-path src/locale",
         "*** Workflow ***": "",
@@ -34,8 +34,8 @@
         "prettier": "prettier '**/*.{svg,yml,js,ts,html,md,less,json}' --cache node_modules/.cache/prettier",
         "typecheck": "tsc --noEmit --skipLibCheck --incremental false --tsBuildInfoFile null --project tsconfig.spec.json",
         "*** Build **": "",
-        "build:demo": "nx build --prod --configuration=production",
-        "build:demo:next": "nx build --prod --configuration=next",
+        "build:demo": "nx build --configuration production",
+        "build:demo:next": "nx build --configuration next",
         "postbuild:demo": "npm run exec -- ./scripts/postbuild-demo.ts",
         "postbuild:demo:next": "npm run exec -- ./scripts/postbuild-demo.ts",
         "*** Release ***": "",
@@ -68,29 +68,29 @@
         ]
     },
     "dependencies": {
-        "@angular/animations": "~11.2.14",
-        "@angular/cdk": "~11.2.13",
-        "@angular/common": "~11.2.14",
-        "@angular/compiler": "~11.2.14",
-        "@angular/core": "~11.2.14",
-        "@angular/forms": "~11.2.14",
-        "@angular/localize": "^11.2.14",
-        "@angular/platform-browser": "~11.2.14",
-        "@angular/platform-browser-dynamic": "~11.2.14",
-        "@angular/platform-server": "^11.2.14",
-        "@angular/router": "~11.2.14",
+        "@angular/animations": "~12.2.16",
+        "@angular/cdk": "~12.2.13",
+        "@angular/common": "~12.2.16",
+        "@angular/compiler": "~12.2.16",
+        "@angular/core": "~12.2.16",
+        "@angular/forms": "~12.2.16",
+        "@angular/localize": "^12.2.16",
+        "@angular/platform-browser": "~12.2.16",
+        "@angular/platform-browser-dynamic": "~12.2.16",
+        "@angular/platform-server": "^12.2.16",
+        "@angular/router": "~12.2.16",
         "core-js": "^2.6.9",
         "parse5": "^6.0.1",
         "rxjs": "~6.6.3",
         "tslib": "^2.0.0",
-        "zone.js": "~0.10.2"
+        "zone.js": "~0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~0.1102.19",
-        "@angular-devkit/core": "~11.2.19",
-        "@angular/cli": "~11.2.19",
-        "@angular/compiler-cli": "~11.2.14",
-        "@angular/language-service": "~11.2.14",
+        "@angular-devkit/build-angular": "~12.2.17",
+        "@angular-devkit/core": "~12.2.17",
+        "@angular/cli": "~12.2.17",
+        "@angular/compiler-cli": "~12.2.16",
+        "@angular/language-service": "~12.2.16",
         "@commitlint/cli": "^17.0.2",
         "@commitlint/config-conventional": "^17.0.2",
         "@nrwl/cli": "14.3.1",
@@ -119,15 +119,15 @@
         "husky": "^8.0.1",
         "kill-port": "^2.0.0",
         "lint-staged": "^8.2.1",
-        "ng-packagr": "^11.2.4",
+        "ng-packagr": "^12.2.7",
         "postcss": "^8.4.14",
         "prettier": "~2.7.1",
         "raw-loader": "^4.0.2",
         "rollup": "~2.75.6",
         "standard-version": "^8.0.2",
         "ts-loader": "^6.2.2",
         "ts-node": "~10.8.1",
-        "typescript": "~4.0.8",
+        "typescript": "~4.3.5",
         "wait-on": "^6.0.1"
     },
     "engines": {

diff --git a/projects/addon-charts/test.ts b/projects/addon-charts/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {

diff --git a/projects/addon-commerce/test.ts b/projects/addon-commerce/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {

diff --git a/projects/addon-doc/package.json b/projects/addon-doc/package.json
@@ -14,7 +14,7 @@
     "repository": "https://github.com/tinkoff/taiga-ui",
     "license": "Apache-2.0",
     "dependencies": {
-        "@angular-devkit/schematics": "~11.2.19",
+        "@angular-devkit/schematics": "~12.2.17",
         "highlight.js": "^11.5.1",
         "markdown-it": "^12.3.2",
         "ngx-highlightjs": "^4.1.4",

diff --git a/projects/addon-doc/src/components/navigation/navigation.component.ts b/projects/addon-doc/src/components/navigation/navigation.component.ts
@@ -78,7 +78,7 @@ export class TuiDocNavigationComponent {
             changeDetectorRef.markForCheck();
             titleService.setTitle(title);
             this.openActivePageGroup();
-            this.handleAnchorLink(this.activatedRoute.snapshot.fragment);
+            this.handleAnchorLink(this.activatedRoute.snapshot.fragment!);
         });
     }
 

diff --git a/projects/addon-doc/src/test.ts b/projects/addon-doc/src/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 import {getTestBed} from '@angular/core/testing';
 import {
     BrowserDynamicTestingModule,

diff --git a/projects/addon-editor/test.ts b/projects/addon-editor/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {

diff --git a/projects/addon-mobile/test.ts b/projects/addon-mobile/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {

diff --git a/projects/addon-preview/test.ts b/projects/addon-preview/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {

diff --git a/projects/addon-table/test.ts b/projects/addon-table/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {

diff --git a/projects/addon-tablebars/test.ts b/projects/addon-tablebars/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {

diff --git a/projects/cdk/test.ts b/projects/cdk/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {

diff --git a/projects/core/test.ts b/projects/core/test.ts
@@ -1,8 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 
 import {getTestBed} from '@angular/core/testing';
 import {

diff --git a/projects/demo-integrations/cypress/support/stub-external-icons.util.ts b/projects/demo-integrations/cypress/support/stub-external-icons.util.ts
@@ -1,16 +1,17 @@
 // not taiga ui icons
 export const EXTERNAL_ICONS = [
-    `web-api.svg`,
-    `marsibarsi.*1x1small.jpg`,
-    `.*ng-polymorpheus.*logo.svg`,
-    `bf2e94ae58ee713717faf397958a8e3d.jpg`, // filename - MD5 hash value of file content (waterplea avatar)
+    'web-api.svg',
+    'marsibarsi.*1x1small.jpg',
+    '.*ng-polymorpheus.*logo.svg',
+    'bf2e94ae58ee713717faf397958a8e3d.jpg', // filename - MD5 hash value of file content (waterplea avatar)
+    'avatar.jpg',
 ];
 
 export const stubExternalIcons = (icons: string[] = EXTERNAL_ICONS): void => {
     icons.forEach(iconName => {
         cy.intercept(
             {
-                method: `GET`,
+                method: 'GET',
                 url: new RegExp(`.*${iconName}`),
             },
             {fixture: `stubs/web-api.svg`},

diff --git a/projects/demo/package.json b/projects/demo/package.json
@@ -3,7 +3,7 @@
     "private": true,
     "dependencies": {
         "@ng-web-apis/universal": "1.9.5",
-        "@nguniversal/express-engine": "^9.1.1",
+        "@nguniversal/express-engine": "~12.1.3",
         "@stackblitz/sdk": "^1.8.0",
         "@tinkoff/angular-contenteditable-accessor": "~1.2.0",
         "@tinkoff/ng-dompurify": "^3.0.0",
@@ -12,7 +12,7 @@
         "ngx-markdown": "^11.1.3"
     },
     "devDependencies": {
-        "@nguniversal/builders": "~11.2.1",
+        "@nguniversal/builders": "~12.1.3",
         "@types/dompurify": "^2.3.3",
         "@types/express": "^4.17.13",
         "express": "^4.18.1",

diff --git a/projects/demo/server.ts b/projects/demo/server.ts
@@ -1,5 +1,5 @@
 import '@ng-web-apis/universal/mocks';
-import 'zone.js/dist/zone-node';
+import 'zone.js/node';
 
 import {APP_BASE_HREF} from '@angular/common';
 import {provideLocation, provideUserAgent} from '@ng-web-apis/universal';