This is an Angular 2 Project Seed (aka application template) which supports you while developing, testing and building your Angular 2 applications for production. This project seed is essentially based on the Angular 2 Quick Start. What was added to it are Gulp with its plugins to make the project seed more configurable and useful while developing, testing and building Angular 2 applications.
You need a Git client, the Node.js platform (including its package manager - npm) and Gulp to make use of the project seed. It is highly recommended to use the following versions:
-
Node.js 5.12.0
-
npm 3.3.6
-
Gulp 3.9.1
Please refer to the FAQ section for details on how to install the prerequisites.
Clone the oasp4js-ng2-project-seed repository:
git clone https://github.com/oasp/oasp4js-ng2-project-seed.git
Install all node.js dependencies (this may take several minutes when doing for the first time):
cd oasp4js-ng2-project-seed npm install
Start a sample Angular 2 application:
gulp
Your default browser opens and shows the sample Angular 2 application. What is more, you can now develop your application using your favorite IDE while the Gulp process is watching for your changes and upon them reloads the sample application automatically in your browser.
The OASP4JS Angular 2 Project Seed offers developers a few Gulp tasks which support them.
gulp build
Transpiles your TypeScript sources into JavaScript, processes Less / Sass files into CSS ones,
copies HTML files, images, fonts, etc. to the temporary directory (which defaults to .tmp).
gulp build:dist
Does all what gulp build does and additionally minimizes HTML and CSS files as well as concatenates all JavaScript
files into one file and eventually minimizes and obfuscates it. After executing this task, in the destination directory
(which defaults to dist) you can find an application optimized for production.
gulp serve
Executes gulp build and starts a Browsersync web server which serves the web content
from the temporary directory (where the results of gulp build are saved). In addition to this, the sources,
such as JavaScript, HTML, CSS, image files, are watched for changes. Upon a change, your browser will be reloaded
automatically.
gulp serve:dist
Executes gulp build:dist and starts a Browsersync web server which serves the web content
from the destination directory (where the results of gulp build:dist are saved). No sources are watched for changes.
gulp test
Starts linting your source code (using TSLint) and - if no errors found - executes your tests (specs) using Karma against the PhantomJS headless browser.
gulp test:tdd
As in gulp test, executes your specs using Karma
against the PhantomJS browser, but without linting and the Gulp process doesn’t end. It watches
for your code changes instead. This mode is recommended for developers applying the
Test Driven Development technique.
gulp test:tdd:debug
In addition to gulp test:tdd allows you to debug your application while testing. Therefore the specs are executed
against the Chrome browser.
gulp test:coverage
In addition to gulp test code coverage reports (HTML, Cobertura and lcov) are generated in the test-output directory.
In the app\_env directory you can find TypeScript files, environment.dev.ts and environment.prod.ts which add
environment specific (e.g. development, production) behavior to your application. These files can be modified as needed.
During the build, depending on the target platform, one of these files is renamed to environment.ts and transpiled to JavaScript.
You can import the current environment file somewhere in your TypeScript sources; this is an example from the main.ts:
import {enableProdMode} from '@angular/core';
import {environment} from './_env/environment';
if (environment.enableProdMode) {
enableProdMode();
}Check if you have a Git client already installed:
git --version
If your OS can not recognize this command, install Git. For details please refer to this page. When installing under Windows, please make sure you check the following option:
-
✓ Use git from Windows command prompt
It is highly recommended to install the Node Version Manager which manages multiple active Node.js versions on your machine. The windows version of nvm can be found here.
Gulp is a streaming build system. Install the Gulp globally using the npm. Type the following command in the command line tool:
npm install -g gulp
In order to check if Gulp was correctly installed you can check its version by typing:
gulp --version
As is the case in the Angular 2 Quick Start, this project seed uses npm for dependency management and SystemJS for module loading.
Let us assume you would like to add a very popular JavaScript utility library - lodash. First install it using npm:
npm install lodash --save
The above command downloads the library to your node_modules directory and updates the package.json file.
Second, let SystemJS know that the library can be imported in your TypeScript files; add this to the systemjs.config.json file:
map: {
...
'lodash': 'npm:lodash'
}
packages: {
...
'lodash': {
main: './index.js',
defaultExtension: 'js'
}
}Third, import the library in your TypeScript class and use it:
import * as _ from 'lodash';
export class MyClass {
myMethod(): void {
...
_.cloneDeep({name: 'John'});
}
}Switch to the angular-material branch:
git checkout angular-material
install npm dependencies:
npm install
and run the project seed:
gulp
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent