Develop Reference

My Angular project isn't loading the scripts declared in the angular.json file

After running the project scripts declared in angular.json file are not loading
"scripts": [
"node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
"node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js",
"node_modules/#clr/icons/clr-icons.min.js",
"src/assets/js/app-info-parser.min.js",
"node_modules/lz-string/libs/lz-string.min.js"
],
Tried to to re-install few library but it does not seems to be working.

You should add them under build architect
"architect": {
"build": {
"options": {
"scripts": []
After run the project,
they should be part of the scripts.js file.

Bug with css-loader / style-loader

I'm having a problem that is happening to me in two differentes PC's. For my project I've installed for development the following dependencies: (webpack webpack-cli #babel/core #babel/preset-env #babel/preset-react babel-loader css-loader style-loader html-webpack-plugin) and react & react-dom. The trouble comes when I try to import some stylesheet in any component of my project, the error is: import api from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";. I'm little confused because I checked many times other webpack configurations done by myself and they are the same that I am using now. What is your advice? Thank you!

I had this issue, seems that webpack does not allow multiple definitions of the styles css file.
So, what solved the issue for me is remove the css file from "styles" in angular.json
//....
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist/app-name",
"index": "src/index.html",
"main": "src/app/main.ts",
"polyfills": "src/app/polyfills.ts",
"tsConfig": "tsconfig.json",
"preserveSymlinks": true,
"assets": [
"src/client/img"
],
"styles": [], //don't mention your styles.css here
"scripts": [],
//....
webpack.config.js should include the loaders and it should be enough
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},

Angular cli build without converting scss/less to .css or .js

I have angular 4 app which uses less as a preprocessor. When I do "ng build", it converts all my less files to the .js files which load these stylesheets. I want to build this application in such a way that it doesn't generate/convert the scss files.
Is there any way where i can avoid this conversion? I followed the documentation of angular-cli but no luck.
Any pointer would be helpful.

You can try
ng build --ec.
This will compress the styles to a styles.css and then you can include it in your index file.

You can put scss in the assets folder and load from there, ng build does not touch assets folder

Here is the procedure to switch to CSS:
1/ Delete node_module
2/ In angular.json file
2.1/ Edit this line
"schematics": {
"#schematics/angular:component": {
"style": "less"
}
},
To this line
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "css"
}
},
2.2/ Edit this line (always on angular.json)
"styles": [
"src/styles.less"
],
With this line
"styles": [
"src/styles.css"
],
For information: There ara 2 lines "src/styles.less" on angular.json (Don't forget to modify the two lines)
3/ Close all open windows on visual studio code
4/ npm i

How do I use third party JS modules in my Angular project?

I'm currently working on an Angular (Angular 4.2.5) project and have been able to add a few third party modules. However, in most cases, if the third party module required me to include a script (like a .js file), I had to add it to my index.html file.
For example, this is what is in my index.html for Bootstrap:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
This was also the case for my CSS files but recently found that I could import them into my style.css. Here's an example of what exists in that file for bootstrap as well:
#import '~bootstrap/dist/css/bootstrap.min.css';
Now when I look online, I see that I should be able to add the path to the script in question to my angular-cli.json file but every time I have done that, the third party component fails. Only when I add the [script] tag for that component into index.html does it work.
I've tried several online guides but none seem to work. I'm certain I'm missing some minor setting somewhere to ensure that I'm using the angular-cli.json path listed but I can't seem to find it.
Some details in the event you need it:
#angular/cli: 1.2.0
node: 6.10.0
os: win32 x64
#angular/animations: 4.2.5
#angular/common: 4.2.5
#angular/compiler: 4.2.5
#angular/core: 4.2.5
#angular/forms: 4.2.5
#angular/http: 4.2.5
#angular/material: 2.0.0-beta.7
#angular/platform-browser: 4.2.5
#angular/platform-browser-dynamic: 4.2.5
#angular/router: 4.2.5
#angular/compiler-cli: 4.2.5
[Edit 07/08/2017]
To be clear, I do have the following in my angular-cli.json but it still doesn't work unless I have it included in my index.html.
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "ang2-crm",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/bootstrap.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],

You can either import them via styles.css or index.html using a link.
Additionally, you can import scripts in your angular-cli.json under scripts: []

You can add all scripts in scripts array in .angular-cli.jaon and css files in styles array.
For example if you want to add jquery.min.js.:-
Install jquery package by npm install jquery --save
Then add entry in scripts array as:-
scripts:[../node-modules/jquery/dist/jquery.min.js]

Angular Cli Webpack, How to add or bundle external js files?

I am not sure how to include JS files (vendors) after switching Angular Cli from SystemJs to Webpack.
For example
Option A
I have some js files that were installed via npm. Adding script tags to the head tag like this does not work. Nor does it seem like the best way.
<head>
<script src="node_modules/some_package/somejs.js">
</head>
//With systemJs I could do this
<head>
<script src="vendor/some_package/somejs.js">
</head>
Option B
Include these js files as part of the webpack bundle. This seems like the way it probably should be done. However I am not sure how to do this as all of the webpack code seems to be hidden behind the angular-cli-webpack node package. I was thinking maybe there is another webpack config that we might have access to. But I am not sure as I didn't see one when creating a new angular-cli-webpack project.
More Info:
The js files I am trying to include need to be included before the Angular project. For example jQuery and a third party js lib that isn't really setup for module loading or typescript.
References
https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md
https://github.com/angular/angular-cli/tree/webpack

Last tested using angular-cli 11.x.x with Angular 11.x.x
This can be accomplished using scripts:[] in angular.json.
{
"project": {
"version": "1.0.0",
"name": "my-project"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false
}
}
Note: As the documentation suggests in the global library installation: if you change the value of your styles (or scripts!) property, then:
Restart ng serve if you're running it,
..to see the scripts executed in a **globalcontext via the scripts.bundle.js file.
Note: As discussed in the comments below. JS libs that support UMD modules via es6 imports such as jQuery can also be imported into your typescript files using the es6 import syntax. For example: import $ from 'jquery';.

There is a subtle difference to using scripts:[] then to adding something to the <head> with <script>. Scripts from scripts:[] get added to the scripts.bundle.js that gets always loaded in the body tag and will thus be loaded AFTER scripts in <head>. Thus if script loading order matters (i.e. you need to load a global polyfill), then your only option is to manually copy scripts to a folder (e.g. with a npm script) and add this folder as an asset to .angular-cli.json.
So if you really depend on something being loaded before angular itself (Option A), then you need to copy it manually to a folder that will be included in the angular build and then you can load it manually with a <script> in <head>.
Thus, for achieving option a you have to:
create a vendor folder in src/
add this folder as an asset to .angular-cli.json:
"assets": [
"assets",
"favicon.ico",
"vendor"
]
copy your vendor script node_modules/some_package/somejs.js to vendor
load it manually in index.html:
<head>
<script src="vendor/some_package/somejs.js">
</head>
However most of the time you only need this approach for packages, that need to be available globally, before everything else (i.e. certain polyfills). Kris' answer holds true for Option B and you get the benefit of the webpack build (Minification, Hashes, ...).
However if your scripts need not be globally available and if they are module-ready you can import them in src/polyfills.ts or even better import them only when you need them in your specific components.
Making scripts globally available via scripts:[] or via manually loading them brings it own set of problems and should really only be used, when it is absolutely necessary.

You need to open file .angular-cli.json file and need to search for
"scripts:" or if you want to add external css you need to find the word "styles": in the same file.
as an example shown below you will see how the bootstrap Js(bootstrap.min.js) and bootstrap CSS(bootstrap.min.css) includes in .angular-cli.json:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
For sure if you have your own js file you can add your file path here in .angular-cli.json at the same place(in "scripts":[]).

You might want to have a look at this page:
https://github.com/angular/angular-cli#global-library-installation
It show the basics of how to include .js and .css files
Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.

I havn't used angular-cli before but I'm currently working with an Angular/Webpack build. In order to provide my application with jQuery and other vendors I use webpack's plugin, ProvidePlugin(). This will typically sit in your webpack.config.js: Here's an example for jquery, lodash and moment libraries. Here's a link to the documentation (which is vague at best)
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash',
moment: 'moment',
})
]
Incredibly, it actually allows you to use it right away, providing all other webpack setup has been done correctly and have been installed with npm.