CODEWITHSUNDEEP
angularjstypescriptionic-framework
Ankit Manchanda
Ankit Manchanda

Reputation: 582

Converting Angular 2 web Application code into ionic 2 mobile application code?

I have a web application code written in Angular 2. I want to build a hybrid mobile application using ionic 2 for the same web application. As ionic 2 uses core concepts of angular 2:-

is it possible to use as it is angular 2 code in ionic 2 with minor platform compatibility fixes ? is there any way to convert the angular 2 code into ionic 2? OR i have to code again in ionic 2 for mobile applications?

Any Help would be appreciated .

Upvotes: 7

Views: 7693

Answers (3)

Natan
Natan

Reputation: 301

I found a tutorial that explains how to convert an Angular 2 project to Cordova. Tutorial: Tutorial HERE

The question object does not mention Cordova, but the Ionic is uses Cordova and the final object is to have a mobile APP, the tutorial explains how to achieve this.

UPDATED

Retrieved from the above post

REQUIREMENTS

You must have installed your Cordova CLI, if not, refer to Cordova Getting Started and Documentation on how to achieve that. You have already created your Angular version 2 and above project. This writing will be based on Angular CLI, so if you haven’t installed it, please visit Angular Documentation STEPS (Advise: Ensure you have a backup before executing this steps)

Create a new Cordova Project, using the cordova below: cordova create hello com.example.hello HelloWorld 2. Add your Cordova Building Platform:

cordova platform add [platform] Where platform can be either Android, Blackberry or IOS

  1. Merge your Angular project with the Cordova project created by copying every folders and files, except your package.json file from your Angular project root directory to the Cordova project root directory.

  2. Carefully open the package.json file in the both directories and carefully merge the two files into one (in the cordova project). The resulting package.json should look like below:

A screenshot of how your package.json should look after merging 5. Development project folder is src/. You should start testing/building your Angular 4 app there!

  1. Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

With the steps above, you have successfully merged and converted your Angular Project to Mobile App. To implement the Cordova plugin, add reference to cordova.js in angular project html file (src/index.html).

Note that adding the reference to cordova.js will throw/display an error when you try to test on local server.

Add Cordova Device plugin with the command below:

cordova plugin add cordova-plugin-device We are almost done, now let’s use cordova to get the Device information.

In your angular project, import and implement OnInit and added the plugin callback function as follow.

import { Component , OnInit} from ‘@angular/core’; …. …. export class AppComponent implements OnInit{ ngOnInit() {
document.addEventListener(“deviceready”, function() {
alert(device.platform); }, false); } } Typescript will not recognize the ‘device.platform’ statement and warns cannot find device

To resolve this issue, add the line below immediately after the import line

declare var device; That’s all.

Finally is to build our project.

BUILDING AND RUNNING OUR APP

Update the tag in your src/index.html to , this will enable angular to access files in a directory path since we are not hosting on a server. Before we build, let’s understand that Angular project creates a dist folder on successful building while Cordova make use of www folder to run, so we need to update Angular project to build in www folder. To achieve that, open .angular-cli.json/angular.json in our root directory and change the value of outDir property from “dist” to “www”. The next step is to build our angular app, please refer to my first writing on HOW TO DEPLOY AND HOST AN ANGULAR 2 OR 4 PROJECT ON A SERVER to achieve that if your don’t know how to go about it. Lastly, build and run your Cordova project by executing the code below: cordova build android|ios|[platform]

Upvotes: -2

JaeHo Song
JaeHo Song

Reputation: 123

You cannot just copy Angular source code into Ionic project.

You must rewrite your code in Ionic way.

I also spend time for this solution but I couldn't find a good one. So, I developed ABC framework which bundles Angular webapp into Cordova app.

It has extra functionalities like live reloading.

I am sure this will do for you.

Upvotes: 2

user1752532
user1752532

Reputation:

Ionic is a framework wrapper for angular so your current app can technically be converted but, you will have to decide if it is worth it.

Because Ionic has framework specific components you will have to rewrite your code based on the ionic spec, to how you want to style the app. The navigation in ionic is also a bit different and uses a layered navigation with pop() and push() which would have to be changed.

Then there is the issue that ionic is held together with cordova which is not a default import in a standard ng2 app. So there is a lot of configuration that you have to implement on top of the default angular stuff. Which could end up becoming very blotted.

I think the best approach here is to start a new ionic app ( download the ionic cli )

_ ionic start

Then you have a fresh ionic project with all the configuration taken care of. Then in your other angular 2 app , write the core functionality into services and components that you can export into the new ionic app.

Upvotes: 3

Related Questions