Angular 2 CLI - 3rd party JS plugins lazy loading

Question

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

Nicolas Henneaux · Accepted Answer · 2016-11-08 21:17:38Z

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>

answered Nov 8, 2016 at 21:17

Nicolas Henneaux

12.4k11 gold badges63 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Faizal Over a year ago

my component html template is just a partial for entire page. is it ok if i put this <script src="/WOW.js"></script> between <body> and not in <head>?

Nicolas Henneaux Over a year ago

Yes of course. The recommended way is at the end of the body. This answer is not really beaytiful but it solves your requirement.

Faizal Over a year ago

<script src="assets/wow.js"></script> didn't import. I confirmed can see scripts here http://localhost:4200/assets/wow.js. when I do inspect the elements using dev tool, <script src="assets/wow.js"></script> tag is gone from html. please help. thanks

Nicolas Henneaux Over a year ago

You should not add it through angular but through template or inner html.

Faizal Over a year ago

Yes, I put it inside template dashboard.component.html file. @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html' })

|

Collectives™ on Stack Overflow

Angular 2 CLI - 3rd party JS plugins lazy loading

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related