欧洲杯官网投注

Ionic Docs Docs

Native

Search docs/
Search docs/
Ionic Docs Docs
  • Structure
  • Responsive Grid
  • Global StylesheetsCSS Utilities
  • Basics
  • Platform Styles
  • CSS VariablesColorsThemesDark ModeAdvancedColor Generator
  • Overview
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatformTestingStoragePerformanceProgressive Web Apps
  • Overview
  • Quickstart
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatform UtilsProgressive Web AppsTesting
  • Overview
  • Build Your First App
  • LifecycleNavigation/Routing
  • Animations
  • Gestures
  • iOS App Store
  • Android Play StoreProgressive Web App (PWA)Electron Desktop App
  • Security
  • Debugging
  • Build ErrorsRuntime ErrorsNative ErrorsCORS Errors
  • Fundamentals
  • Cross PlatformWeb ViewWhat are PWAs?
  • How to Contribute
  • Code of Conduct
  • Glossary
  • VersioningRelease NotesGitHub Changelog
  • Support Policy
  • Browser Support
  • Migration
  • Books
  • CoursesGuidesPostsToolsVideos
    Migration Guide
    Contents

    Migrating from Ionic 4.x to Ionic 5.x

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

    API and CSS Updates

    For a complete list of breaking changes from 4.x to 5.x, please refer tothe breaking changes document in the Ionic core repo.

    Packages and Dependencies

    For Angular based projects, you can simply run:

    npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save

    欧洲杯官网投注For React projects, you can run:

    npm install @ionic/react@latest @ionic/react-router@latest ionicons@latest

    For Stencil / vanilla JS projects, you can run:

    npm i @ionic/core@latest --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.

    Migrating from Ionic 3.0 to Ionic 4.0

    For a complete list of breaking changes from Ionic 3 to Ionic 4, please refer tothe breaking changes document in the Ionic core repo.

    欧洲杯官网投注We suggest the following general process when migrating an existing application from Ionic 3 to 4:

    1. Generate a new project using theblank starter (seeStarting an App)
    2. Copy any Angular services from src/providers tosrc/app/services
      • Services should include { providedIn: 'root' } in the@Injectable() decorator. For details, please see Angular.
    3. Copy the app's other root-level items (pipes, components, etc) keeping in mind that the directory structure changes fromsrc/components to src/app/components, etc.
    4. Copy global Sass styling from src/app/app.scss tosrc/global.scss
    5. Copy the rest of the application, page by page or feature by feature, keeping the following items in mind:
    6. Emulated Shadow DOM is turned on by default
    7. Page/component Sass should no longer be wrapped in the page/component tag and should use Angular'sstyleUrls option of the@Component decorator
    8. RxJS has been updated from v5 to v6 (see RxJS Changes)
    9. Certain lifecycle hooks should be replaced by Angular's hooks (see Lifecycle Events)
    10. Markup changes may be required (migration tool available, seeMarkup Changes)

    In many cases, using the Ionic CLI to generate a new object and then copying the code also works very well. For example:ionic g service weather will create a shellWeather欧洲杯官网投注 service and test. The code can then be copied from the older project with minor modifications as needed. This helps to ensure the proper structure is followed. This also generates shells for unit tests.

    Changes in Package Name

    In Ionic 4, the package name is @ionic/angular欧洲杯官网投注. Uninstall Ionic 3 and install Ionic 4 using the new package name:

    $ npm uninstall ionic-angular$ npm install @ionic/angular

    While migrating an app, update the imports fromionic-angular to@ionic/angular.

    Project structure

    One of the major changes between an Ionic 3 app and an Ionic 4 app is the overall project layout and structure. In v3, Ionic apps had a custom convention for how an app should be set up and what that folder structure should look like. In v4, this has been changed to follow the recommended setup of each supported framework.

    For example, if an app is using Angular, that project structure will be exactly what an Angular CLI app would be. This change, while not too difficult to accommodate, helps to keep common patterns and documentation consistent.

    src/
    app/
    home/
    app-routing.module.ts
    app.component.html
    app.component.spec.ts
    app.component.ts
    app.module.ts
    environments/
    global.scss
    index.html
    karma.conf.js
    main.ts
    polyfills.ts
    test.ts
    tsconfig.app.json
    tsconfig.spec.json
    .gitignore
    angular.json
    ionic.config.json
    package.json
    tsconfig.json
    tslint.json
    Ionic 4
    src/
    app/
    app.component.html
    app.html
    app.module.ts
    app.scss
    main.ts
    pages/
    home/
    index.html
    manifest.json
    service-worker.js
    .gitignore
    ionic.config.json
    package.json
    tsconfig.json
    tslint.json
    Ionic 3
    The above comparison is an example of a v4 app's project structure. For developers with experience in a vanilla Angular project, this should feel really familiar.

    There is a src/ directory that acts as the home for the app. This includes theindex.html, any assets, environment configuration, and any app-specific config files.

    While migrating an app to take advantage of this new layout, it is suggested that a new project "base" is made with the CLI. Then, with the new project layout, migrate the features of the app piece by piece. Pages/components/etc. should be moved into thesrc/app/ folder.

    Ensure your Ionic configuration file has the appropriate type. The project type for v3 is ionic-angular. The project type for v4 isangular欧洲杯官网投注. If this value is incorrect, the CLI may invoke the incorrect build scripts.

    See the following ionic.config.json as an example:

    {  "name": "my-app",  "type": "angular"}
    CopyCopied
    RxJS Changes

    Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please see theRxJS Migration Guide for details.

    Lifecycle Events

    With V4, we're now able to utilize the typical events provided byAngular. But for certain cases, you might want to have access to the events fired when a component has finished animating during its route change. In this case, theionViewWillEnter, ionViewDidEnter,ionViewWillLeave, and ionViewDidLeave have been ported over from V3. Use these events to coordinate actions with Ionic's own animations system.

    Older events like ionViewDidLoad,ionViewCanLeave, and ionViewCanEnter have been removed, and the proper Angular alternatives should be used.

    For more details, check out the router-outlet docs

    Overlay Components

    In prior versions of Ionic, overlay components such as Loading, Toast, or Alert were created synchronously. In Ionic v4, these components are all created asynchronously. As a result of this, the API is now promise-based.

    // v3showAlert() {  const alert = this.alertCtrl.create({    message: "Hello There",    subHeader: "I'm a subheader"  });  alert.present();}
    CopyCopied
    In v4, promises are used:

    showAlert() {  this.alertCtrl.create({    message: "Hello There",    subHeader: "I'm a subheader"  }).then(alert => alert.present());}// Or using async/awaitasync showAlert() {  const alert = await this.alertCtrl.create({    message: "Hello There",    subHeader: "I'm a subheader"  });  await alert.present();}
    CopyCopied
    Navigation

    In V4, navigation received the most changes. Now, instead of using Ionic's ownNavController, we integrate with the official Angular Router. This not only provides a consistent routing experience across apps, but is much more dependable. The Angular team has anexcellent guide欧洲杯官网投注 on their docs site that covers the Router in great detail.

    To provide the platform-specific animations that users are used to, we have createdion-router-outlet for Angular Apps. This behaves in a similar manner to Angular'srouter-outlet欧洲杯官网投注 but provides a stack-based navigation (tabs) and animations.

    For a detailed explanation in navigation works in a V4 project, check out theAngular navigation guide.

    Lazy Loading

    欧洲杯官网投注Since Navigation has changed, the mechanism for lazy loading has also changed in V4.

    欧洲杯官网投注In v3, a typical lazy loading setup worked like this:

    // home.page.ts@IonicPage({  segment: 'home'})@Component({ ... })export class HomePage {}// home.module.ts@NgModule({  declarations: [HomePage],  imports: [IonicPageModule.forChild(HomePage)]})export class HomePageModule {}
    CopyCopied
    However, in v4, lazy loading is done via the loadChildren method of the Angular router:

    // home.module.ts@NgModule({  imports: [    IonicModule,    RouterModule.forChild([{ path: '', component: HomePage }])  ],  declarations: [HomePage]})export class HomePageModule {}// app.module.ts@NgModule({  declarations: [AppComponent],  imports: [    BrowserModule,    IonicModule.forRoot(),    RouterModule.forRoot([      { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },      { path: '', redirectTo: 'home', pathMatch: 'full' }    ])  ],  bootstrap: [AppComponent]})export class AppModule {}
    CopyCopied
    For a detailed explanation of lazy loading in V4 project, check out theAngular navigation guide.

    Markup Changes

    Since v4 moved to Custom Elements, there's been a significant change to the markup for each component. These changes have all been made to follow the Custom Elements spec, and have been documented in adedicated file on GitHub.

    To help with these markup changes, we've released a TSLint-basedMigration Tool欧洲杯官网投注, which detects issues and can even fix some of them automatically.

    Migrating from Ionic 1.0 to Ionic 4.0

    Ionic 1.0 to Ionic 4.0: 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.

    欧洲杯官网投注One upside is that for the most part, the Ionic UI components you know and love from V1 haven’t changed much.

    Here are some considerations to review before beginning the upgrade:

    • App complexity: Naturally, the larger and more complex the app is, the longer it will take to migrate.
    • Framework support: In 2019, Ionic will release full support for React. You can also use Ionic Framework componentswithout a framework. Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
    • Budget and team makeup: The length of a migration project will vary based on the size of your team, the complexity of the app, and the amount of time allotted to make the transition.

    Suggested Strategy

    欧洲杯官网投注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 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.

    Moving From AngularJS to Angular

    Please reference official Angular upgrade guide 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 (seeStarting an App欧洲杯官网投注). Spend time getting familiar with Ionic 4.0 components. Happy building!

    Need Assistance?

    If your team would like assistance with the migration, pleasereach out to us! Ionic offers Advisory Services, which includes Ionic 4.0 training, architecture reviews, and migration assistance.

    Previous
    Browser Support
  • Contribute Updated 2020-04-02