docs(angular): update playgrounds to standalone and StackBlitz previews to use WebContainers (#3905)

Author: brandyscarney

docs/api/infinite-scroll.md

@@ -21,6 +21,8 @@ The Infinite Scroll component calls an action to be performed when the user scro
 
 The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
 
+## Basic Usage
+
 import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md';
 
 <Basic />
@@ -118,4 +120,4 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />

docs/api/reorder.md

@@ -67,7 +67,7 @@ In order to sort the array upon completion of the reorder, the array should be p
 
 In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
 
-Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue.
+Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue.
 
 import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';
 

src/components/global/Playground/stackblitz.utils.ts

@@ -105,67 +105,63 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
 const openAngularEditor = async (code: string, options?: EditorOptions) => {
   const defaultFiles = await loadSourceFiles(
     [
+      'angular/package.json',
+      'angular/angular.json',
+      'angular/tsconfig.json',
+      'angular/tsconfig.app.json',
       'angular/main.ts',
-      'angular/app.module.ts',
-      'angular/app.component.ts',
+      'angular/index.html',
+      'angular/app.routes.ts',
+      options?.includeIonContent ? 'angular/app.component.withContent.ts' : 'angular/app.component.ts',
       'angular/app.component.css',
       options?.includeIonContent ? 'angular/app.component.withContent.html' : 'angular/app.component.html',
       'angular/example.component.ts',
       'angular/styles.css',
       'angular/global.css',
       'angular/variables.css',
-      'angular/angular.json',
-      'angular/tsconfig.json',
-      'angular/package.json',
     ],
     options.version
   );
 
-  const appModule = 'src/app/app.module.ts';
+  const package_json = JSON.parse(defaultFiles[0]);
+
+  if (options?.dependencies) {
+    package_json.dependencies = {
+      ...package_json.dependencies,
+      ...options.dependencies,
+    };
+  }
+
+  const main = 'src/main.ts';
+
   const files = {
-    'src/main.ts': defaultFiles[0],
+    'package.json': JSON.stringify(package_json, null, 2),
+    'angular.json': defaultFiles[1],
+    'tsconfig.json': defaultFiles[2],
+    'tsconfig.app.json': defaultFiles[3],
+    [main]: defaultFiles[4],
+    'src/index.html': defaultFiles[5],
     'src/polyfills.ts': `import 'zone.js';`,
-    [appModule]: defaultFiles[1],
-    'src/app/app.component.ts': defaultFiles[2],
-    'src/app/app.component.css': defaultFiles[3],
-    'src/app/app.component.html': defaultFiles[4],
-    'src/app/example.component.ts': defaultFiles[5],
+    'src/app/app.routes.ts': defaultFiles[6],
+    'src/app/app.component.ts': defaultFiles[7],
+    'src/app/app.component.css': defaultFiles[8],
+    'src/app/app.component.html': defaultFiles[9],
+    'src/app/example.component.ts': defaultFiles[10],
     'src/app/example.component.html': code,
     'src/app/example.component.css': '',
-    'src/index.html': '<app-root></app-root>',
-    'src/styles.css': defaultFiles[6],
-    'src/global.css': defaultFiles[7],
-    'src/theme/variables.css': defaultFiles[8],
-    'angular.json': defaultFiles[9],
-    'tsconfig.json': defaultFiles[10],
+    'src/styles.css': defaultFiles[11],
+    'src/global.css': defaultFiles[12],
+    'src/theme/variables.css': defaultFiles[13],
     ...options?.files,
-    ...options?.dependencies,
   };
 
-  const package_json = defaultFiles[11];
-
-  files[appModule] = files[appModule].replace(
-    'IonicModule.forRoot({})',
-    `IonicModule.forRoot({ mode: '${options?.mode}' })`
-  );
-
-  let dependencies = {};
-  try {
-    dependencies = {
-      ...dependencies,
-      ...JSON.parse(package_json).dependencies,
-      ...options?.dependencies,
-    };
-  } catch (e) {
-    console.error('Failed to parse package.json contents', e);
-  }
+  files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`);
 
   sdk.openProject({
-    template: 'angular-cli',
+    template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
     files,
-    dependencies,
   });
 };
 

static/code/stackblitz/v7/angular/angular.json

@@ -4,115 +4,130 @@
   "newProjectRoot": "projects",
   "projects": {
     "app": {
+      "projectType": "application",
       "root": "",
       "sourceRoot": "src",
-      "projectType": "application",
       "prefix": "app",
-      "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "www"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              }
+            ],
             "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
-              ]
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+            "ci": {
+              "progress": false
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "app:build"
-          },
           "configurations": {
             "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
+            },
+            "development": {
+              "buildTarget": "app:build:development"
+            },
+            "ci": {
+              "progress": false
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": ["src/styles.css"],
-            "scripts": [],
-            "assets": ["src/favicon.ico", "src/assets"]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
-          }
-        }
-      }
-    },
-    "app-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "prefix": "",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "app:serve"
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              }
+            ],
+            "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
+            "scripts": []
           },
           "configurations": {
-            "production": {
-              "devServerTarget": "app:serve:production"
+            "ci": {
+              "progress": false,
+              "watch": false
             }
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
   },
-  "defaultProject": "app"
+  "cli": {
+    "schematicCollections": ["@ionic/angular-toolkit"]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
+  }
 }

static/code/stackblitz/v7/angular/app.component.ts

@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { IonApp } from '@ionic/angular/standalone';
+import { ExampleComponent } from './example.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  styleUrls: ['app.component.css'],
+  imports: [ExampleComponent, IonApp],
 })
-export class AppComponent { }
+export class AppComponent {
+  constructor() {}
+}

static/code/stackblitz/v7/angular/app.component.withContent.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IonApp, IonContent } from '@ionic/angular/standalone';
+import { ExampleComponent } from './example.component';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  imports: [ExampleComponent, IonApp, IonContent],
+})
+export class AppComponent {
+  constructor() {}
+}

static/code/stackblitz/v7/angular/app.module.ts

@@ -0,0 +1,13 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: 'example',
+    loadComponent: () => import('./example.component').then((m) => m.ExampleComponent),
+  },
+  {
+    path: '',
+    redirectTo: 'example',
+    pathMatch: 'full',
+  },
+];

static/code/stackblitz/v7/angular/app.routes.ts

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ionic App</title>
+</head>
+
+<body>
+  <app-root></app-root>
+</body>
+
+</html>