Correct posture updated from ionic2 beta to ionic2 rc0

Time:2021-8-7

PS: refer to official documents for sorting. Some pits are filled for reference:)

Based on the official release of angular2, ionic2 has also entered the RC version. However, due to structural and syntax changes, the upgrade from beta to RC cannot be smooth.

There are two official upgrade methods:
1. Create a new project and copy the original file to the new project.
2. Modify the existing project.

I have tried both methods. I recommend the first method for upgrading with low complexity.

be careful: This update introduces ngmodules, which was introduced by the official version of angular2. Detail pointhere

Copy files to a new project (recommended)

1. Make sure you usenpmVersion in3.xabove:

    npm --version

If your current version is not3.xAbove, please go firstInstall the latest node.js

Then updatenpm

    npm install [email protected] -g

be careful: the latest version is_ 3.10.8_  , But many people have metuid must be an unsigned intSo I went back and installed two versions:

    npm install [email protected] -g

2. Install the latest ionic cli:

    npm install -g ionic

be careful: if you previously installedbetaVersion of CLI, you should run it firstnpm uninstall -g ionicUninstall and then install. Run after installationionic -vTo check and make sure yourcliVersion is2.1.0

3. Create a new ionic 2 rc0 project:

    ionic start --v2 myApp

4. Copy / paste all yourbetaFile to newRC 0In the project. Page file fromapp/pages/reachsrc/pages/From the service provider fileapp/providersreachsrc/providers, filter files fromapp/pipesreachsrc/pipesAnd your custom components tosrc/components

be careful: it is recommended to directly generate new corresponding components with the build command. Many steps of later modification can be omitted.ionic g [component|directive|page|provider|pipe|tabs] pageName

5. Redefine alltemplateUrlPath, keep only.tsFile name. For exampleapp.component.tsThe connection in the file should be frombuild/app.htmlChange toapp.htmlpagefileabout.htmlAlso frombuild/pages/about/about.htmlChange toabout.html

6. Import and add all pages tosrc/app/app.module.tsIn filedeclarationsArray andentryComponentsArray.

7. Import and add all custom components and filters tosrc/app/app.module.tsIn filedeclarationsArray.

be careful: some custom components found in the actual modification not only need to be added todeclarations, still add toentryComponentsArray.

8. Import and add all providers tosrc/app/app.module.tsIn fileprovidersArray

9. Delete all original@ComponentMediumproviders, pipesanddirectivesProperties

10. Template related variables in the component, modifiedprivateKeyword ispublic

be careful: would you like to know whyPoke here.

11. Modify the in the template<button>by<button ion-button>

be careful: This version is clearly stated in the update instructions and must be modified.

12. Add to the original color markcolorProperties:<button primary>Change to<button color="primary">.

be careful: to increase rendering efficiency, be sure to modify.

13. Move ionic related configuration toapp.module.tsIn fileIonicModule.forRootFor example,IonicModule.forRoot(MyApp, {configObject}).

14. Send youbetaMove sass style attribute in application toapp.variablesIn the file

15. Add a selector for each page. This is to define and distinguish the scope of sass. For example, in sass file:

page-selector-you-added {
  #title {
    color: blue;
  }
}

be careful: if you use the build command to generate a page, the selector has added it for you.

Modify an existing project

1. Make sure you usenpmVersion in3.xabove:

    npm --version

If your current version is not3.xAbove, please go firstInstall the latest node.js

Then updatenpm

    npm install [email protected] -g

be careful: the latest version is_ 3.10.8_  , But many people have metuid must be an unsigned intSo I went back and installed two versions:

    npm install [email protected] -g

2. Install the latest ionic cli:

    npm install -g ionic

be careful: if you previously installedbetaVersion of CLI, you should run it firstnpm uninstall -g ionicUninstall and then install. Run after installationionic -vTo check and make sure yourcliVersion is2.1.0

3. Referenceionic2-app-base package.jsonto updatepackage.jsonAnd devdependencies in the project foldernpm install.

4. Copyionic2-app-base package.jsonMediumnpm scriptsreachpackage.jsonIn the file

5. Deletegulpfile.js.

6. RenameappFolder issrc.

7. InsrcCreate a new folderappfolder.

8. Willapp.htmlandapp.tsMove files tosrc/appYes

9. Renameapp.tsbyapp.component.ts.

10. Useionic2-starter-blankContent creation inapp.module.tsDocuments

11. Movementapp.component.tsIn the fileionicBootstrapAll providers in theapp.module.tsThe. Imports file is also copied

12. Import and add your custom components tosrc/app/app.module.tsIn filedeclarationsInside.

13. Move ionic related configuration toapp.module.tsIn fileIonicModule.forRootFor example,IonicModule.forRoot(MyApp, {configObject}).

14. Fromapp.component.tsdeleteionicBootstrap.

15. Exportapp.component.tsThe main application class in, and then rename itapp.module.tsAll references inMyAppTo your main application class (or rename the export)app.component.tsMediumMyApp).

16. Amendmentsapp.component.tsAll paths in are current paths. For example,./pagesbecome../pages.

17. Inapp.module.tsDefine your page class in. For exampleHomePage, all pages should be included here

18. Amendmentsapp.module.tsImports path in. For example,./providersbecome../providers.

19. Fromionic2-app-baseadd tomain.dev.tsandmain.prod.tsFile toapp/.

20. Movementwww/index.htmlreachsrc/index.htmlreferenceionic2-app-base, make sure that the content you added later is also moved in the past

21. Movementwww/assetsreachsrc/assets.

22. Movementwww/imgreachsrc/assets/img.

23. Move your remaining resources fromwww/reachsrc/assets/.

24. Redefine alltemplateUrlPath, keep only.tsFile name. For exampleapp.component.tsThe connection in the file should be frombuild/app.htmlChange toapp.htmlpagefileabout.htmlAlso frombuild/pages/about/about.htmlChange toabout.html

25. Referencesionic2-app-baseUpdate your.gitignoreDocuments

26. Deletetypings/Folders andtypings.jsonDocuments

27. Referencesionic2-app-baseto updatetsconfig.jsonDocuments

28. Rename and relocateapp/theme/app.variables.scssreachsrc/theme/variables.scss.

29. Move sass files fromapp/themereachsrc/appFor exampleapp.core.scss, app.ios.scsswait.

30. Move the sass attribute you defined totheme/variables.scssDocuments

31. Fix your picture path. For example, it was<img>It should be now<img>.

32. Template related variables in the component, modifiedprivateKeyword ispublic

**`Note ` * *: want to know why this modification [stamp here]( https://forum.ionicframework.com/t/rc0-typescript-private-vs-public-keyword/64863/4? u=mhartington).

33. Modify the in the template<button>by<button ion-button>

**`Note ` * *: This version is clearly stated in the update instructions and must be modified.

34. Add to the original color markcolorProperties:<button primary>Change to<button color="primary">.

**`Note ` * *: be sure to modify it to increase rendering efficiency.

35. Add the appropriate icon attribute. If the icon is on the left, it should be addedicon-left, add on the righticon-right, if there are only icons in the button, they should be addedicon-onlyProperties

36. Add a selector for each page. This is to define and distinguish the scope of sass. For example, in sass file:
In the template:

about-page {
  #title {
    color: blue;
  }
}

In components:

@Component({
  selector: 'about-page',
  templateUrl: 'about.html'
})

other

The rc0 version discards typing and uses @ types instead. It is more friendly to third-party libraries. In/srcAdded under directorydeclarations.d.tsFiles can be added more convenientlydeclare

The previous components also have changes. This can be solved by referring to the official components document.

It is recommended to read ionic rc0 throughCHANGELOG, will better understand the changes in this update.