{"id":13550830,"url":"https://github.com/rolandjitsu/angular-lab","last_synced_at":"2025-10-01T23:30:44.785Z","repository":{"id":32450451,"uuid":"36029820","full_name":"rolandjitsu/angular-lab","owner":"rolandjitsu","description":"Angular Lab","archived":true,"fork":false,"pushed_at":"2020-09-06T03:32:59.000Z","size":1310,"stargazers_count":147,"open_issues_count":0,"forks_count":30,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-01-18T03:27:10.349Z","etag":null,"topics":["angular","angular-2","angular-2-quickstart","angular-4","angular-flex-layout","firebase","material-2","sauce-labs","travis-ci"],"latest_commit_sha":null,"homepage":"https://angular-lab.rolandgroza.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"XPBytes/please-share-coffee","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rolandjitsu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-21T18:18:15.000Z","updated_at":"2023-01-28T12:58:01.000Z","dependencies_parsed_at":"2022-07-08T12:17:28.836Z","dependency_job_id":null,"html_url":"https://github.com/rolandjitsu/angular-lab","commit_stats":null,"previous_names":["rolandjitsu/ng2-lab"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rolandjitsu%2Fangular-lab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rolandjitsu%2Fangular-lab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rolandjitsu%2Fangular-lab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rolandjitsu%2Fangular-lab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rolandjitsu","download_url":"https://codeload.github.com/rolandjitsu/angular-lab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234909086,"owners_count":18905504,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-2","angular-2-quickstart","angular-4","angular-flex-layout","firebase","material-2","sauce-labs","travis-ci"],"created_at":"2024-08-01T12:01:38.181Z","updated_at":"2025-10-01T23:30:44.374Z","avatar_url":"https://github.com/rolandjitsu.png","language":"TypeScript","readme":"# Angular Lab\n\n[![Build Status](https://img.shields.io/travis/rolandjitsu/angular-lab.svg?style=flat-square)](https://travis-ci.org/rolandjitsu/angular-lab)\n[![Dependency Status](https://david-dm.org/rolandjitsu/angular-lab.svg?style=flat-square)](https://github.com/rolandjitsu/angular-lab)\n[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg?style=flat-square)](https://gitter.im/rolandjitsu/angular-lab)\n\u003e Playground for experimenting with some of the core features of [Angular](https://angular.io) and integration with other software and services.\n\n# IMPORTANT NOTICE\n\nThis project is no longer maintained and it's definitely out of date! Use at your own risk!\n\n# Setup\n\nThis setup is using:\n* [Angular](http://angular.io)\n* [TypeScript](http://www.typescriptlang.org)\n* [Core JS](https://github.com/zloirock/core-js) - necessary for browsers that haven't implemented any or some of the [ES6](http://es6-features.org) features required by Angular\n* [HammerJS](http://hammerjs.github.io) - adds support for touch gestures in Material 2\n* [Angular Flex Layout](https://github.com/angular/flex-layout)\n* [Material 2](https://material.angular.io)\n* [Material Icons](https://material.io/icons)\n* [Normalize CSS](https://necolas.github.io/normalize.css)\n* [RxJs](http://reactivex.io/rxjs)\n\nPaaS:\n* [Firebase](https://firebase.com) - realtime store for the app's data, authentication and hosting provider\n\nUnit/E2E tests \u0026 format check:\n* [Karma](http://karma-runner.github.io) - test runner for the app unit tests\n* [Protractor](https://angular.github.io/protractor) - e2e test framework\n* [Jasmine](http://jasmine.github.io) - assertion lib\n* [TSlint](https://palantir.github.io/tslint)\n\nCI/CD:\n* [Travis CI](https://travis-ci.org) - CI/CD\n* [Saucelabs](https://saucelabs.com) - browser provider for running tests on the CI server\n\nTools:\n* [Angular CLI](https://cli.angular.io)\n\nPackage management:\n* [David](https://david-dm.org) - keeps an eye on all the project dependencies versions\n* [NPM](https://www.npmjs.com)\n* [Yarn](https://yarnpkg.com/en)\n\n\n# Table of Contents\n\n* [Setup](#setup)\n    * [Environment](#environment)\n\t* [Firebase](#firebase)\n\t\t* [Hosting](#hosting)\n\t* [Travis CI](#travis-ci)\n* [Development](#development)\n\t* [Info](#info)\n\t* [Run Tests](#run-tests)\n\t* [Angular CLI](#angular-cli)\n* [Deployments](#deployments)\n* [Learning Material](#learning-material)\n* [Browser Support](#browser-support)\n* [Contribute](#contribute)\n* [Credits](#credits)\n\n\n### Setup\n---------\nMake sure you have [Node](http://nodejs.org) version `v7.9` (or above) installed.\n\nIf you'd like to use [Yarn](https://yarnpkg.com/en), follow their [instructions](https://yarnpkg.com/en/docs/install) to install it on your platform,\notherwise make sure at least [NPM 5](https://docs.npmjs.com/getting-started/installing-node#updating-npm) is installed, you can check the version with `npm --version`.\n\nFollow the instructions for setting up the app:\n\n1. Clone the repository: `git clone https://github.com/rolandjitsu/angular-lab.git`;\n2. From the root of the project, install dependencies: `yarn install`/`npm install`; \n\n**NOTE**: Keep in mind that every package that was installed has to be invoked with either `$(npm bin)/\u003cpackage\u003e` or `node_modules/.bin/\u003cpackage\u003e`.\nOr if you want to avoid writing all of that every time:\n\n1. Install [direnv](http://direnv.net);\n2. Setup `.envrc` (just a file) with `export PATH=$PATH:$PWD/node_modules/.bin`;\n3. Run `direnv allow` at the root of the project where `.envrc` resides.\n\nNow you can simply run `\u003cpackage\u003e`.\n\n#### Environment\nIf you'd like to use env variables, such as API keys, in the app, you can do so by importing from `secrets`:\n```ts\nimport {MY_SECRET} from 'secrets';\n```\n\nFor the above to work, you need to:\n\n1. Add `MY_SECRET` to the `.secrets` file (`MY_SECRET` needs to be an env variable)\n2. Add the var to `src/typings.d.ts`:\n```ts\ndeclare module \"secrets\" {\n    ...\n    export const MY_SECRET: any;\n}\n```\n3. Run `npm run secrets:eject`\n\nThe last command will generate a `.secrets.js` module file containing all the secrets. This file is aliased to the `secrets` path you use to import from (using the TS `{paths}` compiler option).\n\n**NOTE**: All the values will be strings, therefore, it's up to you to parse them as needed.\n\n#### Firebase\n##### Hosting\nIn order to use your own Firebase account for [hosting](https://firebase.google.com/docs/hosting/quickstart) the app, follow the instructions below:\n\n1. Run `$(npm bin)/firebase login:ci` to get an auth token (follow the steps you are given by the command) and export it `export FIREBASE_TOKEN=\u003cyour Firebase token\u003e`;\n3. Get the Firebase API key (use `$(npm bin)/firebase setup:web` to get it from `{apiKey}`) and export it `export FIREBASE_API_KEY=\u003cyour Firebase API key\u003e`;\n4. Replace `angular-laboratory` with your own Firebase project id in `.firebaserc`.\n\nGiven that you have `FIREBASE_TOKEN` and `FIREBASE_API_KEY` exported as env var, you can deploy the app to your own Firebase account with:\n```shell\n# NOTE: This also generates a .secrets.js\nnpm run deploy\n```\n\nOr you can also use the following to set `FIREBASE_TOKEN`/`FIREBASE_API_KEY` and deploy:\n```shell\nFIREBASE_API_KEY=\u003cyour Firebase API key\u003e FIREBASE_TOKEN=\u003cyour Firebase token\u003e npm run deploy\n```\n\n#### Travis CI\nIf you plan on using this setup with your own projects and you wish to setup Travis CI,\nyou must make sure of a few of things in order to have everything working properly on the CI:\n\n1. For deployments, setup the env variable `FIREBASE_TOKEN` containing the token you got from `$(npm bin)/firebase login:ci`:\n\t- Encrypt the token using `travis encrypt FIREBASE_TOKEN=\u003cyour Firebase token\u003e`, see [docs](https://docs.travis-ci.com/user/environment-variables/#Encrypted-Variables) to find out more about it;\n\t- Replace the `secure` key's value with the string generated from the previous step (it's right below `FIREBASE_TOKEN` in `.travis.yml`);\n2. For connecting the app to Firebase (and properly building the app), setup the `FIREBASE_API_KEY` env variable:\n    - Encrypt the API key using `travis encrypt FIREBASE_API_KEY=\u003cyour Firebase API key\u003e`;\n    - Replace the `secure` key's value with the string generated from the previous step (it's right below `FIREBASE_API_KEY` in `.travis.yml`);\n3. For tests that run on Saucelabs, setup the env variables `SAUCE_USERNAME` and `SAUCE_ACCESS_KEY`:\n\t- Replace `SAUCE_USERNAME` with your own username (no need to encrypt);\n\t- Encrypt the access key using `travis encrypt SAUCE_ACCESS_KEY=\u003cyour Saucelabs access key\u003e`;\n\t- Replace the `secure` key's value with the string generated from the previous step (it's right below `SAUCE_ACCESS_KEY` in `.travis.yml`);\n4. Remove the `webhooks` section from `notifications` in `.travis.yml`.\n\nIf you don't want to deploy to Firebase on push skip the 1st and 2nd step in the instructions above and remove the following in `.travis.yml`:\n* `after_success: npm run deploy:ci` step;\n* Encrypted `FIREBASE_TOKEN` env var;\n* Encrypted `FIREBASE_API_KEY` env var.\n\nIf you don't use Saucelabs, skip the 3nd step and remove the following in `.travis.yml`;\n* `sauce_connect` section from `addons`;\n* Encrypted `SAUCE_USERNAME` and `SAUCE_ACCESS_KEY` env vars.\n\nNow, 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.\nSo I suggest you start out with a clean project and start git from scratch (`git init`),\nthen copy over things from this project (obviously, do not include `.git` - not visible on most UNIX base systems).\n\n\n### Development\n---------------\nAll you need to get started is `npm start` (or `npm start:prod` if you need to emulate a production environment).\nNow you should see the app running in the browser (might take a while when compiling the first time).\n\nBelow 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.\n\n#### Info\n[Angular CLI](https://cli.angular.io) is used to handle every aspect of the development of the app (e.g. building, testing, etc.).\nTo 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.\n\nUnit tests run the same way, whenever there is a change the tests will rerun on the new code.\nFor further info about tests read below.\n\n#### Run Tests\nTests can be run selectively as it follows:\n\n* `npm run lint`: runs [tslint](http://palantir.github.io/tslint) and checks all `.ts` files according to the `tslint.json` rules file;\n* `npm run lint:fix`: runs the above command and also tries to fix some of failures (see the [rules](https://palantir.github.io/tslint/rules/) with `Has Fixer` flag);\n* `npm run test:continuous`: unit tests in Chrome headless; runs in watch mode (i.e. watches the source files for changes and re-runs tests when files are updated);\n* `npm run test`: unit tests in Chrome headless; runs in single run mode, meaning it will run once and it will not watch for file changes;\n* `npm run test:ci`: unit tests on the CI server; same as `npm run test`, but it runs on [Saucelabs](https://saucelabs.com) browsers;\n* `npm run e2e`: e2e tests in Chrome headless without code watch or live reload;\n* `npm run e2e:ci`: e2e tests on the CI server, but on [Saucelabs](https://saucelabs.com) browsers.\n\n#### Angular CLI\nIn case you need to build everything, run `npm run build` (use `npm run build:prod` if the build is for production).\n\nTo see what other commands Angular CLI has, run `$(npm bin)/ng help`.\nOr take a look at the `scripts` section in `package.json` for project specific commands.\n\n\n### Deployments\n---------------\nDeployments are handled by [Travis CI](https://travis-ci.org).\nPushing to `master` will automatically deploy the app, given that all tests pass.\n\n\n### Learning Material\n---------------------\n* [Awesome Angular](https://github.com/angular-class/awesome-angular)\n* [Angular Docs](https://angular.io)\n* [Angular CLI](https://cli.angular.io)\n* [Flex Layout](https://github.com/angular/flex-layout/wiki/API-Overview)\n* [Material 2](https://material.angular.io)\n* [Material Design](http://material.io)\n* [Thoughtram](https://blog.thoughtram.io/exploring-angular-2)\n* [Egghead](https://egghead.io/technologies/angular2)\n\n\n### Browser Support\n-------------------\nYou can expect the app to run wherever Angular does, but check the matrix below to see where the project tests pass.\n\n[![Sauce Tests](https://saucelabs.com/browser-matrix/angular-lab.svg)](https://saucelabs.com/u/angular-lab)\n\n\n### Contribute\n--------------\nIf you wish to contribute, please use the following guidelines:\n* Use [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md) when committing changes\n* Follow [Angular Styleguide](https://angular.io/guide/styleguide)\n* Use `npm run lint`/`npm run lint:fix` to fix any TS warnings/errors before you check in anything:\n\t* It will run [TSLint](http://palantir.github.io/tslint) to check for any inconsistencies\n\t* It will check against Angular styleguide using [codelyzer](https://www.npmjs.com/package/codelyzer)\n\t* If `npm run lint:fix` was used, it will fix some errors\n* Use `[ci skip]` in commit messages to skip a build (e.g. when making docs changes)\n\n\n### Credits\n-----------\nIn the making of this simple app, I have made use of whatever resources I could find out there,\nthus, it's worth mentioning that the following projects have served as inspiration and help:\n\n* [ng2-play](https://github.com/pkozlowski-opensource/ng2-play)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frolandjitsu%2Fangular-lab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frolandjitsu%2Fangular-lab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frolandjitsu%2Fangular-lab/lists"}