How to use external javascript and CSS library in Angular13 project

Question

I have just used Angular 13 and I want to use my external CSS and javascript library but I tried all the way, like => write path and active that in the angular.json but it doesn't work for me. I just want to know what should I do to use my libraries.

Answer 1

I find the best way to include styles in multi-components. In your component, you just need to change the styleUrls to what you want... for example, I have a style.css file in my assets folder...

So I want to use style.css in my app.component, So I change the styleUrls: ['./app.component.scss'] value like this styleUrls: ['../assets/Css/style.css'].

Note: .. make your position file to downer E.g: your component in src/app/home/home.component.cs and you want to connect with your assets file so you need to use the file path like this ../../assets/Css/style.css.

If you active your style.css (which you want to use in one of your components) in angular.json, the style.css active for all your components and make their style change!

Answer 2

Angularish way to add js and external files would be to include them in angular.json

      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/android-chrome-192x192.png",
              "src/android-chrome-256x256.png",
            ],
            "styles": [
              "src/styles.css",
              "src/theme.scss",
            ],
            "scripts": [
              "src/assets/js/cuber/src/scripts/vendor/threejs/src/Three.js"

If you then afterwards, for example, would like to use a function from one of those external files - you would first need to declare it, and use them in component like so:

declare const myTest: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  onClick() {
    myTest();
  }
}

Another not so Angularish way would be to use <script> tags in index.html

Answer 3

If you want to import a file from a third-party package you have installed using npm (or yarn) you can use a few ways. The most angularish is using angular.json file in the root folder of your Angular project.

For instance I want to use lightGallery in my project. I install it with npm install lightgallery --save and then add its stylesheet in my angular.json file:

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/visitor-frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/lightgallery/scss/lightgallery.scss"
            ],
            "scripts": []
          },

The path base of all relative paths in this files is the root folder of your project, the very folder the file angular.json is placed in.

Notice the string "node_modules/lightgallery/scss/lightgallery.scss". npm installs packages into node_modules folder. If you want to import a file from this folder you just need to find required file in the node_modules folder and reference it in the corresponding array: styles or scripts. So if you want to import lightgallery.es5.js from the same package you need to change angular.json like this:

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/visitor-frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/lightgallery/scss/lightgallery.scss"
            ],
            "scripts": [
              "node_modules/lightgallery/lightgallery.es5.js"
            ]
          },

You can find more on the topic here: Usage of Angular libraries published to npm