How to use external JS files in Angular 6

Question

I started a project with Angular but I never thought that install the most recent version of it would bring me a couple of problems. I am also using Materialize so when I try to 'import' its Javascript file it doesn't work. I don't know why, I was looking for an answer since the past Friday but I found nothing.

I have changed the angular.json file and referenced my JS location in it but it doesn't was sufficient.

P.D. I must not use the CDN for materialize JS.

Yeah, I am using CLI. I tried to import it in the index but it did not work — Ricardo Luna, Jun 13 '18 at 16:36
you can add `"scripts": [ "../node_modules/jquery/dist/jquery.js" ],` in `angular-cli.json` — Rohit.007, Jun 13 '18 at 16:39
You can also have another way of adding materialize in you project. Check the link: https://www.npmjs.com/package/angular2-materialize — Rohit.007, Jun 13 '18 at 16:41
Actually I do not have an angular-cli.json. I only have the angular.json file and I already used that reference to my JS. — Ricardo Luna, Jun 13 '18 at 16:43
That's correct @RicardoLuna, angular-cli.json is for prior versions of angular — baao, Jun 13 '18 at 16:44
Please post the excerpt of your angular.json that incldues the script — baao, Jun 13 '18 at 16:45
"scripts": [ "node_modules/materialize-css/dist/js/materialize.js" ] — Ricardo Luna, Jun 13 '18 at 16:51

Vikas · Accepted Answer · 2021-02-12T13:35:16.173

19

CLI projects in angular 6 onwards uses angular.json instead of .angular-cli.json for build and project configuration. That implies you are using Angular 6.
As of v6, the location of the file has changed to angular.json. Since there is no longer a leading dot, the file is no longer hidden by default and is on the same level. which also means that file paths in angular.json should not contain leading dots and slash i.e you should provide an absolute path

Install MaterializeCSS and angular2-materialize from npm

 npm install materialize-css --save 
 npm install angular2-materialize --save 
 npm install jquery@^2.2.4 --save
 npm install hammerjs --save

After installing all the required dependencies add them to styles and scripts array of angular.json

"styles": [
             
      "src/styles.css",
      "node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
      "node_modules/jquery/dist/jquery.js",
       "node_modules/hammerjs/hammer.js",
       "node_modules/materialize-css/dist/js/materialize.js"
 ]

For Angular Version 11+

Configuration

The styles and scripts options in your angular.json configuration now allow to reference a package directly:

before: "styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]
after: "styles": ["bootstrap/dist/css/bootstrap.css"]

P.S
Additonal Info: Error import javascript library in typescript

edited Feb 12 '21 at 13:35

answered Jun 13 '18 at 16:50

Vikas

11,859
7
45
69

Yup, actually I have this: "scripts": [ "node_modules/materialize-css/dist/js/materialize.js" ] – Ricardo Luna Jun 13 '18 at 16:53
Have you maintained the same order while adding it? – Vikas Jun 13 '18 at 16:55
I do not know why the materialize.css works and the materialize.js does not. I used the same reference (obviously changing the folder css to js and the files extension) – Ricardo Luna Jun 13 '18 at 16:56
try `npm install --save @types/jquery` – Vikas Jun 13 '18 at 17:02
how can I add custom js file? – Shobhit Sharma Oct 27 '18 at 13:40
@ShobhitSharma try adding it in index.html script tag – Vikas Oct 27 '18 at 15:18
@Vikas I knew it already, so it is not a solution its just like Juggaar – Shobhit Sharma Oct 28 '18 at 14:44
If anyone tried to import js to the index.html as a script, then don't use leading dots in your src path. – Charitha Goonewardena Nov 08 '18 at 18:19
@ShobhitSharma do you found the solution of that jugaar? – Sayed Mohd Ali Jan 29 '19 at 11:22
Yes, I had added my files path in angular.json under build property. Actually earlier I was trying in test property that's why it wasn't working. – Shobhit Sharma Jan 30 '19 at 14:25

score 3 · Answer 2 · answered Sep 02 '18 at 17:25

I think that key is: correct place on configuration. We have two places when we can potentially paste the paths for scripts. (Angular CLI: 6.1.5)

The first one is: (projects => your app name => architect => build)

"build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/<your app name>",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
      },
      "configurations": { ... }
    }

The second one is: (projects => your app name => architect => test) - WRONG PLACE

"test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "src/styles.css"
        ],
        "scripts": [
        ],
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ]
      }
    }

After that you shoud have something like this on your browser:

I hope that it helped ;)

score 0 · Answer 3 · edited Jul 19 '19 at 07:54

js always write in script tag with "".

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Vhls": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Vhls",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/videogular2/fonts/videogular.css",
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/js/hls.min.js"
            ]
          },
          "configurations": {...............

How to use external JS files in Angular 6

3 Answers3

For Angular Version 11+

Linked