A readme describing the technology and guidelines for angular projects

angular-project-readme.md

Angular Project Readme v1.0

This readme is read-only. Do not change.

This document is intended for the project manager to help guide initial project setup. This document is intended for developers who want to understand the core tooling used for this project.

All code documentation should be written inline using JSDoc syntax.

Developer Information

Environment Setup

1. Install plugins for your IDE to work with these tools
   • EditorConfig
   • TSlint / ESlint
   • Typescript
   • JSDoc (optional)
2. Ensure you have the angular cli installed npm i g @angular/cli
3. After pulling the code, run npm install

Commands and Flow

Storybook - npm run storybook to develop components

Code Generation - ng [command] to generate code templates. Use ng [command] --help to see available options

Developing - ng serve --open to run the project locally

Project Manager Information

Tooling Setup

These tools will be added to the core angular project along with any other tools included by the Angular CLI. Any developer may add extra tooling. However, all tools outlined here must be integrated into the project.

EditorConfig

What is this? - Setting up an .editorconfig file helps maintain code format consistency between different IDEs and developers

Objective - Create an .editorconfig file

Installation

1. Create an .editorconfig file in the project root.
2. Ensure the file contains this config

Linter

What is this? - A linter ensures code styles are consistent and helps prevent developers writing bad code

Objective - Implement a system where the developers are notified when their code is written badly

Installation

1. In the project root run npm install tslint tslint-config-airbnb tslint-microsoft-contrib --save-dev
2. Create a tslint.json and tslint.microsoft.json file in the root of the project
3. Ensure the files contain this config
4. If the project already has a tslint config file, rename it then add it to the beginning of the extends array in tslint.json

Absolute Pathing

What is this? - Absolute pathing means to access a file without using '../'. Our linter will throw an error if we don't

Objective - To access a file in a parent folder by pathing from the root ('app/app.module.ts' instead of '../app.module.ts')

Installation

1. Add "baseUrl": "./src/app", "paths": { "*": ["../*"] } properties to the root tsconfig "compilerOptions" object

Storybook

What is this? - Storybook is a front end tool allowing developers to develop web components in isolation

Objective - Allow developers to open a browser window and write components independently

Installation

1. Follow storybook's installation guide