Turn Angular 2 app into mobile app

问题:

We have a responsive web app developed using AngularJS 2. We would like to wrap it inside a package to redistribute it as a mobile app. Android is our priority. We have looked at Cordova. Are there other options available for turning a web app into a mobile app? What are the pitfalls involved in turning an AngularJS 2 web app into a mobile app?

回答1:

Ionic 2, currently in beta, uses Angular2 to make hybrid mobile apps. You'll have to make some modifications in your app but it's still Angular2, only with some custom ionic components.

NativeScript also uses Angular2 to make apps, but this time, it makes true native apps. There's a little bit more of work there, you'll have to adapt your templates and styles but the code is still Angular2-flavored TypeScript.

回答2:

This one looks more promising angular-native-seed, where you only need to write code once.

回答3:

You can use Cordova with very minimal number of steps.

This link will be helpful. It worked for me.

You can also use Ionic but it was throwing router error and also the project structure was different. So you should have new project with Ionic router and then selectively copy the angular code. Where as in cordova, you can have a project with basic cordova set up and copy entire code at once with minimal config changes.

回答4:

Jan 2019, I am looking for similar for a personal project, I know Angular 7, want to convert it to Android/iOS app.

Found below 4 months back old article, published on Angular.io blog. It talks about NativeScript, developed by the Progress software company, it supports Js, or Ts, or Angular+Ts projects.

Same Angular 2+ projects can be converted to mobile, using code sharing:

• Web files = All non-*.tns.* files like mycomp.html, mycomp.ts, mycomp.css (the usual files)
• Mobile files = (for ios and android) = All *.tns.* /native script files, like mycomp.tns.html, mycomp.tns.ts, mycomp.tns.css
• If mobile files exist (*.tns.*) then they overwrite on web files (non *.tns.*), in the build process, while building the bundle for mobile (android/ios)
• If no mobile files exist then the web files (non *.tns.*) become the mobile files, hence the code sharing.
  • So, by default code sharing happens (your angular2+ files become android/ios files), if you want a different look/ functionality for mobile only then you create corresponding mobile files (like a.tns.html for a.html)
• You get native performance, with very little changes to be done.
• You can access hardware like camera & location,

I am half way through reading but it already looks like NativeScript, which is in collaboration with angular, is a great way to go ahead.
Read below to know more.

• https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
• https://en.wikipedia.org/wiki/NativeScript
• https://docs.nativescript.org/angular/start/introduction