How to use external JS files in Angular 6
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 ;)
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.SAdditonal Info
: Error import javascript library in typescript