How to add JQuery and Bootstrap to an Angular CLI project

How to add JQuery and Bootstrap to an Angular CLI project

How to add JQuery and Bootstrap to an Angular CLI project

Works with

  • Angular CLI: 10.1.1

Steps

  1. Create your Angular CLI app

    ng new angular-app

  2. In your terminal, run

    npm install jquery --save
npm install @types/jquery --save

  3. Go to tsconfig.app.json and add an entry in the “types” array

    {
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["jquery"]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

  4. Open angular.json and make sure jquery has an entry in angular.json -> scripts

    ...
    "scripts": [
        "node_modules/jquery/dist/jquery.min.js"
    ]
...

  5. Follow same procedure for Bootstrap, but don’t forget to add an entry to “styles” in angular.json

    	"styles": [
	"src/styles.scss",
	"node_modules/bootstrap/dist/css/bootstrap.min.css"
	],
	"scripts": [
	"node_modules/jquery/dist/jquery.min.js",
	"node_modules/bootstrap/dist/js/bootstrap.min.js"
	]

References

How to use jQuery with TypeScript

Comments

Post a Comment

Popular posts from this blog

WPF - Combobox with a null item

--- --- WPF - Combobox with a null item It adds an item for “Select All” or “Empty” functionality into a combobox Converter public class ComboBoxEmptyItemConverter : IValueConverter { /// <summary> /// this object is the empty item in the combobox. A dynamic object that /// returns null for all property request. /// </summary> private class EmptyItem : DynamicObject { public string Name { get ; set ; } = "Empty" ; public override bool TryGetMember ( GetMemberBinder binder , out object result ) { // just set the result to null and return true result = null ; return true ; } } public object Convert ( object value , Type targetType , object parameter , CultureInfo culture ) { // assume that the value at least inherits from IEnumerable ...
Read more

Add Cordova and Electron to an Angular App

Image
--- --- Add Cordova and Electron to an Angular App Run your angular app as a web, Windows, Android or Linux app, and and if you have the means, in an Iphone or a Mac. Here I’m just covering the browser, Windows and Android. You can find this code in Github . Works in Windows 10 Node js 12.13 Angular CLI 10.1.1 Cordova 10 Android Studio Create the Angular App Create an Angular app by running this command in the terminal ng new angular-app Run in the browser Run ng serve Open http://localhost:4200 in your favorite browser Install Electron in the Angular App To install electron in angular-app run npm install --save-dev electron Inside angular-app create a file and name it main.js Copy the code the from the first app tutorial in the Electron web site and paste it in main.js const { app , BrowserWindow } = require ( 'electron' ) function createWindow ( ) { // Create the browser window. const win = new BrowserWindow ( { width : ...
Read more

How to enable CORS between an Angular app and an ASP.Net Web API Service

Image
How to enable CORS between an Angular app and an ASP.Net Web API Service If you have an ASP Net WebAPI service running in one domain, and an angular app running in another domain, you’ll need to enable CORS in the web service, in this example, we’re also enabling Windows authentication Works for NET Framework 4.8 Microsoft ASPNET Web API Angular CLI 10.1 Node 10.15 Windows 10 Create a .NET WebAPI application with Windows Authentication Create a folder and name it Models Inside Models create Employee.cs and this code: public class Employee { public int Id { get ; set ; } public string Name { get ; set ; } public string Email { get ; set ; } } Create the Employees controller, right click the Controllers folder and click Add Controller In the Add Scaffold window, select Web API 2 Controller - Empty In Controller Name write EmployeesController In EmployeesController.cs include this code: [ RoutePrefix ...
Read more