项目作者: leolanese

项目描述 :
Angular8 Seed
高级语言: TypeScript
项目地址: git://github.com/leolanese/Angular8-seed.git
创建时间: 2019-11-19T21:51:50Z
项目社区:https://github.com/leolanese/Angular8-seed

开源协议:

下载


Angular8-seed

Angular seed for advanced projects.

  1. _ _ ____ _ ___
  2. / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
  3. / ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
  4. / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
  5. /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
  6. |___/
  7. Angular CLI: 8.3.19
  8. Node: 10.16.3
  9. OS: win32 x64
  10. Angular: 8.2.14
  11. ... animations, common, compiler, compiler-cli, core, forms
  12. ... language-service, platform-browser, platform-browser-dynamic
  13. ... router
  14. Package Version
  15. -----------------------------------------------------------
  16. @angular-devkit/architect 0.803.19
  17. @angular-devkit/build-angular 0.803.19
  18. @angular-devkit/build-optimizer 0.803.19
  19. @angular-devkit/build-webpack 0.803.19
  20. @angular-devkit/core 8.3.19
  21. @angular-devkit/schematics 8.3.19
  22. @angular/cdk 8.2.3
  23. @angular/cli 8.3.19
  24. @angular/material 8.2.3
  25. @ngtools/webpack 8.3.19
  26. @schematics/angular 8.3.19
  27. @schematics/update 0.803.19
  28. rxjs 6.5.3
  29. typescript 3.7.2
  30. webpack 4.39.2

Note:

~version: “Approximately equivalent to version”, will update you to the next patch version.


^version: Will update you to the next minor version. This could affect Jenkins version deployments based on the OS


Tooling build

tooling /ˈtuːlɪŋ/ - assorted tools, especially ones required for a mechanized process.

Redux

@ngrx dependencies

  1. npm i @ngrx/store @ngrx/effects @ngrx/entity @ngrx/data @ngrx/schematics @ngrx/store-devtools @ngrx/router-store --save
  1. "devDependencies": {
  2. "@ngrx/data": "^8.5.2",
  3. "@ngrx/effects": "^8.5.2",
  4. "@ngrx/entity": "^8.5.2",
  5. "@ngrx/router-store": "^8.5.1",
  6. "@ngrx/store": "^8.5.2",
  7. "@ngrx/store-devtools": "^8.5.2",
  8. }

@ngrx devDependencies

  1. npm i @ngrx/schematics --save-dev
  1. "devDependencies": {
  2. "@ngrx/schematics": "^8.5.2",
  3. }

@ngrx/schematics extra step:

Update: angular.json > cli > defaultCollection with @ngrx/schematics

  1. "cli": {
  2. "defaultCollection": "@ngrx/schematics"
  3. }

Further information:
https://ngrx.io/guide/schematics/install


Code standarts

Prettier

  • Include Prettier (this can be handle by the pipeline later on):
    1. npm install --save-dev --save-exact prettier
  • Include a Service with a Component already declared:
    1. cd test-app/src/app
    2. mkdir service
    3. ng g s service
  • Include a reference to empty side defined boxes

bootstrap 4

  • Include modular bootstrap 4
    1. npm install bootstrap --save
    2. open angular.json
    3. "styles": [
    4. "src/styles.css",
    5. "node_modules/bootstrap/dist/css/bootstrap.min.css"
    6. ],

Unit-Test tooling

ngMocks (to mock Angular in general)

We are going to use: MockStore from ‘@ngrx/store/testing’ so we later we can set the state using the setState method from MockStore.

ngMocks will help us to mock:
MockComponent, MockDirective, MockPipe, MockModule, etc.

Helper function for creating angular mocks for test.
ng-mocks+

MockStore (mocked Store out of the box)

We don’t import the real Store with reducers into your TestBed. We will be using mockStore, ngrx7+ provides a mocked Store out of the box. Instead of manually mocking the Store (famouse reported buggy issues) we simply use provideMockStore in your TestBed, with/without overrideSelector to mocking the store state.

  1. import { MockStore, provideMockStore } from '@ngrx/store/testing';
  2. describe('Should Component test values', () => {
  3. providers: [
  4. ...
  5. provideMockStore({
  6. initialState: {
  7. details: {
  8. isLoading: true,
  9. policy: null
  10. }
  11. }
  12. })
  13. ...
  14. ]

1- We’re substituting the real Store with a MockStore and providing it an initial state. Now we can test how the component behaves in various states simply by calling setState() on our MockStore.

2- We are spying on: store.dispatch() so we can verify that the component dispatches the Action.

Further information:

https://ngrx.io/api/store/testing/MockStore

ng-bullet (speeding up unit-test)

Bullet is a library which enhances your unit testing experience with Angular TestBed, greatly increasing execution speed of your tests.

Furhter information:

ng-bullet npm

json-server (mocking restApi)

Mocking the REST API

  1. $ cd ~/Angular8-seed
  2. $ npm i --save json-server
  3. $ mkdir server
  4. $ cd server
  1. // this will avoid any error
  2. {
  3. "something": []
  4. }
  1. // run the REST API server
  2. npm run server

This JSON file will act as a database for your REST API server. You can simply add some data to be served by your REST API or use
Faker.js for automatically generating massive amounts of realistic fake data.

faker (fake data all over)

Tool to generate massive amounts of fake data in the browser, very handy to mock day just knowing the Interface/Model.

There is already a file: generateFake.js inside /server

  1. $ cd ..
  2. $ npm install faker --save
  3. $ npm run generateFake
  1. // run the REST API server
  2. npm run server

-You can now send HTTP requests to the server just like any other REST API server request.

-Your server will be available at: http://localhost:3000/

Further faker information:

facker npm


UI

Angular Material

Angular CLI’s install schematic

Creates toolbar and navigation components

  1. ng generate @angular/material:material-nav --name myNav

// Creates toolbar and navigation components

  1. ng generate @angular/material:material-nav --name myNav

Create a dashboard component

  1. ng generate @angular/material:material-dashboard --name myDashboard

Creates a table component

  1. ng generate @angular/material:material-table --name myTable

Adds Angular Material to an application without changing any templates

  1. ng generate @angular/material:material-shell --name myShell

Creates a address form component

  1. ng generate @angular/material:address-form --name myAddressForm

Further Information:
material componentes

Bootstrap 4+

Do not import all Modules, Just Include what you need:

Bootstrap Reboot:

  1. @import "~bootstrap/scss/reboot"; // add reset reboot scss

Bootstrap Grid:
Both Bootstrap and Angular Material Design delivers solutions based on a grid system. They are both quite similar although Bootstrap’s grid is more advanced.

  1. @import "~bootstrap/scss/grid"; // add the grid

Bootstrap Utilities:

  1. @import "~bootstrap/scss/utilities"; // add css utilities

File angular.json has included “Bootstrap CSS” and JS files as well as “jQuery” to the styles and scripts arrays under the build target:

  1. "architect": {
  2. "build": {
  3. [...],
  4. "styles": [
  5. "src/styles.css",
  6. "node_modules/bootstrap/dist/css/bootstrap.min.css"
  7. ],
  8. "scripts": [
  9. "node_modules/jquery/dist/jquery.min.js",
  10. "node_modules/bootstrap/dist/js/bootstrap.min.js"
  11. ]
  12. },

font-Awesome: @angular-fontawesome

Dependencies:

  1. "@fortawesome/angular-fontawesome": "^0.5.0",
  2. "@fortawesome/fontawesome-svg-core": "^1.2.25",
  3. "@fortawesome/free-solid-svg-icons": "^5.11.2",

Include fontawesome:

  1. <div style="text-align:center">
  2. <fa-icon [icon]="faCoffee"></fa-icon>
  3. </div>

Further information:
@fortawesome/angular-fontawesome"">https://www.npmjs.com/package/@fortawesome/angular-fontawesome
https://fontawesome.com/how-to-use/with-the-api/setup/importing-icons
https://github.com/FortAwesome/angular-fontawesome/blob/be99071851eea2c6d3211b9c3de38aca44a5b624/docs/usage/features.md#basic-use

Storybook

Mocking UI faster (OPTIONAL - Not install be default)

  1. npm i @babel/core @babel-loader --save-dev
  2. npm i @storybook/angular --save-dev

Add a npm script:

  1. {
  2. "scripts": {
  3. "storybook": "start-storybook"
  4. }
  5. }
  1. "@storybook/addon-actions": "^5.2.6",
  2. "@storybook/addon-knobs": "^5.2.4",
  3. "@storybook/addon-links": "^5.2.4",
  4. "@storybook/addon-notes": "^5.2.4",
  5. "@storybook/addons": "^5.2.4",
  6. "@storybook/angular": "^5.2.6",

Run

  1. npm run storybook

Further information:

Storybook for Angular

Extra (pre-configurated) dependencies:

Husky, prettier, tslint-config-prettier, codelyzer, ng-bullet, @compodoc/compodoc and few others


Development server

  1. ng serve -o

Code scaffolding

  1. ng generate component component-name

to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module

Using ngrx schematics:

  1. ng generate action ActionName

to generate a new component. You can also use ng generate action|reducer|container|effect|entity featureName

Further information:

https://ngrx.io/guide/schematics


Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.


TestApp

This project was generated with Angular CLI version 6.2.3.

Development server

  1. ng serve -o
  1. i 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
  2. i 「wds」: webpack output is served from /
  3. i 「wds」: 404s will fallback to //index.html

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

  1. ng build --configuration <config>

Every file will be loaded depending on the build option:

Example:

  1. ng build
  2. ng build --prod
  3. ng build -c staging

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.


{ ‘Leo Lanese’,

‘Building Inspiring Responsive Reactive Solutions’,

‘London, UK’ }


Portfolio
http://www.leolanese.com

Twitter:
twitter.com/LeoLaneseltd

Questions / Suggestion / Recommendation ?
developer@leolanese.com

DEV.to:
www.dev.to/leolanese

Blog:
leolanese.com/blog