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

Question

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 proje

Answer 1

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

if you use cordova directy

or adding

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

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=new Subject();
cordovaEvent:Observable=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