chore: upgrade sample to angular 14 (#1968)

* chore: upgrade ng 12 => ng 13

* chore: upgrade sample to angular 14

* fix: restore provided msal public client behavior

a regression removed the functionality to correctly use an explicity provided
Msal PublicClientApplication originaly delivered in #1181.
This fixes the regresssion, cleans up repeated code, and adds missing doc comments

* fix: rewrite css to ensure correct excaping of unicode characters for lit

* moved gulp-replace-task to devDependencies

Author: gavinbarron

gulpfile.js

@@ -3,7 +3,8 @@ const sass = require('gulp-sass')(require('sass'));
 const gap = require('gulp-append-prepend');
 const cleanCSS = require('gulp-clean-css');
 const rename = require('gulp-rename');
-var license = require('gulp-header-license');
+const license = require('gulp-header-license');
+const replace = require('gulp-replace-task');
 
 scssFileHeader = `
 // THIS FILE IS AUTO GENERATED
@@ -36,14 +37,27 @@ export const PACKAGE_VERSION = '[VERSION]';
 `;
 
 function runSass() {
-  return gulp
-    .src('src/**/!(shared)*.scss')
-    .pipe(sass())
-    .pipe(cleanCSS())
-    .pipe(gap.prependText(scssFileHeader))
-    .pipe(gap.appendText(scssFileFooter))
-    .pipe(rename({ extname: '-css.ts' }))
-    .pipe(gulp.dest('src/'));
+  return (
+    gulp
+      .src('src/**/!(shared)*.scss')
+      .pipe(sass())
+      .pipe(cleanCSS())
+      // replacement to make office-ui-fabric-core icons work with lit-element
+      .pipe(
+        replace({
+          patterns: [
+            {
+              match: /:"\\([0-9a-f])/g,
+              replacement: ':"\\u$1'
+            }
+          ]
+        })
+      )
+      .pipe(gap.prependText(scssFileHeader))
+      .pipe(gap.appendText(scssFileFooter))
+      .pipe(rename({ extname: '-css.ts' }))
+      .pipe(gulp.dest('src/'))
+  );
 }
 
 function setLicense() {

package.json

@@ -85,6 +85,7 @@
     "gulp-clean-css": "4.3.0",
     "gulp-header-license": "^1.0.10",
     "gulp-rename": "^2.0.0",
+    "gulp-replace-task": "^2.0.1",
     "gulp-sass": "^5.1.0",
     "gulp-util": "^3.0.8",
     "husky": "^4.3.0",

samples/angular-app/.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

samples/angular-app/angular.json

@@ -18,24 +18,17 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-builders/custom-webpack:browser",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "customWebpackConfig": {
-              "path": "./webpack.config.js"
-            },
             "outputPath": "dist/demo-mgt-angular",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
             "aot": true,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -66,25 +59,31 @@
                   "maximumError": "10kb"
                 }
               ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
           }
         },
         "serve": {
-          "builder": "@angular-builders/custom-webpack:dev-server",
+          "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
             "browserTarget": "demo-mgt-angular:build"
           },
           "configurations": {
             "production": {
               "browserTarget": "demo-mgt-angular:build:production"
+            },
+            "development": {
+              "browserTarget": "demo-mgt-angular:build:development"
             }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "demo-mgt-angular:build"
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
@@ -93,29 +92,11 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
@@ -129,6 +110,6 @@
           }
         }
       }
-    }},
-  "defaultProject": "demo-mgt-angular"
+    }
+  }
 }