Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kevinrodriguez-io/e0a433f5ae2d40c1f3472ec4de6cb7ae to your computer and use it in GitHub Desktop.
Save kevinrodriguez-io/e0a433f5ae2d40c1f3472ec4de6cb7ae to your computer and use it in GitHub Desktop.
Project setup: angular-cli, SCSS, Routing, jQuery, Font Awesome, Bootstrap
# Install node.js (With npm)
# Install angular-cli.
npm install -g @angular/cli
# Init new angular-cli project.
# Use the --style=scss flag if you want to use scss.
# Use the --routing flag if you want to use angular routing by default.
ng new my-project --style=scss --routing
# Install jQuery (Needed for bootstrap).
npm install jquery --save
# Install jQuery typings (Optional).
# Use only if you want to install it
# and use it alongside angular.
npm install @types/jquery --save-dev
# Install popper.js (Required by bootstrap)
npm install popper.js --save
# Install bootstrap4
npm install bootstrap@4.0.0-beta --save
# Install ng-bootstrap for angular
# bootstrap components (Optional)
npm install @ng-bootstrap/ng-bootstrap --save
# Install font-awesome
npm install font-awesome --save
# IMPORTANT
# Add style references (This works for css too)
# Modify src/styles.scss and add:
# @import "~bootstrap/dist/css/bootstrap.min.css";
# @import "~font-awesome/css/font-awesome.css";
# IMPORTANT
# Add jquery, tether.js and bootstrap scripts to
# the angular-cli.json scripts array.
#
# ./angular-cli.json scripts array should be like this:
# "scripts": [
# "../node_modules/jquery/dist/jquery.js",
# "../node_modules/tether/dist/js/tether.js",
# "../node_modules/bootstrap/dist/js/bootstrap.js"
# ],
# ADDITIONAL NOTES:
# If you want to use jquery($) inside a typescript file
# you have to install the @types/jquery dependency for development
# and reference jquery as follows:
# import * as $ from 'jquery';
# Done!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment