Use Add to Homescreen js within Angular 4 Project

Question

I have just started learning Angular development. I have a task to include below add to homescreen jquery plugin inside one of my pages.

http://cubiq.org/add-to-home-screen

I am trying to do it as below in my home.component.ts file

ngAfterViewInit() {
     $.getScript('addtohomescreen.js');
     addToHomescreen({
             skipFirstVisit: false,
             lifespan: 0,
             maxDisplayCount: 3,
             displayPace : 0
         });
}

I am getting below error in my console.

./src/app/home/home.component.ts:175:9 
    TS2304: Cannot find name 'addToHomescreen'.

can anyone help me to implement this correctly in my ts file?

score 0 · Answer 1 · answered Feb 08 '18 at 04:43

0

You need mention external scripts in the scripts section of angular-cli.json. More details can be found here.

answered Feb 08 '18 at 04:43

Krishna Mohan

1,612
3
19
27

score 0 · Answer 2 · answered Feb 08 '18 at 06:35

let us assume that your addtohomescreen.js is in assets folder. then try following code:

import 'relative path to assets folder/addtohomescreen.js';
...
ngAfterViewInit() {
   addToHomescreen({
         skipFirstVisit: false,
         lifespan: 0,
         maxDisplayCount: 3,
         displayPace : 0
  });
}

Hope it helps :)

score 0 · Accepted Answer · answered Feb 08 '18 at 07:29

0

addToHomescreen.js is available as an NPM package. You can find the details of the same here. The instructions for using it is also given.

answered Feb 08 '18 at 07:29

Arjun Panicker

730
1
8
20

thanks for your comment. it describes to add the plugin in index.html . I am trying to include it inside a component page. – Saliya Randunu Feb 08 '18 at 10:34
I guess instead of adding to `index.html`, you can add the file path to `angular-cli.json` file. There is a `scripts` array in it. Just make sure that the path you are giving for `addToHomescreen.js` file inside `node_modules` is correct. – Arjun Panicker Feb 09 '18 at 04:39

Use Add to Homescreen js within Angular 4 Project

3 Answers3