Load the assets just in the required Component

[cesarZubillaga]

Hi,

Is loading the jQuery and the slick slider CSS in the index.html the best way to load the assets? I was wondering if there is a way to load them just in the component where i am using the slider.

If i can help with this let me know and we could work toguether, if i know how to ;)

[jguix]

I managed to get rid of the assets (CSS) in the following way:

$ npm install slick-carousel@1.6.0 --save

Now that you have the slick node module in your project, you can get rid of the in the index.html and import the SCSS from the module, taking care of the static assets, which you will need to copy somewhere in your project tree, and redefine the variables that point to them.

This is how I configured an index.scss which is imported as well from the global styles.scss of my project:

$slick-font-path: "./assets/fonts/slick/" !default;
$slick-loader-path: "./assets/images/slick/" !default;
@import "../../../../../node_modules/slick-carousel/slick/slick";
@import "../../../../../node_modules/slick-carousel/slick/slick-theme";

On the other hand, I would like to have that already configured in the ngx-slick module, and also get rid of the imports of jquery.js and slick.js in the index.html which look rather ugly.

[jguix]

I find another approach, just modifying .angular-cli.json (if your project uses it). These lines tell webpack to add the CSS and JS files to the bundle.

  "styles": [
    "styles.scss",
    "../node_modules/slick-carousel/slick/slick.scss",
    "../node_modules/slick-carousel/slick/slick-theme.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/slick-carousel/slick/slick.js"
  ],

[crossRT]

thanks @jguix you solved my problem with a good timing! =)

[jguix]

No problem!