build(docs-infra): update project structure to cli@9 10/12 (`tsconfig.json`) (#36015)

Update `tsconfig[.*].json`.
Also, all make necessary changes to ensure the example apps can be
successfully built with the new, stricter type-checking options.

PR Close #36015

aio/content/examples/elements/src/app/popup.component.ts

@@ -39,7 +39,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
   `]
 })
 export class PopupComponent {
-  private state: 'opened' | 'closed' = 'closed';
+  state: 'opened' | 'closed' = 'closed';
 
   @Input()
   set message(message: string) {

aio/content/examples/template-expression-operators/src/app/app.component.html

@@ -72,8 +72,8 @@
 <h2>Non-null assertion operator (<code>!</code>)</h2>
 <div>
   <!-- #docregion non-null -->
-  <!--No color, no error -->
-  <p *ngIf="item">The item's color is: {{item!.color}}</p>
+  <!-- Assert color is defined, even if according to the `Item` type it could be undefined. -->
+  <p>The item's color is: {{item.color!.toUpperCase()}}</p>
   <!-- #enddocregion non-null -->
 
 

aio/content/examples/template-expression-operators/src/app/app.component.ts

@@ -1,6 +1,13 @@
 import { Component } from '@angular/core';
 
 
+interface Item {
+  name: string;
+  manufactureDate: Date;
+  color?: string | null;
+  price: number;
+}
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -9,10 +16,11 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'Template Expression Operators';
 
-  item = {
+  item: Item = {
     name : 'Telephone',
     manufactureDate : new Date(1980, 1, 25),
-    price: 98
+    color: 'orange',
+    price: 98,
   };
 
   nullItem = null;

aio/content/guide/template-syntax.md

@@ -2256,22 +2256,20 @@ It works perfectly with long property paths such as `a?.b?.c?.d`.
 
 ### The non-null assertion operator ( `!` )
 
-As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is unintentionally null or undefined.
+As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is unintentionally `null` or `undefined`.
 
 In this mode, typed variables disallow `null` and `undefined` by default. The type checker throws an error if you leave a variable unassigned or try to assign `null` or `undefined` to a variable whose type disallows `null` and `undefined`.
 
-The type checker also throws an error if it can't determine whether a variable will be `null` or undefined at runtime. You tell the type checker not to throw an error by applying the postfix
+The type checker also throws an error if it can't determine whether a variable will be `null` or `undefined` at runtime. You tell the type checker not to throw an error by applying the postfix
 [non-null assertion operator, !](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator "Non-null assertion operator").
 
 The Angular non-null assertion operator, `!`, serves the same purpose in
-an Angular template. For example, after you use [*ngIf](guide/template-syntax#ngIf)
-to check that `item` is defined, you can assert that
-`item` properties are also defined.
+an Angular template. For example, you can assert that `item` properties are also defined.
 
 <code-example path="template-expression-operators/src/app/app.component.html" region="non-null" header="src/app/app.component.html"></code-example>
 
 When the Angular compiler turns your template into TypeScript code,
-it prevents TypeScript from reporting that `item` might be `null` or `undefined`.
+it prevents TypeScript from reporting that `item.color` might be `null` or `undefined`.
 
 Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe navigation operator (?)"),
 the non-null assertion operator does not guard against `null` or `undefined`.

aio/tools/examples/shared/boilerplate/cli/tsconfig.app.json

@@ -4,12 +4,17 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
   "include": [
-    "src/**/*.ts"
+    "src/**/*.d.ts"
   ],
   "exclude": [
     "src/test.ts",
     "src/**/*.spec.ts",
+    "src/**/*-specs.ts",
     "src/**/*.avoid.ts",
     "src/**/*.0.ts",
     "src/**/*.1.ts",
@@ -19,6 +24,7 @@
     "src/**/*.4.ts",
     "src/**/*.5.ts",
     "src/**/*.6.ts",
-    "src/**/*.7.ts"
+    "src/**/*.7.ts",
+    "src/**/testing"
   ]
 }

aio/tools/examples/shared/boilerplate/cli/tsconfig.json

@@ -5,10 +5,10 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
     "module": "esnext",
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
     "importHelpers": true,
     "target": "es2015",
     "typeRoots": [
@@ -21,5 +21,7 @@
   },
   "angularCompilerOptions": {
     "enableIvy": false,
-  },
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
 }

aio/tools/examples/shared/boilerplate/ivy/cli/tsconfig.app.json

@@ -4,8 +4,12 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
   "include": [
-    "src/**/*.ts"
+    "src/**/*.d.ts"
   ],
   "exclude": [
     "src/test.ts",

aio/tools/examples/shared/boilerplate/testing/tsconfig.app.json

@@ -4,8 +4,12 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
   "include": [
-    "src/**/*.ts"
+    "src/**/*.d.ts"
   ],
   "exclude": [
     "src/test.ts",

aio/tools/examples/shared/boilerplate/testing/tsconfig.spec.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/spec",
+    "outDir": "./out-tsc/spec",
     "types": [
       "jasmine",
       "node"