For Angular Version 11+

Question

82

How to use external JS files in Angular 6

rated 0 times [ 86] [ 4] / answers: 1 / hits: 46288 / 6 Years ago, wed, june 13, 2018, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

quentinaveryb

Add To Favorites

Follow

Total Points: 102

Total Questions: 100

Total Answers: 93

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

quentinaveryb questions

1 How to use annotation layer in PDF.js?

Thu, Aug 6, 20, 00:00, 4 Years ago

1 Cannot assign to read only property of #< Object> using React with Recoil

Sat, Jul 18, 20, 00:00, 4 Years ago

1 Strapi JWT token lifetime?

Fri, Jul 17, 20, 00:00, 4 Years ago

1 What is the difference between async await and a regular fetch?

Tue, Feb 4, 20, 00:00, 4 Years ago

1 How do I include a JavaScript variable in an HTML header?

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 6 Years ago samsons · Accepted Answer

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