refactor(example-app): align typescript config with latest defaults for new apps

Author: MrWolfZ

example-app/angular.json

@@ -15,7 +15,7 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
@@ -74,7 +74,7 @@
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
+            "tsConfig": "tsconfig.spec.json",
             "scripts": [],
             "styles": [
               "src/styles.scss"
@@ -89,8 +89,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "tsconfig.app.json",
+              "tsconfig.spec.json"
             ],
             "exclude": []
           }

example-app/src/app/async-validation/async-validation.component.html

@@ -37,9 +37,11 @@
     </li>
   </ul>
 
-  <ul *ngIf="(searchResults$ | async).length > 0">
-    <li *ngFor="let r of (searchResults$ | async)">
-      {{ r }}
-    </li>
-  </ul>
+  <ng-container *ngIf="searchResults$ | async as searchResults">
+    <ul *ngIf="searchResults.length > 0">
+      <li *ngFor="let r of searchResults">
+        {{ r }}
+      </li>
+    </ul>
+  </ng-container>
 </ngf-form-example>

example-app/src/app/local-state-advanced/local-state-advanced.component.html

@@ -1,6 +1,6 @@
 <ngf-form-example exampleName="Local state: Advanced"
                   githubLinkOverride="local-state-advanced"
-                  [formState]="localState">
+                  [formState]="localState.formState">
   Advanced example that shows how you can disable emitting any form actions to the global store via the builtin
   ActionsSubject.
   Instead, you can listen for actions using the directive's output EventEmitter and route them to the component.

example-app/src/app/shared/form-example/form-example.component.ts

@@ -12,15 +12,15 @@ import { FormGroupState } from 'ngrx-forms';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FormExampleComponent {
-  @Input() exampleName: string;
+  @Input() exampleName = '';
   @Input() githubLinkOverride: string | undefined;
 
   @Input() set formState(value: FormGroupState<any>) {
     const formStateJson = JSON.stringify(value, null, 2);
     this.formattedFormState = Prism.highlight(formStateJson, Prism.languages.json, 'en');
   }
 
-  formattedFormState: string;
+  formattedFormState = '';
 
   get githubLink() {
     return this.githubLinkOverride || this.exampleName.replace(' ', '-').toLowerCase();

example-app/src/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

example-app/src/tsconfig.spec.json

@@ -1,21 +1,29 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "module": "es2020",
+    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
-    "baseUrl": "src",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
+    "downlevelIteration": true,
     "experimentalDecorators": true,
-    "strict": true,
-    "strictPropertyInitialization": false,
-    "noUnusedParameters": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": false,
-    "target": "es2016",
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["es2016", "dom"]
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }

example-app/tsconfig.app.json

@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}