<commit_before>![dependencies](https://david-dm.org/JunkyDeLuxe/angular4-starter.svg)

# Angular v4 with Webpack 2+

Complete starter for Angular 2 using Webpack works with JWT
Including a login, about, 404, commons header and footer components in order to create a generic skeleton

1/
```
# clone the repo
git clone ...

# change directory to your app

# install the dependencies with npm
$ npm install

# start the server
$ npm run start
```

2/
Launch a web browser and go http://localhost:8080

3/
Test End to End with Protractor, Jasmine framework and Selenium for Chrome only.
```
# install Selenium
# From a new term tab, launch chrome webdrivers
./node_modules/protractor/bin/webdriver-manager start

# From an other term tab, launch npm start.

# From an other term tab
npm run e2e
```

4/ Using webpack dev server with a proxy url for your API routes.
Just use /api in order to by pass with the webpack proxy.

5/ CSS
```
SASS only.
Using bootstrap alpha v4.
Using ng-bootstrap official using bootstrap v4.
Using postcss in order to postprocesses css rules.
Modals component example from home page using ng-bootstrap modules. 
```

## Components
1. [webpack-v2](https://webpack.js.org/configuration/)
2. [bootstrap-v4](https://github.com/twbs/bootstrap/tree/v4-dev)
3. [ng-bootstrap](https://github.com/ng-bootstrap/ng-bootstrap)
4. [mixgen-sass-generator](https://github.com/neo9/mixgen)
5. [ng2-slim-loading-bar](https://github.com/akserg/ng2-slim-loading-bar)
6. [ng2-translate](https://github.com/ngx-translate/core)
7. [font-awesome](https://github.com/FortAwesome/Font-Awesome)
8. [JWT](https://github.com/auth0/angular2-jwt)

For each component, you are able to check documentation and example in order to improve your starting project.

## Details
* For [JWT](https://github.com/auth0/angular2-jwt), you can easily remove it if you don't want to use it.
It is used in the **login module**
If you want keep it, you have to get an API with JWT.
[Example with Nodejs](https://github.com/auth0/node-jsonwebtoken)
* Translations: Works with json keys, values and json files, **check ./public/locales/en.json**

## Production
To build your application, run:

npm run build
You can now go to /dist and deploy that to your server!
<commit_msg>readme: Update details section<commit_after>![dependencies](https://david-dm.org/JunkyDeLuxe/angular4-starter.svg)

# Angular v4 with Webpack 2+

Complete starter for Angular 2 using Webpack works with JWT
Including a login, about, 404, commons header and footer components in order to create a generic skeleton

1/
```
# clone the repo
git clone ...

# change directory to your app

# install the dependencies with npm
$ npm install

# start the server
$ npm run start
```

2/
Launch a web browser and go http://localhost:8080

3/
Test End to End with Protractor, Jasmine framework and Selenium for Chrome only.
```
# install Selenium
# From a new term tab, launch chrome webdrivers
./node_modules/protractor/bin/webdriver-manager start

# From an other term tab, launch npm start.

# From an other term tab
npm run e2e
```

4/ Using webpack dev server with a proxy url for your API routes.
Just use /api in order to by pass with the webpack proxy.

5/ CSS
```
SASS only.
Using bootstrap alpha v4.
Using ng-bootstrap official using bootstrap v4.
Using postcss in order to postprocesses css rules.
Modals component example from home page using ng-bootstrap modules. 
```

## Components
1. [webpack-v2](https://webpack.js.org/configuration/)
2. [bootstrap-v4](https://github.com/twbs/bootstrap/tree/v4-dev)
3. [ng-bootstrap](https://github.com/ng-bootstrap/ng-bootstrap)
4. [mixgen-sass-generator](https://github.com/neo9/mixgen)
5. [ng2-slim-loading-bar](https://github.com/akserg/ng2-slim-loading-bar)
6. [ng2-translate](https://github.com/ngx-translate/core)
7. [font-awesome](https://github.com/FortAwesome/Font-Awesome)
8. [JWT](https://github.com/auth0/angular2-jwt)

For each component, you are able to check documentation and example in order to improve your starting project.

## Details
* For [JWT](https://github.com/auth0/angular2-jwt), you can easily remove it if you don't want to use it.
It is used in the **login module**
If you want keep it, you have to get an API with JWT.
[Example with Nodejs](https://github.com/auth0/node-jsonwebtoken)
* Translations: Works with json keys, values and json files, **check ./public/locales/en.json**
* **About page** is protected by AuthGuard from JWT, you can't access it whithout a valid JWT token from the login page. 
If you want to access it anyway, you just have to remove the canActivate argument from **about.module.ts**

```
const routes: Routes = [
	{ path: 'about', component: AboutComponent, canActivate: [ AuthGuard ] }
];
```

## Production
To build your application, run:

npm run build
You can now go to /dist and deploy that to your server!

{'fraction_non_alphanumeric': 0.1105858170606372, 'fraction_numerical': 0.016032887975334018, 'mean_word_length': 4.182108626198083, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 22, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3326499', 'n_tokens_mistral': 1591, 'n_tokens_neox': 1499, 'n_words': 586}