Develop Reference

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!

Angular : Addons its not allowed

I am following a tutorial to make a website using angular on youtube.
I get this error when adding addons in angular.json on 8:17 like this:
Schema validation failed with the following errors:
Data path "" should NOT have additional properties(addons).
Is this because I add "addons" on angular.json, while the tutorial is adding "addon" on angular-cli.json?
There is no angular-cli.json on my directory.
I'm prety sure I am following the tutorial 100%. I think the structure between angular.json and angular-cli.json is the same:
"styles": [
"src/styles.scss",
"../node_modules/font-awesome/scss/font-awesome.scss"
],
"addons": [
"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
],
"scripts": []

addons was removed from the config according to this.
Check the docs on how to include font-awesome:
Using SASS
Create an empty file _variables.scss in src/.
Add the following to _variables.scss:
$fa-font-path : '../node_modules/font-awesome/fonts';
In styles.scss add the following:
#import 'variables';
#import '../node_modules/font-awesome/scss/font-awesome';

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"
]

Angular - 'Could not find HammerJS'

I'm working on a simple angular project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says:
Could not find HammerJS. Certain Angular Material components may not work correctly.
I have hammerjs installed and also #angular/material. How do I resolve this issue?
Sidenote
It may be worth noting that if you have hammerjs installed and your components are still not rendering correctly to make sure you are using angular material components and not html elements with materialize-css classes.
If you are using materialize-css instead of angular material, you will need to add it to your project separately.

In your package.json file add this to dependencies
"hammerjs": "^2.0.8",
Or if you want an alternative automatic way just you can type npm i hammerjs --save (or npm i hammerjs#2.0.8 --save if you want, since 2.0.8 is the latest version nowdays) in your root project folder and test then, if the problem still occurring try to delete the node_modules folder and reinstall it in the root project folder also by running npm install which will check the dependencies (where hammerjs resides), devDependencies ..., in package.json file and install them.
Also in your polyfills.ts (recommended to have a one if you have not)
import 'hammerjs/hammer';
Thus, it would be found while your angular app is executed since polyfills.ts itself is called by import (in a normal case, else you can check it) in main.ts which is the angular apps' entry point.

Install hammerjs
with npm
npm install --save hammerjs
(or) with yarn
yarn add hammerjs
Then import hammerjs on your app's entry point (e.g. src/main.ts).
import 'hammerjs';

In your systemjs.config.js file you also need to add the following entry:
'hammerjs': 'npm:hammerjs/hammer.js',
along with of course:
'#angular/material': 'npm:#angular/material/bundles/material.umd.js',
The other thing that's missing from your code (at least based on what you have in the GH repo) is the inclusion of the Material Design CSS, add this to your index.html file:
<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
I hope this helps.

this worked for me (and this is with ionic4 as well)
I could make hammer.js work - and also ionic with material.angular.io (in the bottom)
Hammer + ionic (hammer + angular as well):
npm install --save hammerjs
npm install --save #types/hammerjs
then
package.json
make sure in dependencies there is this line
"hammerjs": "^2.0.8",
then
tsconfig.json - added types as seen below
"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}
then
in app.component.ts (only there)
import 'hammerjs';
then
in html file (I just took out the first and last < > signs)
div id="myElement"></div
in .ts file
Sample code from hammerjs site works
let element2 = document.getElementById('myElement');
let hamming = new Hammer(element2);
hamming.on("panleft panright tap press pressup", function(ev) {
element2.textContent = ev.type +" gesture detected.";
console.log(ev.type +" gesture detected.");
});
Hammer+ionic+material:
to make material hammer work with ionic
in app.module
import { HAMMER_GESTURE_CONFIG } from '#angular/platform-browser';
import { GestureConfig } from '#angular/material';
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]
and voila, your material slider works.

Open your command line or powershell, type the directory of your angular2 project: cd your-project's-root, hit enter and paste:
npm install hammerjs --save
Npm will automatically add all dependencies into your package.json file.

npm install hammerjs --save
npm install #types/hammerjs --save-dev
add this to typescript.config under compiler options
"types": [
"hammerjs"
]
add this to app.components.ts:

Install with
npm install --save hammerjs
or
yarn add hammerjs
After installing, import it on your app's entry point (e.g. src/main.ts).
import 'hammerjs';
Angular Material Getting Started Guide

Starting from Angular 9 you need to add HammerModule to imports array of your AppModule. Please, find the example below:
...
import {
BrowserModule,
TransferState,
BrowserTransferStateModule,
HammerModule, // <-- Hammer Module
} from '#angular/platform-browser';
...
#NgModule({
declarations: [
AppComponent,
],
imports: [
HttpClientModule,
AppRoutingModule,
HammerModule, // <-- Hammer Module
],
bootstrap: [AppComponent],
})
export class AppModule { }
Don't forget to do npm install or yarn add for adding hammerjs to your project. For a more convenient way, it will be better to install #types/hammerjs

Other than importing hammerJS separately,we can provide this gesture recognition feature to yes while installing angular material(version 8) library with the following command.
npm add #angular/material
Set up HammerJS for gesture recognition?-Yes
Verify the 'hammerjs' is imported into main.ts file

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');
}
}