# angular-starter
An Angular starter featuring Angular 5 and Webpack includes (Tslint, Codelyzer, Composedoc, Moq.ts, Fixture)

## Getting Started
This project is well supported with vscode editor. Easy deployment with PCF (pivot clound foundry).
Uses `.scss` files for styling and no `.css` loaders are configured, add your own css loaders to support `.css` extensions

- `npm install` to install dependencies
- `npm run serve` quick launch of webpack-devserver that supports live-reload
- `npm run build` build development ready files to **dist** directory
- `npm run publish` build production ready files to **public** directory
- `npm run serve:dev` starts dev server locally
- `npm run serve:prod` starts production ready server locally and watch out file loading response times.
- `npm run lint` runs coding standards rules across entire project (these rules can be set in tslint.json)
- `npm start` build and start production ready server
- `npm run test:karma` karma-chrome-launcher runs the jasmine unit test cases in chrome browser
- `npm run webdriver:start` start the selenium webdriver before running protractor e2e tests
- `npm run test:protractor` launch the protractor e2e tests

> Before running `serve:dev` and `serve:prod`, make sure the `npm run build` and `npm run publish` are executed to build output files.

### Project Structure
- config 
  
  Webpack configuration files for different enviroments.
- pcf_settings
  
  PCF deployment steps and files.
- src

  Angular source code.
- e2e

  End to End tests.
- vscode_settings

  VSCode editor configuration files specific to angular. Copy these files to your local **.vscode** project directory and you will automatically get suggestions to install plugins. Install these plugins for good dev experience.
- pcf_steps.txt
  
  Explains how to deploy your application to PCF environment
- installation.txt
 
  Explains the softwares required to start building angular-starter application
 

### Features

- Easy switching between early and lazy load of modules in angular by configuring **global.lazyLoad** property in `config/start.js`
- Support to load external files like bootstrap, jquery in 3 configurable ways in `config/webpack.build.js`
    1. Load via CDN, configure **cdn** property in `config\webpack.pkgs.js`
    2. Load via Local modules, configure **local** in `config\webpack.pkgs.js`
    3. Load local modules but bundle them, import those files in `src/vendor.ts` with extensions
>Comment local modules import in `vendor.ts` when you choose **cdn | local**
- Easy switch between hash and non hash based url. Configure `src/app/app.configuration.ts`
- Angular supports **CaseSensitiveUrling** which is the default web standard, configurable `src/app/app.configuration.ts`
- Enable angular prod mode by setting **environment: prod** property in `src/app/app.configuration.ts`

### Internals
- This project uses **webpack-conditional-loader** to support easy switch between lazy and early load of modules.
- This project uses **codelyzer** for configuring coding standards across teams.
- This project uses **composedoc** to build your angular documentation, we can look at generated docs for quick understanding of project architecture.
- `@NgModule` configuration object splitted out to seperate `.config` file under `setup` directory for each module **(ex: About)** to increase the smooth development in testing the components

### Known Issues
- Move app configuration from **app.configuration.ts** to **app.configuration.json** to reduce rebuild on configuration changes but this requires us to do **http.get** request on application startup because angular can only read .ts files and not the .json files.
- Configure sourcemaps builds for specific .ts files. We can exclude vendor.ts, polyfiils.ts from source maps generation.