{"id":1531,"date":"2022-01-12T14:10:48","date_gmt":"2022-01-12T13:10:48","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1531"},"modified":"2022-01-12T14:12:38","modified_gmt":"2022-01-12T13:12:38","slug":"converting-angular-web-application-into-ionic-app","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/01\/12\/converting-angular-web-application-into-ionic-app\/","title":{"rendered":"Converting Angular Web Application into Ionic App"},"content":{"rendered":"\n

In the software industry, after you successfully built a web application aligned with the client requirements, you may be asked to build a mobile application for the same web application to address mobile users’ requirements. Therefore this article will provide you with better guidance to convert an existing web application developed using Angular into an Ionic native app by simple and detailed instructions.<\/p>\n\n\n\n

Angular<\/strong> is a famous front-end web development framework which is Typescript-based and open source. Angular Components are used to modify our program HTML, CSS, and logic.<\/em><\/p>\n\n\n\n

Ionic<\/strong> is a mobile application development framework which is an open-source SDK and guides to build HTML5 mobile applications. Ionic can handle mobile UIs in an efficient manner by bringing mobile app feeling to the user.<\/em><\/p>\n\n\n\n

Let\u00b4s create a new angular project nammed \u201cangular-ionic\u201d , and then  navigate to that newly created directory.<\/p>\n\n\n\n

ng new angular-ionic\ncd angular-ionic<\/code><\/pre>\n\n\n\n
Our purpose is to create a mobile app for the same web application, therefore it is needed to add Ionic to the existing project. To do that you can use the Angular CLI command \u201cng add\u201d<\/strong><\/em> to import Ionic packages to the existing project. The following command will help you to do that.<\/p>\n\n\n\n
ng add @ionic\/angular<\/code><\/pre>\n\n\n\n
After successful package installation, you will take the output as follows.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Then you must initialize your existing project with Ionic by using the following command. If you use this command you will ask a question to enter your project name. Make sure to enter the project name as your existing project name<\/span>. In this case project name is angular-ionic.<\/strong><\/p>\n\n\n\n
ionic init<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
After successful initialization of Ionic to the project, you should be done below 2 changes to the angular.json file which provides details about project-specific configurations.<\/p>\n\n\n\n
  1. Change outputPath \u201cdist\/angular-ionic\u201d to \u201cwww\u201d <\/strong>in the angular.json file to set folders to build Ionic project for www.<\/li><\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    2. Change <base href=\u201d\/\u201d> into <base href=\u201d.\/\u201d><\/strong> in the index.html file. <base href=\u201d\u201d> defines the base URL for all the relative URL is the document and by default, it is set to root.<\/a><\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    After doing the above changes you can create an Android APK for your project and use the following command to do so.<\/p>\n\n\n\n
    ionic cordova run android --project=\"angular-ionic\"<\/code><\/pre>\n\n\n\n
    Great\u2026 You will end up with a mobile application that has been built upon your web application.<\/p>\n\n\n\n
    Your built Android APK can be found under the platform’s root folder and move with \u201cplatforms\\android\\app\\build\\outputs\\apk\\debug\u201d. You can install it via mobile phone or by enabling the emulator you can see your Ionic mobile app!!!<\/p>\n\n\n\n
    It is important to notice that, you may have to fix mobile responsiveness issues of your native app like alignment issues, the appearance of icons and images, spacing issues, etc.<\/p>\n\n\n\n
    PS: <\/em><\/strong>Here you can see that with use of <\/em>cordova<\/a> we could render our web application into a native web view. Cordova is an open source framework which can be used to implement native application for various mobile platforms by using <\/em>HTML, CSS, and JavaScript contents<\/a>.<\/em><\/p>\n\n\n\n
    <\/div>\n\n\n\n
    Reference:<\/h5>\n\n\n\n
    https:\/\/levelup.gitconnected.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    In the software industry, after you successfully built a web application aligned with the client requirements, you may be asked to build a mobile application for the same web application to address mobile users’ requirements. Therefore this article will provide you with better guidance to convert an existing web application developed using Angular into an […]<\/p>\n","protected":false},"author":1,"featured_media":1536,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,434],"tags":[141,431,429,430,432,433],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1531"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1531\/revisions"}],"predecessor-version":[{"id":1538,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1531\/revisions\/1538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1536"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}