diff --git a/cspell.json b/cspell.json
index bb7c714e854..9e75962d517 100644
--- a/cspell.json
+++ b/cspell.json
@@ -88,7 +88,6 @@
"amplifyconfiguration",
"AmplifyEventBus",
"amplifyframework",
- "AmplifyIonicModule",
"amplifyjsapp",
"amplifyMeta.json",
"AmplifyModules",
@@ -716,7 +715,6 @@
"Intelli",
"interceptApplication",
"Inventorys",
- "Ionicons",
"IOPS",
"ios",
"IoT",
diff --git a/generatePathMap.cjs.js b/generatePathMap.cjs.js
index 93ea32f755b..424ebab3f83 100644
--- a/generatePathMap.cjs.js
+++ b/generatePathMap.cjs.js
@@ -34,11 +34,8 @@ function generatePathMap(
'/start/q/integration/react-native': {
page: '/start/q/integration/[integration]'
},
- '/start/q/integration/ionic': {
- page: '/start/q/integration/[integration]'
- },
- '/start/q/integration/ios': {
- page: '/start/q/integration/[integration]'
+ "/start/q/integration/ios": {
+ page: "/start/q/integration/[integration]",
},
'/start/q/integration/flutter': {
page: '/start/q/integration/[integration]'
@@ -73,9 +70,6 @@ function generatePathMap(
'/ui/q/framework/vue': {
page: '/ui/q/framework/[framework]'
},
- '/ui/q/framework/ionic': {
- page: '/ui/q/framework/[framework]'
- },
'/ui/q/framework/flutter': {
page: '/ui/q/framework/[framework]'
},
@@ -94,9 +88,6 @@ function generatePathMap(
'/ui-legacy/q/framework/vue': {
page: '/ui-legacy/q/framework/[framework]'
},
- '/ui-legacy/q/framework/ionic': {
- page: '/ui-legacy/q/framework/[framework]'
- },
'/ui-legacy/q/framework/next': {
page: '/ui-legacy/q/framework/[framework]'
},
@@ -213,7 +204,6 @@ function generatePathMap(
'react-native',
'angular',
'vue',
- 'ionic',
'next'
];
}
diff --git a/public/assets/integrations/ionic.svg b/public/assets/integrations/ionic.svg
deleted file mode 100644
index 0383b48c16b..00000000000
--- a/public/assets/integrations/ionic.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
\ No newline at end of file
diff --git a/public/images/Logos/Ionic Color@2x.png b/public/images/Logos/Ionic Color@2x.png
deleted file mode 100644
index b77a63270bf..00000000000
Binary files a/public/images/Logos/Ionic Color@2x.png and /dev/null differ
diff --git a/public/images/Logos/Ionic-Color@1x.png b/public/images/Logos/Ionic-Color@1x.png
deleted file mode 100644
index 1e40fa359b4..00000000000
Binary files a/public/images/Logos/Ionic-Color@1x.png and /dev/null differ
diff --git a/public/images/logo_ionic.png b/public/images/logo_ionic.png
deleted file mode 100644
index 2f163b7b57f..00000000000
Binary files a/public/images/logo_ionic.png and /dev/null differ
diff --git a/src/constants/img.ts b/src/constants/img.ts
index 32695ef88fb..a4cc1f2494b 100644
--- a/src/constants/img.ts
+++ b/src/constants/img.ts
@@ -79,11 +79,6 @@ export const VUE = {
alt: "Vue Icon",
};
-export const IONIC = {
- src: "/assets/integrations/ionic.svg",
- alt: "Ionic Icon",
-};
-
export const NEXT = {
src: "/assets/integrations/next.svg",
alt: "Next.js Icon",
diff --git a/src/directory/directory.js b/src/directory/directory.js
index 83675547dbb..cc5cf5c968b 100644
--- a/src/directory/directory.js
+++ b/src/directory/directory.js
@@ -2089,7 +2089,6 @@ const directory = {
'next',
'android',
'ios',
- 'ionic',
'flutter'
],
items: []
@@ -2109,7 +2108,6 @@ const directory = {
'next',
'android',
'ios',
- 'ionic',
'flutter'
]
},
@@ -2125,7 +2123,6 @@ const directory = {
'next',
'android',
'ios',
- 'ionic',
'flutter'
]
},
@@ -2147,17 +2144,17 @@ const directory = {
{
title: 'Connect API and database to the app',
route: '/start/getting-started/data-model',
- filters: ['js', 'react', 'angular', 'vue', 'next', 'ionic']
+ filters: ['js', 'react', 'angular', 'vue', 'next']
},
{
title: 'Add authentication',
route: '/start/getting-started/auth',
- filters: ['react', 'angular', 'vue', 'ionic']
+ filters: ['react', 'angular', 'vue']
},
{
title: 'Deploy and host app',
route: '/start/getting-started/hosting',
- filters: ['js', 'react', 'angular', 'vue', 'next', 'ionic']
+ filters: ['js', 'react', 'angular', 'vue', 'next']
},
{
title: 'Next steps',
@@ -2171,7 +2168,6 @@ const directory = {
'next',
'android',
'ios',
- 'ionic',
'flutter'
]
}
diff --git a/src/fragments/guides/hosting/git-based-deployments.mdx b/src/fragments/guides/hosting/git-based-deployments.mdx
index f24a5f33f96..e02c77963da 100644
--- a/src/fragments/guides/hosting/git-based-deployments.mdx
+++ b/src/fragments/guides/hosting/git-based-deployments.mdx
@@ -5,8 +5,8 @@ In this example we will be deploying a __React__ app, but you can also also use
1. Static HTML
2. Vue
3. Angular
-4. Ionic
-5. Gatsby
+4. Solid
+5. Svelte
## 1. Create a new application
diff --git a/src/fragments/guides/hosting/local-deployments.mdx b/src/fragments/guides/hosting/local-deployments.mdx
index b9a78750276..b99803e1abe 100644
--- a/src/fragments/guides/hosting/local-deployments.mdx
+++ b/src/fragments/guides/hosting/local-deployments.mdx
@@ -5,8 +5,8 @@ In this example you will be deploying a React app, but you can also also use any
1. Static HTML
2. Vue
3. Angular
-4. Ionic
-5. Gatsby
+4. Solid
+5. Svelte
## 1. Create a new web app and change into the directory
diff --git a/src/fragments/lib-v1/geo/js/getting-started.mdx b/src/fragments/lib-v1/geo/js/getting-started.mdx
index e6cf11ccdf8..68707a15407 100644
--- a/src/fragments/lib-v1/geo/js/getting-started.mdx
+++ b/src/fragments/lib-v1/geo/js/getting-started.mdx
@@ -65,7 +65,7 @@ npm install aws-amplify
> **Note:** Make sure that version `4.3.0` or above is installed.
-Import and load the configuration file generated in previous step using Amplify CLI in your app. It’s recommended you add the Amplify configuration step to your app’s root entry point. For example `src/index.js` in a `create-react-app` generated React application or `main.ts` in Angular or Ionic.
+Import and load the configuration file generated in previous step using Amplify CLI in your app. It’s recommended you add the Amplify configuration step to your app’s root entry point. For example `src/index.js` in a `create-react-app` generated React application or `main.ts` in Angular.
```javascript
import { Amplify } from 'aws-amplify';
diff --git a/src/fragments/lib-v1/js.mdx b/src/fragments/lib-v1/js.mdx
index cfcf3188f8b..e00cc32d9d3 100644
--- a/src/fragments/lib-v1/js.mdx
+++ b/src/fragments/lib-v1/js.mdx
@@ -1,6 +1,6 @@
## Amplify JavaScript
-The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, Ionic, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
+The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
What's next? Here are some things you can add to your app:
diff --git a/src/fragments/lib-v1/predictions/js/getting-started.mdx b/src/fragments/lib-v1/predictions/js/getting-started.mdx
index ba01824ffb1..61b186ecff5 100644
--- a/src/fragments/lib-v1/predictions/js/getting-started.mdx
+++ b/src/fragments/lib-v1/predictions/js/getting-started.mdx
@@ -22,7 +22,7 @@ A configuration file called `aws-exports.js` will be copied to your configured s
## Configure the frontend
-Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular or Ionic.
+Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular.
```javascript
import { Amplify } from 'aws-amplify';
diff --git a/src/fragments/lib-v1/predictions/js/sample.mdx b/src/fragments/lib-v1/predictions/js/sample.mdx
index 14ce7a2f680..3c88b74c907 100644
--- a/src/fragments/lib-v1/predictions/js/sample.mdx
+++ b/src/fragments/lib-v1/predictions/js/sample.mdx
@@ -460,170 +460,4 @@ function App() {
export default App;
```
-Now run `yarn start` and press the buttons to demo the app.
-
-## Sample Ionic app
-
-First, be sure you have the latest Ionic CLI installed, then generate a new app (for this example you can use any template, but it's simplest to start with the Blank template to start):
-
-```bash
-npm i -g ionic
-ionic start predictions blank # the first argument is your project name, the second the template
-```
-
-Update the `src/polyfills.ts` and add to the top of the file `(window as any).global = window;`. Then, update the `src/tsconfig.app.json` file and add the "node" types:
-
-```
-{
- "extends": "../tsconfig.json",
- "compilerOptions": {
- "outDir": "../out-tsc/app",
- "types": ["node"]
- },
- "exclude": [
- "test.ts",
- "**/*.spec.ts"
- ]
-}
-
-```
-
-`src/app/home/home.page.ts`
-
-```javascript
-import { Component } from '@angular/core';
-import Predictions from '@aws-amplify/predictions';
-import { TextToSpeechOutput } from '@aws-amplify/predictions/lib-v1/types';
-
-@Component({
- selector: 'app-home',
- templateUrl: 'home.page.html',
- styleUrls: ['home.page.scss'],
-})
-export class HomePage {
-
- public textToTranslate = "Hello Amplify";
- public translateResult = "";
- public srcLang = "en";
- public targetLang = "de";
- public voiceId = "Salli";
- public speechUrl:string;
- public speakResult:boolean;
-
- constructor() {}
-
- public async translate() {
- const result = await Predictions.convert({
- translateText: {
- source: {
- text: this.textToTranslate,
- language : this.srcLang
- },
- targetLanguage: this.targetLang
- }
- });
- this.translateResult = result.text || "Error";
- if (this.speakResult) {
- this.generateSpeech(result.text);
- }
- }
-
- public async generateSpeech(textToGenerateSpeech: string) {
- const result:TextToSpeechOutput = await Predictions.convert({
- textToSpeech: {
- source: {
- text: textToGenerateSpeech,
- },
- voiceId: this.voiceId
- }
- });
- const audioCtx = new ((window as any).AudioContext || (window as any).webkitAudioContext)();
- const source = audioCtx.createBufferSource();
- audioCtx.decodeAudioData(result.audioStream, (buffer) => {
- source.buffer = buffer;
- source.connect(audioCtx.destination);
- source.start(audioCtx.currentTime);
- }, (err) => console.log({err}));
- }
-
- public selectSource(value: string) {
- this.srcLang = value;
- }
-
- public selectTarget(value: string) {
- this.targetLang = value;
- }
-
-}
-
-```
-
-#### `src/app/home/home.page.html`
-
-```html
-
-
-
- Amplify Predictions
-
-
-
-
-
-
-
- Convert
- Translate languages
-
-
-
-
-
- Source Language
-
- English
- Spanish
- German
- Norwegian
-
-
-
-
- Target Language
-
- English
- Spanish
- German
- Norwegian
-
-
-
-
-
-
-
-
-
-
-
-
- Translate
-
-
-
- Speak Result
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
+Now run `yarn start` and press the buttons to demo the app.
\ No newline at end of file
diff --git a/src/fragments/lib/geo/js/getting-started.mdx b/src/fragments/lib/geo/js/getting-started.mdx
index 76837107484..34dd1618e36 100644
--- a/src/fragments/lib/geo/js/getting-started.mdx
+++ b/src/fragments/lib/geo/js/getting-started.mdx
@@ -65,7 +65,7 @@ npm install aws-amplify
> **Note:** Make sure that version `4.3.0` or above is installed.
-Import and load the configuration file generated in previous step using Amplify CLI in your app. It’s recommended you add the Amplify configuration step to your app’s root entry point. For example `src/index.js` in a `create-react-app` generated React application or `main.ts` in Angular or Ionic.
+Import and load the configuration file generated in previous step using Amplify CLI in your app. It’s recommended you add the Amplify configuration step to your app’s root entry point. For example `src/index.js` in a `create-react-app` generated React application or `main.ts` in Angular.
```javascript
import { Amplify } from 'aws-amplify';
diff --git a/src/fragments/lib/js.mdx b/src/fragments/lib/js.mdx
index 1cdf7a0f8dd..ca63ec49404 100644
--- a/src/fragments/lib/js.mdx
+++ b/src/fragments/lib/js.mdx
@@ -1,6 +1,6 @@
## Amplify JavaScript
-The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, Ionic, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
+The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, Solid, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
What's next? Here are some things you can add to your app:
diff --git a/src/fragments/lib/predictions/js/getting-started.mdx b/src/fragments/lib/predictions/js/getting-started.mdx
index ba01824ffb1..61b186ecff5 100644
--- a/src/fragments/lib/predictions/js/getting-started.mdx
+++ b/src/fragments/lib/predictions/js/getting-started.mdx
@@ -22,7 +22,7 @@ A configuration file called `aws-exports.js` will be copied to your configured s
## Configure the frontend
-Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular or Ionic.
+Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular.
```javascript
import { Amplify } from 'aws-amplify';
diff --git a/src/fragments/lib/predictions/js/sample.mdx b/src/fragments/lib/predictions/js/sample.mdx
index dec41861c2e..3c88b74c907 100644
--- a/src/fragments/lib/predictions/js/sample.mdx
+++ b/src/fragments/lib/predictions/js/sample.mdx
@@ -460,170 +460,4 @@ function App() {
export default App;
```
-Now run `yarn start` and press the buttons to demo the app.
-
-## Sample Ionic app
-
-First, be sure you have the latest Ionic CLI installed, then generate a new app (for this example you can use any template, but it's simplest to start with the Blank template to start):
-
-```bash
-npm i -g ionic
-ionic start predictions blank # the first argument is your project name, the second the template
-```
-
-Update the `src/polyfills.ts` and add to the top of the file `(window as any).global = window;`. Then, update the `src/tsconfig.app.json` file and add the "node" types:
-
-```
-{
- "extends": "../tsconfig.json",
- "compilerOptions": {
- "outDir": "../out-tsc/app",
- "types": ["node"]
- },
- "exclude": [
- "test.ts",
- "**/*.spec.ts"
- ]
-}
-
-```
-
-`src/app/home/home.page.ts`
-
-```javascript
-import { Component } from '@angular/core';
-import Predictions from '@aws-amplify/predictions';
-import { TextToSpeechOutput } from '@aws-amplify/predictions/lib/types';
-
-@Component({
- selector: 'app-home',
- templateUrl: 'home.page.html',
- styleUrls: ['home.page.scss'],
-})
-export class HomePage {
-
- public textToTranslate = "Hello Amplify";
- public translateResult = "";
- public srcLang = "en";
- public targetLang = "de";
- public voiceId = "Salli";
- public speechUrl:string;
- public speakResult:boolean;
-
- constructor() {}
-
- public async translate() {
- const result = await Predictions.convert({
- translateText: {
- source: {
- text: this.textToTranslate,
- language : this.srcLang
- },
- targetLanguage: this.targetLang
- }
- });
- this.translateResult = result.text || "Error";
- if (this.speakResult) {
- this.generateSpeech(result.text);
- }
- }
-
- public async generateSpeech(textToGenerateSpeech: string) {
- const result:TextToSpeechOutput = await Predictions.convert({
- textToSpeech: {
- source: {
- text: textToGenerateSpeech,
- },
- voiceId: this.voiceId
- }
- });
- const audioCtx = new ((window as any).AudioContext || (window as any).webkitAudioContext)();
- const source = audioCtx.createBufferSource();
- audioCtx.decodeAudioData(result.audioStream, (buffer) => {
- source.buffer = buffer;
- source.connect(audioCtx.destination);
- source.start(audioCtx.currentTime);
- }, (err) => console.log({err}));
- }
-
- public selectSource(value: string) {
- this.srcLang = value;
- }
-
- public selectTarget(value: string) {
- this.targetLang = value;
- }
-
-}
-
-```
-
-#### `src/app/home/home.page.html`
-
-```html
-
-
-
- Amplify Predictions
-
-
-
-
-
-
-
- Convert
- Translate languages
-
-
-
-
-
- Source Language
-
- English
- Spanish
- German
- Norwegian
-
-
-
-
- Target Language
-
- English
- Spanish
- German
- Norwegian
-
-
-
-
-
-
-
-
-
-
-
-
- Translate
-
-
-
- Speak Result
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
+Now run `yarn start` and press the buttons to demo the app.
\ No newline at end of file
diff --git a/src/fragments/lib/project-setup/js/getting-started.mdx b/src/fragments/lib/project-setup/js/getting-started.mdx
index 464828a1f4e..8e40a31ed90 100644
--- a/src/fragments/lib/project-setup/js/getting-started.mdx
+++ b/src/fragments/lib/project-setup/js/getting-started.mdx
@@ -1,5 +1,4 @@
import js0 from '/src/fragments/start/getting-started/angular/setup.mdx';
-import js1 from '/src/fragments/start/getting-started/ionic/setup.mdx';
import js2 from '/src/fragments/start/getting-started/react/setup.mdx';
import js3 from '/src/fragments/start/getting-started/vue/setup.mdx';
import js5 from '/src/fragments/start/getting-started/next/setup.mdx';
@@ -14,12 +13,6 @@ import js6 from '/src/fragments/start/getting-started/vanillajs/setup.mdx';
-
-
-
-
-
-
diff --git a/src/fragments/lib/reactnative.mdx b/src/fragments/lib/reactnative.mdx
index 65e12ac14c9..c533aec7436 100644
--- a/src/fragments/lib/reactnative.mdx
+++ b/src/fragments/lib/reactnative.mdx
@@ -1,6 +1,6 @@
## Amplify JavaScript
-The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, Ionic, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
+The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
What's next? Here are some things you can add to your app:
diff --git a/src/fragments/start/getting-started/ionic/build.mdx b/src/fragments/start/getting-started/ionic/build.mdx
deleted file mode 100644
index 11dea671c09..00000000000
--- a/src/fragments/start/getting-started/ionic/build.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-## What we'll build
-
-This tutorial guides you through setting up a backend and integrating that backend with your web app. You will create a “Todo app” with a GraphQL API and to store and retrieve items in a cloud database, as well as receive updates over a realtime subscription.
-
-[GraphQL](http://graphql.org) is a data language that was developed to enable apps to fetch data from APIs. It has a declarative, self-documenting style. In a GraphQL operation, the client specifies how to structure the data when it is returned by the server. This makes it possible for the client to query only for the data it needs, in the format that it needs it in.
diff --git a/src/fragments/start/getting-started/ionic/data-model.mdx b/src/fragments/start/getting-started/ionic/data-model.mdx
deleted file mode 100644
index 2284f59623e..00000000000
--- a/src/fragments/start/getting-started/ionic/data-model.mdx
+++ /dev/null
@@ -1,207 +0,0 @@
-### Model the data with GraphQL transform
-
-Add a [GraphQL API](https://docs.aws.amazon.com/appsync/latest/devguide/designing-a-graphql-api.html) to your app and automatically provision a database by running the following command from the root of your application directory:
-
-```bash
-amplify add api
-```
-
-Accept the **default values** which are highlighted below:
-
-```console
-? Select from one of the below mentioned services: GraphQL
-? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
-? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
-✔ Do you want to edit the schema now? (Y/n) · yes
-```
-
-The CLI should open this GraphQL schema in your text editor.
-
-**amplify/backend/api/myapi/schema.graphql**
-
-```graphql
-type Todo @model {
- id: ID!
- name: String!
- description: String
-}
-```
-
-The schema generated is for a Todo app. You'll notice a directive on the `Todo` type of `@model`. This directive is part of the [GraphQL transform](/cli/graphql/data-modeling) library of Amplify.
-
-The GraphQL Transform Library provides custom directives you can use in your schema that allow you to do things like define data models, set up authentication and authorization rules, configure serverless functions as resolvers, and more.
-
-A type decorated with the `@model` directive will scaffold out the database table for the type (Todo table), the schema for CRUD (create, read, update, delete) and list operations, and the GraphQL resolvers needed to make everything work together.
-
-From the command line, press **enter** to accept the schema and continue to the next steps.
-
-## Create GraphQL API and database
-
-Create required backend resources for your configured api with the following command:
-
-```bash
-amplify push
-```
-
-### Code generation
-
-Since you added an API the `amplify push` process will automatically prompt for codegen (select `y` when prompted for automatic query and code generation). For Ionic applications, choose **Angular** which will create an `API.service.ts` file in the app directory.
-
-Next, run the following command to check Amplify's status:
-
-```bash
-amplify status
-```
-
-This will give us the current status of the Amplify project, including the current environment, any categories that have been created, and what state those categories are in. It should look similar to this:
-
-```console
-Current Environment: dev
-
-| Category | Resource name | Operation | Provider plugin |
-| -------- | ------------- | --------- | ----------------- |
-| Api | myapi | No Change | awscloudformation |
-```
-
-### Test your API
-
-You can open the AWS console to run Queries, Mutation, or Subscription against your new API at any time directly by running the following command:
-
-```bash
-amplify console api
-```
-
-When prompted, select **GraphQL**. This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.
-
-## Connect frontend to API
-
-Update **src/main.ts** to configure the library:
-
-```javascript
-import { Amplify } from 'aws-amplify';
-import aws_exports from './aws-exports';
-
-Amplify.configure(aws_exports);
-```
-
-When working with underlying `aws-js-sdk`, the "node" package should be included in _types_ compiler option. update your `src/tsconfig.app.json`:
-
-```json
-"compilerOptions": {
- "types" : ["node"]
-}
-```
-
-Note: If you are using Angular 6 or above, you may need to add the following to the top of your `src/polyfills.ts` file:
-
-```
-(window as any).global = window;
-
-(window as any).process = {
- env: { DEBUG: undefined },
-};
-```
-
-First, enable the `AmplifyAuthenticatorModule` in `src/app/app.module.ts`:
-
-```javascript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouteReuseStrategy } from '@angular/router';
-
-import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
-
-@NgModule({
- declarations: [AppComponent],
- entryComponents: [],
- imports: [
- BrowserModule,
- IonicModule.forRoot(),
- AppRoutingModule,
- AmplifyAuthenticatorModule // UI Authenticator Module
- ],
- providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
- bootstrap: [AppComponent]
-})
-export class AppModule {}
-```
-
-Then make sure to add the Authenticator styles into your `src/global.scss` file.
-
-```
-@import '~@aws-amplify/ui-angular/theme.css';
-```
-
-Next, in your `src/app/app.component.ts` file, add the following imports and modifications to your class to to add data to your database with a mutation by using the `API.service` file which was generated when you ran `amplify add api`:
-
-```javascript
-import { Component, OnInit } from '@angular/core';
-import { APIService, Todo } from './API.service';
-
-@Component({
- selector: 'app-root',
- templateUrl: 'app.component.html',
- styleUrls: ['app.component.scss'],
-})
-export class AppComponent implements OnInit {
- public todos: Array;
-
- constructor(private apiService: APIService) {}
-
- ngOnInit() {}
-
- createTodo() {
- this.apiService.CreateTodo({
- name: 'ionic',
- description: 'testing',
- });
- }
-}
-
-```
-
-Next, update `ngOnInit()` in `src/app/app.component.ts` to list all items in the database by running a query on start and populating a local variable called `todos`:
-
-```javascript
- ngOnInit() {
- this.apiService.ListTodos().then((evt) => {
- this.todos = evt.items;
- });
- }
-```
-
-Update the code in `src/app/app.component.html` with the following to display the list of todos:
-
-```html
-
- Add Data
-
-
-
{{item.name}} - {{item.description}}
-
-
-
-```
-
-Finally, to subscribe to realtime data, update `ngOnInit()` to setup a subscription on app start and update the `todos` array when new events are received:
-
-```javascript
- ngOnInit() {
- this.apiService.ListTodos().then((evt) => {
- this.todos = evt.items;
- });
-
- this.apiService.OnCreateTodoListener.subscribe((evt) => {
- const data = evt.value.data.onCreateTodo;
- this.todos = [...this.todos, data];
- });
- }
-```
-
-> The code above imports only the API and PubSub category. To import the entire Amplify library use `import { Amplify } from 'aws-amplify'`. However, importing only the required categories is recommended as it will greatly reduce the final bundle size.
-
-After restarting your app using `npm start` go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs.
diff --git a/src/fragments/start/getting-started/ionic/hosting.mdx b/src/fragments/start/getting-started/ionic/hosting.mdx
deleted file mode 100644
index baf522e145a..00000000000
--- a/src/fragments/start/getting-started/ionic/hosting.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-You've successfully built your first app with Amplify! Now that you've built something, it's time to deploy it to the web with Amplify Console!
-
-## Add hosting to your app
-
-You can manually deploy your web app or setup automatic continuous deployment. In this guide we'll cover how to manually deploy and host your static web app to quickly share with others. If you want to learn about continuous deployment instead, please follow [this guide](https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#standard).
-
-From the root of your project, run the following command and select the **bolded options**.
-
-```bash
-amplify add hosting
-```
-
-```console
-✔ Select the plugin module to execute · Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
-```
-
-## Publish your app
-
-Run the following command to publish your app.
-
-```bash
-amplify publish
-```
-
-👏 Congratulations, your app is online!
-
-
-
-After publishing, your terminal will display your app URL hosted on a `amplifyapp.com` domain. Whenever you have additional changes to publish, just re-run the `amplify publish` command.
-
-You may get an "AccessDenied" error if your app's distribution directory is not set properly. To fix this, change the distribution directory via `amplify configure project` and then re-run `amplify publish`.
-
-To view your app and hosting configuration in the Amplify Console, run the `amplify console` command.
-
-Note: In order to delete all the environments of the project from the cloud and wipe out all the local files created by Amplify CLI, run `amplify delete` command. Now, to observe that your Amplify project resources have been deleted, run `amplify status` command.
diff --git a/src/fragments/start/getting-started/ionic/nextsteps.mdx b/src/fragments/start/getting-started/ionic/nextsteps.mdx
deleted file mode 100644
index 4afd6b3e412..00000000000
--- a/src/fragments/start/getting-started/ionic/nextsteps.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
-- [Authentication](/lib/auth/getting-started)
-- [DataStore](/lib/datastore/getting-started)
-- [User File Storage](/lib/storage/getting-started)
-- [Serverless APIs](/lib/graphqlapi/getting-started)
-- [Analytics](/lib/analytics/getting-started)
-- [AI/ML](/lib/predictions/getting-started)
-- [Push Notification](/lib/push-notifications/getting-started)
-- [PubSub](/lib/pubsub/getting-started)
-- [AR/VR](/lib/xr/getting-started)
\ No newline at end of file
diff --git a/src/fragments/start/getting-started/ionic/setup.mdx b/src/fragments/start/getting-started/ionic/setup.mdx
deleted file mode 100644
index 5e4526f813d..00000000000
--- a/src/fragments/start/getting-started/ionic/setup.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-To set up the project, we'll first create a new Ionic app with the Ionic CLI. We'll then add Amplify and initialize a new project.
-
-From your projects directory, run the following commands:
-
-```bash
-npm install -g ionic
-ionic start myAmplifyProject blank --type=angular
-cd myAmplifyProject
-npm start
-```
-
-This runs a development server and allows us to see the output generated by the build, you can see the running app by navigating to `localhost`.
-
-## Initialize a new backend
-
-Now that we have a running Ionic app, it's time to set up Amplify so that we can create the necessary backend services needed to support the app.
-
-Open a new terminal. From the root of the project, run:
-
-```bash
-amplify init
-```
-
-When you initialize Amplify you'll be prompted for some information about the app:
-
-```console
-Note: It is recommended to run this command from the root of your app directory
-? Enter a name for the project todo
-The following configuration will be applied:
-
-Project information
-| Name: todo
-| Environment: dev
-| Default editor: Visual Studio Code
-| App type: javascript
-| Javascript framework: angular
-| Source Directory Path: src
-| Distribution Directory Path: www
-| Build Command: npm run-script build
-| Start Command: ng serve
-
-? Initialize the project with the above configuration? (Y/n) Y
-```
-
-When you initialize a new Amplify project, a few things happen:
-
-- It creates a top level directory called `amplify` that stores your backend definition. During the tutorial you'll add capabilities such as authentication, GraphQL API, storage, and set up authorization rules for the API. As you add features, the `amplify` folder will grow with infrastructure-as-code templates that define your backend stack. Infrastructure-as-code is a best practice way to create a replicable backend stack.
-- It creates a file called `aws-exports.js` in the `src` directory that holds all the configuration for the services you create with Amplify. This is how the Amplify client is able to get the necessary information about your backend services.
-- It modifies the `.gitignore` file, adding some generated files to the ignore list
-- A cloud project is created for you in the AWS Amplify Console that can be accessed by running `amplify console`. The Console provides a list of backend environments, deep links to provisioned resources per Amplify category, status of recent deployments, and instructions on how to promote, clone, pull, and delete backend resources
-
-## Install Amplify libraries
-
-Make sure to install the latest version of the `aws-amplify` core and the `@aws-amplify/ui-angular` library.
-
-```sh
-$ npm install aws-amplify @aws-amplify/ui-angular
-```
-
-The `@aws-amplify/ui-angular` package is a set of Angular components and an Angular provider which helps integrate your application with the `aws-amplify` library.
-
-
- If you run into any errors after installing the ui-angular package, including
- any issues with unhandled promise rejections or TypeScript errors, please see
- our{' '}
-
- Angular Getting Started Troubleshooting Guide.
-
-
diff --git a/src/fragments/ui-legacy/auth/ionic/authenticator.mdx b/src/fragments/ui-legacy/auth/ionic/authenticator.mdx
deleted file mode 100644
index 390e735897c..00000000000
--- a/src/fragments/ui-legacy/auth/ionic/authenticator.mdx
+++ /dev/null
@@ -1,188 +0,0 @@
-AWS Amplify provides UI components that you can use in your view templates.
-
-The Authenticator component creates a drop-in user authentication experience. Add the `amplify-authenticator` component to your `app.component.html` view:
-
-```html
-
-```
-
-### SignUp Configuration
-The SignUp component provides your users with the ability to sign up. It is included as part of the ```amplify-authenticator``` component, but can also be used in isolation:
-
-Usage:
-``````
-or
-``````
-
-The SignUp Component accepts a 'signUpConfig' object which allows you to customize it.
-
-import angular0 from "/src/fragments/ui-legacy/sign-up-attributes.mdx";
-
-
-
-The signUpFields array in turn consist of an array of objects, each describing a field that will appear in sign up form that your users fill out:
-
-import angular1 from "/src/fragments/ui-legacy/sign-up-fields.mdx";
-
-
-
-The following example will replace all the default sign up fields with the ones defined in the `signUpFields` array.
-In `app.component.ts`:
-```js
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-export class AppComponent {
- signUpConfig = {
- header: 'My Customized Sign Up',
- hideAllDefaults: true,
- defaultCountryCode: '1',
- signUpFields: [
- {
- label: 'Email',
- key: 'email',
- required: true,
- displayOrder: 1,
- type: 'string',
- },
- {
- label: 'Password',
- key: 'password',
- required: true,
- displayOrder: 2,
- type: 'password'
- },
- {
- label: 'Phone Number',
- key: 'phone_number',
- required: true,
- displayOrder: 3,
- type: 'string'
- },
- {
- label: 'Custom Attribute',
- key: 'custom_attr',
- required: false,
- displayOrder: 4,
- type: 'string',
- custom: true
- }
- ]
- }
-}
-```
-
-In `app.component.html`:
-```html
-
-```
-
-### Sign in or sign up with email or phone number
-If the user pool is set to allow email addresses or phone numbers as the username, you can then change the UI components accordingly by using `usernameAttributes`.
-
-In `app.component.ts`:
-```js
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-export class AppComponent {
- usernameAttributes = "email";
-}
-```
-
-In `app.component.html`:
-``````
-
-The `usernameAttributes` should be either `email` or `phone_number` based on your user pool setting.
-
-Note: if you are using custom signUpFields to customize the `username` field, then you need to make sure either the label of that field is the same value you set in `usernameAttributes` or the key of the field is `username`.
-
-For example:
-```js
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-
-export class AppComponent {
- usernameAttributes: 'My user name',
- signUpConfig = {
- header: 'My Customized Sign Up',
- hideAllDefaults: true,
- defaultCountryCode: '1',
- signUpFields: [
- {
- label: 'My user name',
- key: 'username',
- required: true,
- displayOrder: 1,
- type: 'string',
- },
- {
- label: 'Password',
- key: 'password',
- required: true,
- displayOrder: 2,
- type: 'password'
- },
- {
- label: 'PhoneNumber',
- key: 'phone_number',
- required: true,
- displayOrder: 3,
- type: 'string'
- },
- {
- label: 'Custom Attribute',
- key: 'custom_attr',
- required: false,
- displayOrder: 4,
- type: 'string',
- custom: true
- }
- ]
- }
-```
-
----
-
-### Replacing Authentication Components With Custom Components
-The child components displayed within the Authenticator can be hidden or replaced with custom components.
-
-Usage:
-``````
-
-#### Using Authentication Components Without the Authenticator
-The child components displayed within the Authenticator can be used as standalone components. This could be useful in situations where, for example, you want to display your own components for specific pieces of the registration and authentication flow.
-
-These components include:
-
-```javascript
-
-
-
-
-
-
-
-```
-
-Each of these components expects to receive the authState object, which consists of a 'state' string and a 'user' object. The authState is an observable managed by the amplifyService, so make sure that your own custom components set the authState appropriately.
-
-Example:
-```javascript
-this.amplifyService.setAuthState({ state: 'confirmSignIn', user });
-```
-
-Additional details about the authState can be found in the [Subscribe to Authentication State Changes](/ui-legacy/auth/authenticator#subscribe-to-authentication-state-changes) section.
diff --git a/src/fragments/ui-legacy/interactions/ionic/chatbot.mdx b/src/fragments/ui-legacy/interactions/ionic/chatbot.mdx
deleted file mode 100644
index 2fb7bf1b441..00000000000
--- a/src/fragments/ui-legacy/interactions/ionic/chatbot.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
-The `amplify-interactions` component provides you with a drop-in Chat component that supports seven properties:
-
-1. `bot`: The name of the Amazon Lex Chatbot
-
-2. `clearComplete`: Indicates whether or not the messages should be cleared at the
-end of the conversation.
-
-3. `complete`: Dispatched when the conversation is completed.
-4. `voiceConfig`: If needed, you can also pass `voiceConfig` from your app component to modify the silence detection parameters, like in this example:
-
-```js
-customVoiceConfig = {
- silenceDetectionConfig: {
- time: 2000,
- amplitude: 0.2
- }
-}
-
-```
-5. `voiceEnabled`: Enables voice user input. Defaults to `false`
-
-Note: In order for voice input to work with Amazon Lex, you may have to enable Output voice in the AWS Console. Under the Amazon Lex service, click on your configured Lex chatbot and go to Settings -> General and pick your desired Output voice. Then, click Build. If you have forgotten to enable Output voice, you will get an error like this:
-```
-ChatBot Error: Invalid Bot Configuration: This bot does not have a Polly voice ID associated with it. For voice interaction with the user, set a voice ID
-```
-
-6. `textEnabled`: Enables text user input Defaults to `true`
-7. `conversationModeOn`: Turns voice conversation mode on/off. Defaults to `off`
-
-```html
-
-
-```
-
-See the [Interactions documentation](/lib/interactions/getting-started) for information on creating an Amazon Lex Chatbot.
\ No newline at end of file
diff --git a/src/fragments/ui-legacy/ionic/overview.mdx b/src/fragments/ui-legacy/ionic/overview.mdx
deleted file mode 100644
index 51ee9b85ceb..00000000000
--- a/src/fragments/ui-legacy/ionic/overview.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-## Ionic 4 Components
-The Angular components included in this library can optionally be presented with Ionic-specific styling. To do so, simply include the ```AmplifyIonicModule``` alongside the ```AmplifyAngularModule```. Then, pass in ```framework="Ionic"``` into the component.
-
-Example:
-
-```html
- ...
-
- ...
-```
-
-This will cause a ```ComponentFactoryResolver``` to display an Ionic version of the desired component. You can also bypass the ```ComponentFactoryResolver``` by using the vanilla Angular or Ionic components directly using the ```-core``` or ```-ionic``` suffix.
-
-Example:
-
-```html
- ...
-
- ...
-```
\ No newline at end of file
diff --git a/src/fragments/ui-legacy/storage/ionic/photo-picker.mdx b/src/fragments/ui-legacy/storage/ionic/photo-picker.mdx
deleted file mode 100644
index 6fa9c660111..00000000000
--- a/src/fragments/ui-legacy/storage/ionic/photo-picker.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-The Photo Picker component will render a file upload control that will allow choosing a local image and uploading it to Amazon S3. Once an image is selected, a base64 encoded image preview will be displayed automatically. To render photo picker in an Angular view, use *amplify-photo-picker* component:
-
-```html
-
-
-```
-
- - `(picked)` - Emitted when an image is selected. The event will contain the `File` object which can be used for upload.
- - `(loaded)` - Emitted when an image preview has been rendered and displayed.
- - `path` - An optional S3 image path (prefix).
- - `storageOptions` - An object passed within the ‘options’ property in the Storage.put request. This can be used to set the permissions ‘level’ property of the objects being uploaded i.e. ‘private’, ‘protected’, or ‘public’.
-
- [Learn more about S3 permissions.](/lib/storage/configureaccess)
diff --git a/src/fragments/ui-legacy/storage/ionic/s3-album.mdx b/src/fragments/ui-legacy/storage/ionic/s3-album.mdx
deleted file mode 100644
index c8b33b1190d..00000000000
--- a/src/fragments/ui-legacy/storage/ionic/s3-album.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-The Album component will display a list of images from the configured S3 Storage bucket. Use the *amplify-s3-album* component in your Angular view:
-
-```html
-
-
-```
-- `options` - object which is passed as the 'options' parameter to the .get request. This can be used to set the 'level' of the objects being requested (i.e. 'protected', 'private', or 'public')
-- `(selected)` - event used to retrieve the S3 signed URL of the clicked image:
-
-```javascript
-onAlbumImageSelected( event ) {
- window.open( event, '_blank' );
-}
-```
\ No newline at end of file
diff --git a/src/fragments/ui-legacy/xr/ionic/sumerian-scene.mdx b/src/fragments/ui-legacy/xr/ionic/sumerian-scene.mdx
deleted file mode 100644
index b8823d8fa84..00000000000
--- a/src/fragments/ui-legacy/xr/ionic/sumerian-scene.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-The `amplify-sumerian-scene` component provides you with a prebuilt UI for loading and displaying Amazon Sumerian scenes inside of your website:
-
-
-
-Note: The UI component will inherit the height and width of the direct parent DOM element. Make sure to set the width and height styling on the parent DOM element to your desired size.
-
-
-
-
-```javascript
-// sceneName: the configured friendly scene you would like to load
-
-```
-
-See the [XR documentation](/lib/xr/getting-started) for information on creating and publishing a Sumerian scene.
\ No newline at end of file
diff --git a/src/fragments/ui/auth/ionic/auth-state-management.mdx b/src/fragments/ui/auth/ionic/auth-state-management.mdx
deleted file mode 100644
index 396e8162aea..00000000000
--- a/src/fragments/ui/auth/ionic/auth-state-management.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
-import all0 from "/src/fragments/ui/angular/configure-module.mdx";
-
-
-
-Replace the content inside of *app.component.ts* with the following:
-```js
-import { Component, ChangeDetectorRef } from '@angular/core';
-import { onAuthUIStateChange, CognitoUserInterface, AuthState } from '@aws-amplify/ui-components';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-export class AppComponent {
- title = 'ionic-angular-auth';
- user: CognitoUserInterface | undefined;
- authState: AuthState;
-
- constructor(private ref: ChangeDetectorRef) {}
-
- ngOnInit() {
- onAuthUIStateChange((authState, authData) => {
- this.authState = authState;
- this.user = authData as CognitoUserInterface;
- if (!this.ref['destroyed']) {
- this.ref.detectChanges();
- }
- })
- }
-
- ngOnDestroy() {
- return onAuthUIStateChange;
- }
-}
-```
-
-Replace the content inside of *app.component.html* with the following:
-```html
-
-
-