Merge branch 'main' into docs/cdn-updates

Author: brandyscarney

docs/deployment/progressive-web-app.md

@@ -19,7 +19,13 @@ Because Ionic Apps are built with web technologies, they can run just as well as
 For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular, React, and Vue.
 
 <DocsCards>
-  <DocsCard header="Angular" href="../angular/pwa" img="/img/frameworks/angular.svg"></DocsCard>
-  <DocsCard header="React" href="../react/pwa" img="/img/frameworks/react.svg"></DocsCard>
-  <DocsCard header="Vue" href="../vue/pwa" img="/img/frameworks/vue.svg"></DocsCard>
+  <DocsCard header="Angular" href="../angular/pwa" img="/img/frameworks/angular.svg">
+    Get started with progressive web apps in Angular.
+  </DocsCard>
+  <DocsCard header="React" href="../react/pwa" img="/img/frameworks/react.svg">
+    Get started with progressive web apps in React.
+  </DocsCard>
+  <DocsCard header="Vue" href="../vue/pwa" img="/img/frameworks/vue.svg">
+    Get started with progressive web apps in Vue.
+  </DocsCard>
 </DocsCards>

docs/developing/android.md

@@ -16,7 +16,7 @@ import DocsCards from '@components/global/DocsCards';
 
 :::info Looking for the legacy Android guide?
 
-The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/android).
+The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/android).
 
 :::
 
@@ -30,7 +30,7 @@ The Developing for Android guide has officially migrated to the [Capacitor docum
   </DocsCard>
   <DocsCard
     header="Developing for Android with Cordova (Legacy)"
-    href="https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/android"
+    href="https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/android"
     icon="/icons/native-cordova-bot.png"
   >
     <p>Learn the fundamentals you need to know to start building Android apps with Ionic Framework and Cordova.</p>

docs/developing/ios.md

@@ -17,7 +17,7 @@ import DocsCards from '@components/global/DocsCards';
 
 :::info Looking for the legacy iOS guide?
 
-The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios).
+The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/ios).
 
 :::
 
@@ -31,7 +31,7 @@ The Developing for iOS guide has officially migrated to the [Capacitor documenta
   </DocsCard>
   <DocsCard
     header="Developing for iOS with Cordova (Legacy)"
-    href="https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios"
+    href="https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/ios"
     icon="/icons/native-cordova-bot.png"
   >
     <p>Learn the fundamentals you need to know to start building iOS apps with Ionic Framework and Cordova.</p>

src/components/global/Playground/index.tsx

@@ -153,7 +153,7 @@ export default function Playground({
    * The major version of Ionic to use in the generated StackBlitz examples.
    * This will also load assets for StackBlitz from the specified version directory.
    */
-  version: number;
+  version: string;
 }) {
   if (!code || Object.keys(code).length === 0) {
     console.warn('No code usage examples provided for this Playground example.');

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

@@ -38,10 +38,10 @@ export interface EditorOptions {
    */
   mode?: string;
 
-  version?: number;
+  version?: string;
 }
 
-const loadSourceFiles = async (files: string[], version: number) => {
+const loadSourceFiles = async (files: string[], version: string) => {
   const versionDir = `v${version}`;
   const sourceFiles = await Promise.all(files.map((f) => fetch(`/docs/code/stackblitz/${versionDir}/${f}`)));
   return await Promise.all(sourceFiles.map((res) => res.text()));
@@ -159,7 +159,14 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     ...options?.files,
   };
 
-  files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`);
+  if (options?.version === '6') {
+    files[main] = files[main].replace(
+      'importProvidersFrom(IonicModule.forRoot({ }))',
+      `importProvidersFrom(IonicModule.forRoot({ mode: '${options?.mode}' }))`
+    );
+  } else {
+    files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`);
+  }
 
   sdk.openProject({
     template: 'node',

static/code/stackblitz/v6/angular/angular.json

@@ -4,50 +4,64 @@
   "newProjectRoot": "projects",
   "projects": {
     "app": {
+      "projectType": "application",
       "root": "",
       "sourceRoot": "src",
-      "projectType": "application",
       "prefix": "app",
-      "schematics": {},
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist",
             "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": []
           },
           "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",
@@ -57,8 +71,15 @@
           "configurations": {
             "production": {
               "browserTarget": "app:build:production"
+            },
+            "development": {
+              "browserTarget": "app:build:development"
+            },
+            "ci": {
+              "progress": false
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -73,46 +94,41 @@
             "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"
+            "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/v6/angular/app.component.html

@@ -1,3 +1,5 @@
 <ion-app>
-  <app-example class="ion-page"></app-example>
+  <app-example class="ion-page">
+    <router-outlet></router-outlet>
+  </app-example>
 </ion-app>

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

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

static/code/stackblitz/v6/angular/app.component.withContent.html

@@ -1,5 +1,7 @@
 <ion-app>
   <ion-content class="ion-padding">
-    <app-example></app-example>
+    <app-example>
+      <router-outlet></router-outlet>
+    </app-example>
   </ion-content>
 </ion-app>

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

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