Skip to content

Commit

Permalink
docs(updating): clean up verbiage and broken links on migration guides (
Browse files Browse the repository at this point in the history
  • Loading branch information
brandyscarney authored Mar 21, 2023
1 parent 8c65f1a commit 45f7feb
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 31 deletions.
28 changes: 16 additions & 12 deletions docs/updating/4-0.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
---
title: Updating to 4.0
title: Updating to v4
---

# Updating from Ionic 1-3 to Ionic 4
# Updating to Ionic 4

## Migrating from Ionic 3.0 to Ionic 4.0
## Updating from Ionic 3 to 4

:::note
For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refer to [the breaking changes document](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md) in the Ionic core repo.
This guide assumes that you have already updated your app to the latest version of Ionic 3. If you are using Ionic 1 or 2, Make sure to follow the [Updating from Ionic 1 to 4 Guide](#updating-from-ionic-1-to-4) instead.
:::

:::info Breaking Changes
For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v4.md) in the Ionic Framework repository.
:::

We suggest the following general process when migrating an existing application from Ionic 3 to 4:
Expand All @@ -32,7 +36,7 @@ In Ionic 4, the package name is `@ionic/angular`. Uninstall Ionic 3 and install

```shell
$ npm uninstall ionic-angular
$ npm install @ionic/angular
$ npm install @ionic/angular@v4-lts
```

While migrating an app, update the imports from `ionic-angular` to `@ionic/angular`.
Expand Down Expand Up @@ -243,11 +247,11 @@ Since v4 moved to Custom Elements, there's been a significant change to the mark

To help with these markup changes, we've released a TSLint-based <a href="https://github.com/ionic-team/v4-migration-tslint" target="_blank">Migration Tool</a>, which detects issues and can even fix some of them automatically.

## Migrating from Ionic 1.0 to Ionic 4.0
## Updating from Ionic 1 to 4

### Ionic 1.0 to Ionic 4.0: What’s Involved?
### Ionic 1 to Ionic 4: What’s Involved?

Migrating from Ionic 1 to Ionic 4.0 involves moving from AngularJS (aka Angular 1) to Angular 7+. There are many architectural differences between these versions, so some of the app code will have to be rewritten. The amount of work involved depends on the complexity and size of your app.
Migrating from Ionic 1 to Ionic 4 involves moving from AngularJS (aka Angular 1) to Angular 7+. There are many architectural differences between these versions, so some of the app code will have to be rewritten. The amount of work involved depends on the complexity and size of your app.

One upside is that for the most part, the Ionic UI components you know and love from V1 haven’t changed much.

Expand All @@ -261,18 +265,18 @@ Here are some considerations to review before beginning the upgrade:

Once your development team has identified a good time frame for beginning the migration, Ionic recommends feature-freezing the Ionic 1 application and getting the code in order: Fix any major bugs, eliminate tech debt, and reorganize as you see fit. Then, identify which features to migrate over and which to abandon.

Once the Ionic 1 app is stable, create a new Ionic 4.0 project. The majority of the dev team’s attention should be given to the new project; only bugs should be fixed in the Ionic 1 app to ensure that the transition happens as quickly and smoothly as possible.
Once the Ionic 1 app is stable, create a new Ionic 4 project. The majority of the dev team’s attention should be given to the new project; only bugs should be fixed in the Ionic 1 app to ensure that the transition happens as quickly and smoothly as possible.

Once the team is comfortable that the Ionic 4.0 app has become stable and has fulfilled a core set of features, you can then shut down the Ionic 1 app.
Once the team is comfortable that the Ionic 4 app has become stable and has fulfilled a core set of features, you can then shut down the Ionic 1 app.

### Moving From AngularJS to Angular

Please reference official [Angular upgrade guide](https://angular.io/guide/upgrade) information.

### Ionic Changes

Our Ionic 3.0 to Ionic 4.0 migration sections above may prove to be a useful reference. Generate a new Ionic 4.0 project using the blank starter (see [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4.0 components. Happy building!
Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (see [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4 components. Happy building!

### Need Assistance?

If your team would like assistance with the migration, please [reach out to us](https://ionicframework.com/enterprise-engine)! Ionic offers Advisory Services, which includes Ionic 4.0 training, architecture reviews, and migration assistance.
If your team would like assistance with the migration, please [reach out to us](https://ionicframework.com/enterprise-engine)! Ionic offers Advisory Services, which includes Ionic 4 training, architecture reviews, and migration assistance.
22 changes: 11 additions & 11 deletions docs/updating/5-0.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
---
title: Updating to 5.0
title: Updating to v5
---

# Updating from Ionic 4 to Ionic 5
# Updating from Ionic 4 to 5

Migrating an app from 4.x to 5.x requires a few updates to the API properties, CSS utilities, and the installed package dependencies.
Migrating an app from Ionic 4 to 5 requires a few updates to the API properties, CSS utilities, and the installed package dependencies.

:::note
This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Upgrading to Ionic 4 Guide](./4-0) before starting this guide.
This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0) before starting this guide.
:::

### API and CSS Updates

For a complete list of breaking changes from 4.x to 5.x, please refer to [the breaking changes document](https://github.com/ionic-team/ionic/blob/master/BREAKING.md#version-5x) in the Ionic core repo.
:::info Breaking Changes
For a **complete list of breaking changes** from Ionic 4 to Ionic 5, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md) in the Ionic Framework repository.
:::

### Packages and Dependencies

For Angular based projects, you can simply run:

```shell
npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save
npm install @ionic/angular@v5-lts @ionic/angular-toolkit@4.0.0 --save
```

For React projects, you can run:

```shell
npm install @ionic/react@latest @ionic/react-router@latest ionicons@latest
npm install @ionic/react@v5-lts @ionic/react-router@v5-lts ionicons@5.5.3
```

For Stencil / vanilla JS projects, you can run:

```shell
npm i @ionic/core@latest --save
npm i @ionic/core@v5-lts --save
```

If you would like a fresh project starter, a new project base can be created from the CLI and an existing app can be migrated over manually.
If you would like a fresh project starter, a new project base can be created from the CLI and an existing app can be migrated over manually.
14 changes: 9 additions & 5 deletions docs/updating/6-0.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
---
title: Updating to 6.0
title: Updating to v6
---

# Updating from Ionic 5 to Ionic 6
# Updating from Ionic 5 to 6

:::note
This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Upgrading to Ionic 5 Guide](./5-0) before starting this guide.
This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide.
:::

:::info Breaking Changes
For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) in the Ionic Framework repository.
:::

## Getting Started
Expand Down Expand Up @@ -190,7 +194,7 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
<script>
import { IonTabs, IonTabBar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonTabs, IonTabBar }
});
Expand All @@ -209,7 +213,7 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
<script>
import { IonTabs, IonTabBar, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonTabs, IonTabBar, IonRouterOutlet }
});
Expand Down
10 changes: 7 additions & 3 deletions docs/updating/7-0.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
---
title: Updating to 7.0
title: Updating to v7
---

# Updating from Ionic 6 to Ionic 7
# Updating from Ionic 6 to 7

:::note
Ionic 7 is in beta. Please report any issues on [the Ionic Framework GitHub Repo](https://github.com/ionic-team/ionic-framework).
:::

:::note
This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Updating to Ionic 6 Guide](./6-0) before starting this guide.
:::

:::info Breaking Changes
For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) in the Ionic Framework repository.
:::

## Getting Started
Expand Down

1 comment on commit 45f7feb

@vercel
Copy link

@vercel vercel bot commented on 45f7feb Mar 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-gqykycf8t.vercel.app
ionic-docs-ionic1.vercel.app
ionic-docs-git-main-ionic1.vercel.app

Please sign in to comment.