Cordova application using Angular 2

Question

Instead of ionic I would like to use cordova framework.

So far,

Step 1:

I have created an angular 2 application.

Step 2:

I have created an cordova application and integrated angular 2 application in it.

Its running successfully.

Step 3:

Next step is to load cordova.js file on load

Step 4:

Add cordova plugin(like camera , device ext) in my project.

Step 1 and 2 completed.

Please help me out to complete step 3 and step 4.

When I call plugin its throws an error as follows,

Answer 1

Got an output with following steps,

1)Created an angular project

(Optional)I am using the angular IDE to create angular project

2)Added reference to cordova.js file reference in angular project html file.

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

3)Create an cordova project

4)Added platform and plugin to the cordova project.

for my case I added browser platform and cordova device plugin.

5)In angular project implemented OnIt and added the plugin callback function as follow.

Note: It is important to call cordova plugin after 'onDeviceReady'

    import { Component , OnInit} from '@angular/core';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit{

    ngOnInit() {
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
           alert(device.platform);
        }
    }

    }

6)Typescript does not recogonise 'device.platform' and warns as cannot find device

To resolve this issue add the line 'declare var device;'

After adding the above my AppComponent.ts file looks like follows,

import { Component , OnInit} from '@angular/core';

declare var device;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

ngOnInit() {
    document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
           alert(device.platform);
        }
}

}

7)Build the angular project and copy the build files into cordova /www folder

I am using the script to copy file from angular project to cordova. Tutorial here

8)Prepare and run the cordova project.

for my case I ran the cordova project in browser and got an alert with value 'Browser'

Answer 2

To add any Cordova plugin in agular project,

1. Edit main.ts to look like this:

   if (environment.production) { enableProdMode(); } let onDeviceReady = () => { platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.error(err));

   }; document.addEventListener("deviceready", onDeviceReady, false);

2. For any plugin(for example Camera): on top, declare let navigator: any;

   use: navigator.camera.getPicture(success, failure, { quality: 80 }); .

3. In index.html of the angular project add the following script.

   <script type="application/javascript" src="cordova.js"></script>
   Note: The MIME type should be "application/javascript" not "text/javascript".

4. Build the project using the command

   ng build --base-href . --prod --output-path ./Aditya/www/ Note: here Aditya is name of the cordova project

5. Now edit the index.html file inside Aditya/www/ folder of Cordova project to include MIME for all the script included.

   type="application/javascript"

6. Now you are good to go.