2

https://github.com/ocombe/ocLazyLoad

I have used this for Angular 1, is there any alternative plugins like this to work for Angular 2? I want to include the 3rd party Javascript plugins on demand (lazy-load), into my Angular 2 project. So far no success.

I'm currently working on Angular CLI. I have tried to include in angular-cli.json file, including jquery seems work. But I think this is for global load.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js"
  ],

Let's say I want a page with WOW.js plugin in that page. I should call a component with WOW.js initiated inside it, then the WOW.js file will be included dynamically. How to do that?

Thanks

Faizal
  • 702
  • 1
  • 6
  • 23

1 Answers1

0

You could add into your assets the WOW.js file in your angular-cli.json configuration file.

"assets": [
    "pathToYourPlugin/WOW.js"
  ],

Then into your component add a script tag to import your library.

<script src="/WOW.js"></script>
Nicolas Henneaux
  • 9,769
  • 10
  • 44
  • 71
  • my component html template is just a partial for entire page. is it ok if i put this `` between and not in ? – Faizal Nov 09 '16 at 05:29
  • Yes of course. The recommended way is at the end of the body. This answer is not really beaytiful but it solves your requirement. – Nicolas Henneaux Nov 09 '16 at 07:14
  • `` didn't import. I confirmed can see scripts here `http://localhost:4200/assets/wow.js`. when I do inspect the elements using dev tool, `` tag is gone from html. please help. thanks – Faizal Nov 09 '16 at 07:51
  • You should not add it through angular but through template or inner html. – Nicolas Henneaux Nov 09 '16 at 08:26
  • Yes, I put it inside template `dashboard.component.html` file. `@Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html' })` – Faizal Nov 09 '16 at 09:11
  • It seems it is sanitized. Can you it using innerHtml (see https://stackoverflow.com/questions/31548311/angular-2-html-binding) – Nicolas Henneaux Nov 09 '16 at 09:14