build(docs-infra): update docs examples to Angular v10

This commit updates the docs examples to Angular v10.1.2. In addition to updating the dependencies versions, it also updates the project's structure and config to more closely match what a new v10 CLI app would look like. See, also, the [diff][1] between a basic v9.1.4 CLI app and a v10.1.2 one. [1]: https://github.com/cexbrayat/angular-cli-diff/compare/9.1.4..10.1.2
angular · Sep 24, 2020 · 36a8287 · 36a8287
1 parent 128bbb9
commit 36a8287
Show file tree

Hide file tree

Showing 33 changed files with 2,442 additions and 2,213 deletions.
diff --git a/aio/content/examples/.gitignore b/aio/content/examples/.gitignore
@@ -17,6 +17,7 @@
 **/e2e/tsconfig.e2e.json
 **/src/karma.conf.js
 **/.angular-cli.json
+**/.browserslistrc
 **/.editorconfig
 **/.gitignore
 **/angular.json
@@ -30,7 +31,6 @@
 **/tslint.json
 **/karma-test-shim.js
 **/browser-test-shim.js
-**/browserslist
 **/node_modules
 
 # built files

diff --git a/aio/content/examples/http/src/app/uploader/uploader.service.ts b/aio/content/examples/http/src/app/uploader/uploader.service.ts
@@ -24,7 +24,7 @@ export class UploaderService {
   // }
 
   upload(file: File) {
-    if (!file) { return; }
+    if (!file) { return of<string>(); }
 
     // COULD HAVE WRITTEN:
     // return this.http.post('/upload/file', file, {

diff --git a/aio/content/examples/tslint.json b/aio/content/examples/tslint.json
@@ -1,5 +1,8 @@
 {
   "extends": "tslint:recommended",
+  "rulesDirectory": [
+    "codelyzer"
+  ],
   "rules": {
     "align": {
       "options": [
@@ -13,22 +16,6 @@
     "deprecation": {
       "severity": "warning"
     },
-    "component-class-suffix": true,
-    "component-selector": [
-      true,
-      "element",
-      // TODO: Fix the code and change the prefix to `"app"` (or whatever makes sense).
-      "",
-      "kebab-case"
-    ],
-    "contextual-lifecycle": true,
-    "directive-class-suffix": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      ["app", "toh"],
-      "camelCase"
-    ],
     "eofline": true,
     "import-blacklist": [
       true,
@@ -56,6 +43,8 @@
         ]
       }
     ],
+    // TODO(gkalpak): Fix the code and enable this.
+    // "no-any": true,
     "no-console": [
       true,
       "debug",
@@ -95,6 +84,11 @@
         "named": "never"
       }
     },
+    // TODO(gkalpak): Fix the code and enable this.
+    // "typedef": [
+    //   true,
+    //   "call-signature"
+    // ],
     "typedef-whitespace": {
       "options": [
         {
@@ -130,6 +124,9 @@
         "check-typecast"
       ]
     },
+    "component-class-suffix": true,
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
     "no-conflicting-lifecycle": true,
     "no-host-metadata-property": true,
     "no-input-rename": true,
@@ -141,9 +138,19 @@
     "template-banana-in-box": true,
     "template-no-negated-async": true,
     "use-lifecycle-interface": true,
-    "use-pipe-transform-interface": true
-  },
-  "rulesDirectory": [
-    "codelyzer"
-  ]
+    "use-pipe-transform-interface": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      ["app", "toh"],
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      // TODO: Fix the code and change the prefix to `"app"` (or whatever makes sense).
+      "",
+      "kebab-case"
+    ]
+  }
 }
diff --git a/aio/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts b/aio/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts
@@ -1,9 +1,7 @@
 import * as angular from 'angular';
 import 'angular-route';
 
-const appName = 'myApp';
-
-angular.module(appName, [
+const appModule = angular.module('myApp', [
   'ngRoute'
 ])
 .config(['$routeProvider', '$locationProvider',
@@ -25,5 +23,5 @@ angular.module(appName, [
 );
 
 export function bootstrap(el: HTMLElement) {
-  return angular.bootstrap(el,  [appName]);
+  return angular.bootstrap(el,  [appModule.name]);
 }
diff --git a/aio/tools/examples/shared/boilerplate/cli-ajs/package.json b/aio/tools/examples/shared/boilerplate/cli-ajs/package.json
@@ -13,43 +13,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.4",
-    "@angular/common": "~9.1.4",
-    "@angular/compiler": "~9.1.4",
-    "@angular/core": "~9.1.4",
-    "@angular/forms": "~9.1.4",
-    "@angular/platform-browser": "~9.1.4",
-    "@angular/platform-browser-dynamic": "~9.1.4",
-    "@angular/router": "~9.1.4",
-    "angular": "1.7.9",
+    "@angular/animations": "~10.1.2",
+    "@angular/common": "~10.1.2",
+    "@angular/compiler": "~10.1.2",
+    "@angular/core": "~10.1.2",
+    "@angular/forms": "~10.1.2",
+    "@angular/platform-browser": "~10.1.2",
+    "@angular/platform-browser-dynamic": "~10.1.2",
+    "@angular/router": "~10.1.2",
+    "angular": "1.8.0",
     "angular-in-memory-web-api": "~0.11.0",
-    "angular-route": "1.7.9",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.10.0",
+    "angular-route": "1.8.0",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.4",
-    "@angular/cli": "~9.1.4",
-    "@angular/compiler-cli": "~9.1.4",
-    "@angular/language-service": "~9.1.4",
-    "@types/angular": "^1.6.57",
-    "@types/angular-route": "^1.7.0",
+    "@angular-devkit/build-angular": "~0.1001.2",
+    "@angular/cli": "~10.1.2",
+    "@angular/compiler-cli": "~10.1.2",
+    "@types/angular": "1.7.3",
+    "@types/angular-route": "1.7.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-marbles": "~0.6.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~3.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.3",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~3.8.3"
+    "typescript": "~4.0.3"
   }
 }
diff --git a/aio/tools/examples/shared/boilerplate/cli/.browserslistrc b/aio/tools/examples/shared/boilerplate/cli/.browserslistrc
@@ -0,0 +1,18 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
diff --git a/aio/tools/examples/shared/boilerplate/cli/angular.json b/aio/tools/examples/shared/boilerplate/cli/angular.json
@@ -5,7 +5,11 @@
   "projects": {
     "angular.io-example": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
@@ -47,13 +51,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
               ]
             }

diff --git a/aio/tools/examples/shared/boilerplate/cli/browserslist b/aio/tools/examples/shared/boilerplate/cli/browserslist
diff --git a/aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js b/aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js
@@ -2,7 +2,7 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 
 /**
  * @type { import("protractor").Config }
@@ -27,6 +27,10 @@ exports.config = {
     require('ts-node').register({
       project: require('path').join(__dirname, './tsconfig.json')
     });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    jasmine.getEnv().addReporter(new SpecReporter({
+      spec: {
+        displayStacktrace: StacktraceOption.PRETTY
+      }
+    }));
   }
 };
diff --git a/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.json b/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.json
@@ -1,9 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
       "jasminewd2",

diff --git a/aio/tools/examples/shared/boilerplate/cli/package.json b/aio/tools/examples/shared/boilerplate/cli/package.json
@@ -13,39 +13,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.4",
-    "@angular/common": "~9.1.4",
-    "@angular/compiler": "~9.1.4",
-    "@angular/core": "~9.1.4",
-    "@angular/forms": "~9.1.4",
-    "@angular/platform-browser": "~9.1.4",
-    "@angular/platform-browser-dynamic": "~9.1.4",
-    "@angular/router": "~9.1.4",
+    "@angular/animations": "~10.1.2",
+    "@angular/common": "~10.1.2",
+    "@angular/compiler": "~10.1.2",
+    "@angular/core": "~10.1.2",
+    "@angular/forms": "~10.1.2",
+    "@angular/platform-browser": "~10.1.2",
+    "@angular/platform-browser-dynamic": "~10.1.2",
+    "@angular/router": "~10.1.2",
     "angular-in-memory-web-api": "~0.11.0",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.10.0",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.4",
-    "@angular/cli": "~9.1.4",
-    "@angular/compiler-cli": "~9.1.4",
-    "@angular/language-service": "~9.1.4",
+    "@angular-devkit/build-angular": "~0.1001.2",
+    "@angular/cli": "~10.1.2",
+    "@angular/compiler-cli": "~10.1.2",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-marbles": "~0.6.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~3.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.3",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~3.8.3"
+    "typescript": "~4.0.3"
   }
 }
diff --git a/aio/tools/examples/shared/boilerplate/cli/src/app/package.json b/aio/tools/examples/shared/boilerplate/cli/src/app/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "angular.io-example",
+  "private": true,
+  "description_1": "This is a special package.json file that is not used by package managers.",
+  "description_2": "It is used to tell the tools and bundlers whether the code under this directory is free of code with non-local side-effect. Any code that does have non-local side-effects can't be well optimized (tree-shaken) and will result in unnecessary increased payload size.",
+  "description_3": "It should be safe to set this option to 'false' for new applications, but existing code bases could be broken when built with the production config if the application code does contain non-local side-effects that the application depends on.",
+  "description_4": "To learn more about this file see: https://angular.io/config/app-package-json.",
+  "sideEffects": false
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/tsconfig.app.json b/aio/tools/examples/shared/boilerplate/cli/tsconfig.app.json
@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {