Add Angular v14 projects

README.md

@@ -9,11 +9,12 @@ Materials for my Pluralsight course: ["Angular Reactive Forms"](https://app.plur
 
 Angular v12 turns strict typing on by default. Angular forms is not very strongly typed, so some changes are required to support strict typing. Use these files if you are using Angular v12 or newer or if you turn on strict typing.
 
-`demo-start-v12`: The starter files updated to Angular v12.
-
-`demo-final-v12`: The completed files updated to Angular v12.
-
-`apm-v12`: Angular reactive form in the context of a more full-featured application updated to Angular v12. Includes examples of CRUD (Create, Read, Update, and Delete) operations.
+- `demo-start-v12`: The starter files updated to Angular v12.
+- `demo-final-v12`: The completed files updated to Angular v12.
+- `apm-v12`: Angular reactive form in the context of a more full-featured application updated to Angular v12. Includes examples of CRUD (Create, Read, Update, and Delete) operations.
+- `demo-start-v14`: The starter files updated to Angular v14.
+- `demo-final-v14`: The completed files updated to Angular v14.
+- `apm-v14`: Angular reactive form in the context of a more full-featured application updated to Angular v14. Includes examples of CRUD (Create, Read, Update, and Delete) operations.
 
 See the `README.md` file under each folder for details on installing and running the application.
 

apm-v14/.browserslistrc

@@ -0,0 +1,16 @@
+# 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

apm-v14/.gitignore

@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+yarn.lock
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

apm-v14/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

apm-v14/.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    }
+  ]
+}

apm-v14/.vscode/tasks.json

@@ -0,0 +1,24 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

apm-v14/README.md

@@ -0,0 +1,27 @@
+# DemoStartV14
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

apm-v14/angular.json

@@ -0,0 +1,111 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo-start-v14": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "inlineTemplate": true,
+          "inlineStyle": true,
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo-start-v14",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "demo-start-v14:build:production"
+            },
+            "development": {
+              "browserTarget": "demo-start-v14:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo-start-v14:build"
+          }
+        }
+      }
+    }
+  }
+}

apm-v14/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "apm-v14",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve -o",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^14.2.1",
+    "@angular/compiler": "^14.2.1",
+    "@angular/core": "^14.2.1",
+    "@angular/forms": "^14.2.1",
+    "@angular/platform-browser": "^14.2.1",
+    "@angular/platform-browser-dynamic": "^14.2.1",
+    "@angular/router": "^14.2.1",
+    "@popperjs/core": "2.11.6",
+    "angular-in-memory-web-api": "^0.14.0",
+    "bootstrap": "^5.2.1",
+    "font-awesome": "^4.7.0",
+    "rxjs": "^7.5.6",
+    "tslib": "^2.4.0",
+    "zone.js": "^0.11.8"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.1.2",
+    "@angular/cli": "~14.1.2",
+    "@angular/compiler-cli": "^14.1.0",
+    "typescript": "~4.7.2"
+  }
+}

apm-v14/src/app/app.component.css

@@ -0,0 +1,3 @@
+.nav-link {
+  font-size: large;
+}

apm-v14/src/app/app.component.html

@@ -0,0 +1,3 @@
+<div class="container">
+  <app-customer></app-customer>
+</div>

apm-v14/src/app/app.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'pm-root',
+  template: `
+    <nav class='navbar navbar-expand navbar-light bg-light'>
+      <a class='navbar-brand'>{{pageTitle}}</a>
+      <ul class='navbar-nav'>
+        <li class='nav-item'><a class='nav-link' routerLinkActive='active'
+              [routerLink]="['/welcome']">Home</a>
+        </li>
+        <li class='nav-item'><a class='nav-link' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}"
+              [routerLink]="['/products']">Product List</a>
+        </li>
+        <li class='nav-item'><a class='nav-link' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}"
+              [routerLink]="['/products/0/edit']">Add Product</a>
+        </li>
+      </ul>
+    </nav>
+    <div class='container'>
+      <router-outlet></router-outlet>
+    </div>
+    `,
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  pageTitle = 'Acme Product Management';
+}

apm-v14/src/app/app.module.ts

@@ -0,0 +1,27 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { WelcomeComponent } from './home/welcome.component';
+import { ProductModule } from './products/product.module';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    WelcomeComponent
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    RouterModule.forRoot([
+      { path: 'welcome', component: WelcomeComponent },
+      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
+      { path: '**', redirectTo: 'welcome', pathMatch: 'full' }
+    ]),
+    ProductModule
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }