CODEWITHSUNDEEP
angularcordova
Brother Eye
Brother Eye

Reputation: 733

Angular 6 - Cordova - How to convert current angular project to cordova-based project?

I have a fully developed angular 6 project and I want to build it to mobile app using cordova and ionic, but I have no idea how to convert the project to cordova-based project. The command shown in cordova instruction seems to create a whole new blank project, and migrating the project would really be a no go. I've searched around but found nearly no result mentioning this. Are there any one here can help?

Upvotes: 2

Views: 7174

Answers (1)

Eliseo
Eliseo

Reputation: 57939

It's only follow the instructions in https://cordova.apache.org/docs/en/latest/guide/cli/. This guide create an "empty" app. only copy dist folder of your app to the www directory of the cordova project. You can use Visual Studio 2017 too and create a blank cordova project. Again, copy your dist folder to the www directory

But, before change your index.html adding the

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

if you use cordova directy

or adding

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js">

if you use VisualStudio 2017

at end of your page (just before body close tag)

If you want to control the "back button" you can follow the instructions of Close angular modal and remain on same page on back button click

Update for Angular 8 you need make some change

Your need remove from index.html the "es-5" created, so your index becomes like:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <title>App title</title>
    <!--IMPORTANT base href="./"--->
    <base href="./"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <app-root></app-root>
    <script type="text/javascript" src="cordova.js"></script>

    <script type="text/javascript" src="runtime-es2015.js"></script>
    <script type="text/javascript" src="polyfills-es2015.js"></script>
    <script type="text/javascript" src="scripts.js" defer></script>
    <script type="text/javascript" src="main-es2015.js"></script>


</body>
</html>

NOTE: use

ng build --prod=true --outputHashing=none --namedChunks=false --vendorChunk=false

To build the application

Update better than the link about cordova event, I feel that this aproach is better to control the "device ready" event.

I like add in head of the .html some like

<script type="text/javascript">window.isInCordova = true</script>

Then in our main.ts we write some like

const bootstrap = () => {
  platformBrowserDynamic().bootstrapModule(AppModule).catch(error=>console.log(error))
};

if (window['isInCordova'] !== undefined) {
  document.addEventListener('deviceready', bootstrap,false);
} else {
  bootstrap();
}

This make that, is we are "InCordova", the application only launch when device is ready. Futhermore, if our application are lauched in navigator and the "index" has no this "script" works as usuall. So, we can add the listener in the ngAfterOnInit of the app.component

//use declare var window to can compile

declare var window: any;


ngAfterViewInit()
{
   if (window['isInCordova'] !== undefined){
     fromEvent(document, 'pause').subscribe(event => {
        this.ngZone.run(() => {
         this.onPause();
        });
     })

      fromEvent(document, 'resume').subscribe(event => {
        this.ngZone.run(() => {
           this.onResume();
        });
      })

      fromEvent(document, 'backbutton').subscribe(event => {
        this.ngZone.run(() => {
           this.onBackKeyDown(event);
        });
      })
   }
}

At last if we can create a service

private cordovaEventSource:Subject<any>=new Subject<any>();
cordovaEvent:Observable<any>=this.listeningSource.asObservable();

sendEvent(evento:any)
{
    this.cordovaEventSource.next(evento);
}

Ours functions this.onPause(), this.onResume()... in app.component simply are like

  onPause() {
    this.cordovaEventService.sendEvent("pause");
  };

Any component that subscribe our service.cordovaEvent received the event and can realize the action

Upvotes: 4

Related Questions