1 start

.browserslistrc

@@ -0,0 +1,12 @@
+# 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
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

.gitignore

@@ -25,6 +25,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -41,3 +42,5 @@ testem.log
 .DS_Store
 Thumbs.db
 tmp.html
+/local-samples
+*.mp4

.mcp.json

@@ -0,0 +1,9 @@
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "node",
+      "args": ["node_modules/@angular/cli/bin/ng.js", "mcp",
+        "--experimental-tool", "devserver"]
+    }
+  }
+}

.travis.yml

@@ -0,0 +1,20 @@
+
+language: node_js
+node_js:
+  - 12
+addons:
+  apt:
+    packages:
+      # Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
+      - libgconf-2-4
+cache:
+  # Caches $HOME/.npm when npm ci is default script command
+  # Caches node_modules in all other cases
+  npm: true
+  directories:
+    # we also need to cache folder with Cypress binary
+    - ~/.cache
+install:
+  - npm ci
+script:
+  - npm run e2e

angular.json

@@ -9,33 +9,43 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "assets": [
               "src/assets",
               "src/favicon.ico"
             ],
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "extractLicenses": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -48,47 +58,39 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-testing-course:build"
+            "buildTarget": "angular-testing-course:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular-testing-course:build:production"
+              "buildTarget": "angular-testing-course:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-testing-course:build"
+            "buildTarget": "angular-testing-course:build"
           }
         },
+
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "scripts": [],
-            "styles": [
-              "src/styles.scss"
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
             ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
             "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "scripts": []
           }
         }
       }
@@ -104,28 +106,39 @@
             "protractorConfig": "./protractor.conf.js",
             "devServerTarget": "angular-testing-course:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }
   },
-  "defaultProject": "angular-testing-course",
   "schematics": {
     "@schematics/angular:component": {
-      "styleext": "scss"
+      "style": "scss",
+      "type": "component"
     },
     "@schematics/angular:directive": {
-      "prefix": ""
+      "prefix": "",
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
+  },
+  "cli": {
+    "analytics": "6dd2fc52-134c-41a4-bd54-89b160f1c524"
   }
 }

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:4200"
+}

cypress/fixtures/courses.json

@@ -0,0 +1,152 @@
+{
+  "payload": [
+    {
+      "id": 1,
+      "titles": {
+        "description": "Serverless Angular with Firebase Course",
+        "longDescription": "Serveless Angular with Firestore, Firebase Storage & Hosting, Firebase Cloud Functions & AngularFire"
+      },
+      "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/serverless-angular-small.png",
+      "lessonsCount": 10,
+      "category": "BEGINNER",
+      "seqNo": 4,
+      "url": "serverless-angular"
+    },
+    {
+      "id": 2,
+      "titles": {
+        "description": "Angular Core Deep Dive",
+        "longDescription": "A detailed walk-through of the most important part of Angular - the Core and Common modules"
+      },
+      "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png",
+      "lessonsCount": 10,
+      "category": "BEGINNER",
+      "seqNo": 1,
+      "url": "angular-core-course"
+    },
+    {
+      "id": 3,
+      "titles": {
+        "description": "RxJs In Practice Course",
+        "longDescription": "Understand the RxJs Observable pattern, learn the RxJs Operators via practical examples"
+      },
+      "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png",
+      "courseListIcon": "https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png",
+      "category": "BEGINNER",
+      "lessonsCount": 10,
+      "seqNo": 2,
+      "url": "rxjs-course"
+    },
+    {
+      "id": 4,
+      "titles": {
+        "description": "NgRx In Depth",
+        "longDescription": "Learn the modern Ngrx Ecosystem, including Store, Effects, Router Store, Ngrx Entity, Dev Tools and Schematics."
+      },
+      "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png",
+      "courseListIcon": "https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png",
+      "category": "BEGINNER",
+      "lessonsCount": 10,
+      "seqNo": 3,
+      "url": "ngrx-course"
+    },
+    {
+      "id": 5,
+      "titles": {
+        "description": "Angular for Beginners",
+        "longDescription": "Establish a solid layer of fundamentals, learn what's under the hood of Angular"
+      },
+      "iconUrl": "https://angular-academy.s3.amazonaws.com/thumbnails/angular2-for-beginners-small-v2.png",
+      "courseListIcon": "https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png",
+      "category": "BEGINNER",
+      "lessonsCount": 10,
+      "seqNo": 5,
+      "url": "angular-for-beginners"
+    },
+    {
+      "id": 6,
+      "titles": {
+        "description": "Angular Security Course - Web Security Fundamentals",
+        "longDescription": "Learn Web Security Fundamentals and apply them to defend an Angular / Node Application from multiple types of attacks."
+      },
+      "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png",
+      "courseListIcon": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/lock-v2.png",
+      "category": "ADVANCED",
+      "lessonsCount": 11,
+      "seqNo": 6,
+      "url": "angular-security-course"
+    },
+    {
+      "id": 7,
+      "titles": {
+        "description": "Angular PWA - Progressive Web Apps Course",
+        "longDescription": "Learn Angular Progressive Web Applications, build the future of the Web Today."
+      },
+      "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png",
+      "courseListIcon": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/alien.png",
+      "category": "ADVANCED",
+      "lessonsCount": 8,
+      "seqNo": 7,
+      "url": "angular-pwa-course"
+    },
+    {
+      "id": 8,
+      "titles": {
+        "description": "Angular Advanced Library Laboratory: Build Your Own Library",
+        "longDescription": "Learn Advanced Angular functionality typically used in Library Development. Advanced Components, Directives, Testing, Npm"
+      },
+      "iconUrl": "https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png",
+      "courseListIcon": "https://angular-academy.s3.amazonaws.com/thumbnails/angular-advanced-lesson-icon.png",
+      "category": "ADVANCED",
+      "seqNo": 8,
+      "url": "angular-advanced-course"
+    },
+    {
+      "id": 9,
+      "titles": {
+        "description": "The Complete Typescript Course",
+        "longDescription": "Complete Guide to Typescript From Scratch: Learn the language in-depth and use it to build a Node REST API."
+      },
+      "iconUrl": "https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png",
+      "courseListIcon": "https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-lesson.png",
+      "category": "BEGINNER",
+      "seqNo": 9,
+      "url": "typescript-course"
+    },
+    {
+      "id": 10,
+      "titles": {
+        "description": "Rxjs and Reactive Patterns Angular Architecture Course",
+        "longDescription": "Learn the core RxJs Observable Pattern as well and many other Design Patterns for building Reactive Angular Applications."
+      },
+      "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png",
+      "courseListIcon": "https://angular-academy.s3.amazonaws.com/course-logos/observables_rxjs.png",
+      "category": "BEGINNER",
+      "seqNo": 10,
+      "url": "rxjs-patterns-course"
+    },
+    {
+      "id": 11,
+      "titles": {
+        "description": "Angular Material Course",
+        "longDescription": "Build Applications with the official Angular Widget Library"
+      },
+      "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/material_design.png",
+      "category": "BEGINNER",
+      "seqNo": 11,
+      "url": "angular-material-course"
+    },
+    {
+      "id": 12,
+      "titles": {
+        "description": "Angular Testing Course",
+        "longDescription": "In-depth guide to Unit Testing and E2E Testing of Angular Applications"
+      },
+      "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-testing-small.png",
+      "category": "BEGINNER",
+      "seqNo": 0,
+      "url": "angular-testing-course",
+      "lessonsCount": 10
+    }
+  ]
+}

cypress/fixtures/testing-course.json

@@ -0,0 +1,12 @@
+{
+  "id": 12,
+  "titles": {
+    "description": "Angular Testing Course",
+    "longDescription": "In-depth guide to Unit Testing and E2E Testing of Angular Applications"
+  },
+  "iconUrl": "https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-testing-small.png",
+  "category": "BEGINNER",
+  "seqNo": 0,
+  "url": "angular-testing-course",
+  "lessonsCount": 10
+}