Playground for experimenting with some of the core features of Angular and integration with other software and services.
This setup is using:
- Core JS - necessary for browsers that haven't implemented any or some of the ES6 features required by Angular
- HammerJS - adds support for touch gestures in Material 2
- Angular Flex Layout
- Material 2
- Firebase - realtime store for the app's data, authentication and hosting provider
Table of Contents
- Learning Material
- Browser Support
Make sure you have Node version
v7 (or above) installed.
Follow the instructions for setting up the app:
- Clone the repository:
git clone https://github.com/rolandjitsu/angular-lab.git;
- From the root of the project, install dependencies:
NOTE: Keep in mind that every package that was installed has to be invoked with either
$(npm bin)/<package> or
Or if you want to avoid writing all of that every time:
- Install direnv;
.envrc(just a file) with
direnv allowat the root of the project where
Now you can simply run
In order to use your own Firebase account for hosting the app, follow the instructions below:
- Make sure that you ran
$(node bin)/npm installso that firebase-tools is installed. Now run
$(npm bin)/firebase login:cito get an auth token (follow the steps you are given by the command);
- Copy the token that was echoed in the terminal and put it somewhere safe for further usage;
- Alternatively, export the token (
export FIREBASE_TOKEN=<your Firebase token here>);
angular-lab-da3a7with your own Firebase project id in
Given that you have
FIREBASE_TOKEN exported as env var, you can deploy the app to your own Firebase account with:
npm run deploy
Or you can also use the following to set
FIREBASE_TOKEN and deploy:
FIREBASE_TOKEN=<your Firebase token here> npm run deploy
If you plan on using this setup with your own projects and you wish to setup Travis CI, you must make sure of a few of things in order to have everything working properly on the CI:
- For deployments, setup the env variable
FIREBASE_TOKENcontaining the token you got from
$(npm bin)/firebase login:ci:
- Encrypt the token using
travis encrypt FIREBASE_TOKEN=<your Firebase token>, see docs to find out more about it;
- Replace the
securekey's value, where the Firebase token is in
.travis.yml, with your own encrypted string generated from the previous step;
- Encrypt the token using
- For tests that run on Saucelabs, setup the env variables
SAUCE_USERNAMEwith your own username (no need to encrypt);
- Encrypt the access key
travis encrypt SAUCE_ACCESS_KEY=<your Saucelabs access key>;
- Replace the
securekey's value with the string generated from the previous step (it's right below
- Remove the
If you don't want to deploy to Firebase on push skip the 1st step in the instructions above and remove the following in
after_success: npm run deploy:cistep;
If you don't use Saucelabs, skip the 2nd step and remove the following in
Now, keep in mind that cloning this repo and continuing in the same project will give you some issues with Travis if you wish to set it up with your own account.
So I suggest you start out with a clean project and start git from scratch (
then copy over things from this project (obviously, do not include
.git - not visible on most UNIX base systems).
All you need to get started is
npm start (or
npm start:prod if you need to emulate a production environment).
Now you should see the app running in the browser (might take a while when compiling the first time).
Below you can find a few of things to help understand how this setup works and how to make it easier when developing on this app.
Angular CLI is used to handle every aspect of the development of the app (e.g. building, testing, etc.).
To get started,
npm start will start a static webserver, rerun builds on file changes (styles, scripts, etc.), and reload the browser after builds are done.
Unit tests run the same way, whenever there is a change the tests will rerun on the new code. For further info about tests read below.
Tests can be run selectively as it follows:
npm run lint/
$(npm bin)/ng lint: runs tslint and checks all
.tsfiles according to the
$(npm bin)/ng test: unit tests in a browser; runs in watch mode (i.e. watches the source files for changes and re-runs tests when files are updated);
npm run test/
$(npm bin)/ng test --single-run: unit tests in a browser; runs in single run mode, meaning it will run once and it will not watch for file changes;
npm run test:ci: unit tests on the CI server; same as
npm run test, but it runs on Saucelabs browsers;
npm run e2e/
$(npm bin)/ng e2e: e2e tests in Chrome;
npm run e2e:ci: e2e tests on the CI server, in Chrome but on Saucelabs servers.
In case you need to build everything, run
npm run build/
$(npm bin)/ng build (use
npm run build:prod if the build is for production).
To see what other commands are available, run
$(npm bin)/ng help.
Deployments are handled by Travis CI.
master will automatically deploy the app, given that all tests pass.
- Angular 2 Education
- Awesome Angular 2
- Angular Docs
- Flex Layout
- Material 2 Docs
- Google Material
You can expect the app to run wherever Angular does, but check the matrix below to see where the project tests pass.
If you wish to contribute, please use the following guidelines:
- Use Conventional Changelog when committing changes
- Follow Angular Styleguide
npm run lintto fix any TS warnings/errors before you check in anything:
[ci skip]in commit messages to skip a build (e.g. when making docs changes)
In the making of this simple app, I have made use of whatever resources I could find out there, thus, it's worth mentioning that the following projects have served as inspiration and help: