Develop Reference

Webpack implementation

I'm trying out Webpack for the first time on one of my old website. The website has JQuery installed via CDN.
On one of my js file, I need to have Fancybox js plugin so I import as below
import { fancybox } from "#fancyapps/fancybox";
import "#fancyapps/fancybox/dist/jquery.fancybox.min.css";
I executed "npm run dev" and webpack gave me error "Can't resolve "jquery". So I have to include Jquery as a plugin in my webpack.config.js as follow
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}),
],
Execute "npm run dev" again and it works as expected. My question is how to avoid duplicate jquery loading since the website template already include JQuery via CDN and now my webpack output file also include JQuery? I tried to remove the Jquery CDN but then it caused my other js files to break. Thanks.

I found the solution to my issue. Adding it here for anyone who has similar issue in the future. Instead of importing jquery into webpack, I set webpack config to use external jquery as follow
externals: {
jquery: "jQuery",
},

Webpack Fabric external is resolving to undefined

I'm setting up a project (typescript, webpack) with a couple of js libraries, configured as externals in webpack. They should not be part of the bundle, instead provided by script tags within the html.
But when trying to use them in my class, they resolve to undefined.
Fabric configured as an external in webpack is resolving to undefined
An error occurs when trying to set up the fabric js library as an external within a (typescript + webpack ) project. Fabric should not be bundled in the output file since it will be the responsibility of the consumer to provide (eg. through a browser script tag).
Note: jQuery initially had an issue (as an external) but is now resolved, and works as expected. Fabric on the other hand does not.
fabric has been configured as an external so that it will not be included in the webpack bundle.
Here's how...
Added as an external within the webpack.config.js
...
externals: {
jquery: 'jQuery',
fabric: 'fabric',
},
...
Installed the declaration files for both libraries
npm install #types/jquery -D
npm install #types/fabric -D
Added the libraries in public folder and index.html (since they must not be part of the app bundle)
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/fabric.min.js"></script>
Created a class App.ts, imported and implemented instances of these two libraries. (see App.ts)
import { fabric } from "fabric";
import $ from 'jquery';
fabric resolves to undefined within the class App.ts with the error:
TypeError: Cannot read property 'Canvas' of undefined
Please don't recommend ProvidePlugin or installing Babel.
More about webpack "externals": https://webpack.js.org/configuration/externals/
Update #1
jQuery is now working as an external library. I was not referencing the actual jquery global "jQuery" in the externals setup. I had "JQuery" (with a capital J). That's now resolved and jquery is working. Thanks #Aluan
Fabric on the other hand seems to be a different issue altogether.

What you're looking for is called shimming. Webpack docs cover this extensively here: https://webpack.js.org/guides/shimming/
Edit to add example:
In your webpack.config.js plugins array:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
EDIT:
I pulled down your code and got it working. Here are the steps:
ts-loader chokes on shims, so use babel's #babel/preset-typescript -- otherwise you'll need to find a way to tell the ts compiler to ignore them. This will get you started:
npm install --save-dev #babel/core #babel/cli #babel/preset-env #babel/preset-typescript core-js#3
In your root, create a file called .babelrc and add the following:
{
"presets": [
"#babel/preset-typescript",
[
"#babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3"
}
]
]
}
Add this to your webpack.config.js:
plugins: [
new ProvidePlugin({
$: "jquery",
jQuery: "jquery",
fabric: "fabric"
})
]
Also update ts-loader, changing it to babel-loader.
Now in your code, you'll need to prefix your shimmed libraries with window:
constructor(private readonly selector: string, canvasHeight: number, canvasWidth: number) {
window.$(`#${selector}`).replaceWith(`<canvas id="${selector}" height=${canvasHeight} width=${canvasWidth}> </canvas>`);
this.canvas = new window.fabric.Canvas(`${selector}`, { selection: false });
}

It turns out that the issue with fabric is from fabric itself! The reason fabric is resolving to undefined (when being configured as an external on webpack) is related to the way that fabric exposes its library for consumption. It's an issue they need to fix.
I've added an issue on the official fabric github page
But there is a quick solution for us. Just import using CommonJS like this:
const fabric = require('fabric');
Now it works!

Can´t add Bootstrap 4 in Angular 6

I have the problem when I try to add the latest bootstrap version with
npm install bootstrap
After that, I got an error message when I tried to run it.
ng serve --open
I Add Bootstrap in angular.json
like this
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
And the error message is
ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve '...\node_modules\bootstrap\dist\css\bootstrap.min.css' in '...'
Why did I get the error message?

Delete "../node_modules/bootstrap/dist/css/bootstrap.min.css", in the Angular.json.
Try add this #import "~bootstrap/dist/css/bootstrap.css"; to your style.css file.
Ref: Styling Angular CLI v6 apps with Bootstrap

If the project has a test runner like Karma the Angular.json file has two styles property:
1- projects -> projectName -> architect -> build -> options
2- projects -> projectName -> architect -> test -> options
Maybe you just change styles in the test section and the build section has old styles.

In the Angular 6 you can add bootstrap to two files:
Inside the angular.json:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Inside the angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Inside the styles.css:
/* You can add global styles to this file, and also import other style files */
#import "~bootstrap/dist/css/bootstrap.css";
Note: If you use the first or second way, it's needed to cancel the running application, that means, if ng serve is active you must exit the app with Ctrl + C, but in the third way, it's not needed to cancel the application.

In the new version of angular, use node_modules/bootstrap/dist/css/bootstrap.min.css instead of ../node_modules/bootstrap/dist/css/bootstrap.min.css
So in angular.json file style attribute will look like
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
NOTE: if ng serve is already running then you may need to stop and run it again after doing the above changes. Happy coding :)

In angular, We have to add the direction of the bootstrap we installed.
Which means steps are as follows to use bootstrap in angular.
1. npm install bootstrap
Then we have to add the path in angular.json as follows
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css"
]

How to use JQuery-UI with Aurelia

I started a new Aurelia app using the Aurelia CLI.
I installed JQuery and configured aurelia.json using the instructions at the Aurelia documentation:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6
I then npm installed Jquery-ui.
I now need to know how to configure audelia.json to recognize jquery-ui.
In the Aurelia documentation this example is given on how to reference a module:
"dependencies": [
{
"name": "library-name",
"path": "../node_modules/library-name/dist/library-name"
}
]
The problem is that unlike when you download jquery-ui directly, the JQuery-ui module does not have an actual Jquery-ui.js file ( if it does I couldn't find it).
Thank you

The jquery-ui package doesn't include a "built" version of jquery-ui as far as I can tell. I finally got this working by using the jquery-ui-dist package, which includes the default jquery-ui.js and jquery-ui.css files.
npm install jquery-ui-dist --save
Now add it aurelia.json in dependencies for vendor-bundle:
"dependencies": [
"aurelia-binding",
...
"jquery",
{
"name": "jquery-ui-dist",
"path": "../node_modules/jquery-ui-dist",
"main": "jquery-ui",
"deps": ["jquery"],
"resources": [
"jquery-ui.css"
]
},
]
Notice we are loading jquery first. The "main" attribute tells it that it should load jquery-ui.js from that directory. The "deps" attribute tells it that it is dependent on jquery. Finally the "resources" attribute includes the default jquery-ui.css.
Now in app.html, be sure to require the css file:
<require from="jquery-ui-dist/jquery-ui.css"></require>
To use in a ts file:
import * as $ from 'jquery';
import 'jquery-ui-dist';

I'm using Aurelia 1.0.X, after updating I needed these two imports for using any jQuery-UI widget, in this case draggable. It also works when importing slider or resizable.
import $ from 'jquery';
import {draggable} from 'jquery-ui';
In my package.json, my jspm dependencies are as follows:
"jquery": "npm:jquery#^3.2.1",
"jquery-ui": "github:components/jqueryui#^1.12.1"

Add of copy of jquery-ui.js to your static folder and add this line to your constructor to the class you intend to use jquery-ui, Please note : it should reference to the location of your jquery-ui file
import { $ } from 'jquery';
export class Index
{
constructor(){
require('../../../../../static/assets/js/jquery-ui');
}
}

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.