Load the assets just in the required Component about ngx-slick HOT 4 CLOSED

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"
  ],

from ngx-slick.

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

$ npm install [email protected] --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.

from ngx-slick.

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

from ngx-slick.

No problem!

from ngx-slick.