Skip to content

Angular project setup guide

Jump to bottom
Matěj Chalk edited this page Sep 9, 2020 · 3 revisions

Prerequisites

Creating a new Angular project

  1. Pick a project name (typically same as repository name, e.g. flowup-web) and short vendor prefix (e.g. fu).
  2. Run npx ng new <project-name> --prefix=<prefix> --routing --strict --style=scss.
    • These flags set a selector prefix, include routing setup, set strict TypeScript compilation flags, and set up SCSS instead of CSS (see CLI reference for all available options).
    • You can leave out npx in the above command if you've installed the Angular CLI globally, but first make sure it's up-to-date with npm i -g @angular/cli@latest (use sudo prefix on Unix systems).
  3. Verify setup by starting local development server with ng serve (or npm start) and visit http://localhost:4200/ in a browser.
  4. Optionally, you may also verify production build by running ng build --prod and then previewing resulting bundle via npx lite-server --baseDir=dist/<project-name>.

Next steps

The following recommendations may not apply to all projects, so discuss with your teammates first if they're appropriate for your needs.

Styles

  • Modify styles.scss to include the following CSS reset.
  • In order to import SCSS variables without using relative paths (e.g. import 'variables' instead of import '../../../variables'), pick a styles directory (e.g. src or src/styles) and run ng config projects.<project-name>.architect.build.options.stylePreprocessorOptions.includePaths[0] <styles-directory> (or modify angular.json directly by adding "stylePreprocessorOptions": { "includePaths": ["<styles-directory>"] }). If you then create a file named _variables.scss in the chosen directory, it may be imported as described above.

Schematics

  • To optimize for performance, it is recommended to use the OnPush change detection strategy. Modify your existing components by adding changeDetection: ChangeDetectionStrategy.OnPush to their @Component decorator and ensure all generated components include it by default via ng config projects.<project-name>.schematics.@schematics/angular:component.changeDetection OnPush (or modifying angular.json directly).
  • Feel free to customize schematics further based on your preferences (e.g. avoid generating component .spec.ts files by setting ng config projects.<project-name>.schematics.@schematics/angular:component.skipTests true). Look up angular.json schema for all available options.

Linters

TSLint

  • The Angular CLI already integrates TSLint (with the Angular-specific codelyzer plugin and a default set of rules).
  • In order to customize the lint rules according to our recommendations, perform the following steps:
    • install the tslint-immutable rules preset with npm i -D tslint-immutable,
    • install the rxjs-tslint plugin with npm i -D rxjs-tslint,
    • copy the company standard tslint.json file (feel free to suggest changes here 🙂) and replace occurences of "fu" with your own prefix,
    • fix (or explicitly ignore) errors that may be reported by ng lint (e.g. add // tslint:disable-next-line:no-import-side-effect before Zone.js imports).

Stylelint

  • If your team wants to lint stylesheets, you can integrate stylelint by:
    • installing the package via npm i -D stylelint,
    • copying the company standard .stylelintrc.json file (feel free to suggest changes here 🙂),
    • adding the following script to your package.json: "stylelint": "stylelint \"src/**/*.scss\"".

Formatting

In order to automate code formatting using Prettier, follow steps from our guide.

Unit tests

If your team wishes to write unit tests, we recommend Jest over Karma & Jasmine. This article provides instructions on migrating to Jest (you'll probably also want to set esModuleInterop and allowJs flags in compilerOptions in your tsconfig.spec.json).

Git hooks

To trigger commands to run on (and potentially block) specific Git operations (e.g. commit, push), you may integrate Husky. See our guide for an example setup, but discuss which options actually make sense for your team. Common tasks include running linters, tests, formatters or code generators.

Adding libraries

Here are instructions on setting up some common libraries that you may wish integrate in your project using the Angular CLI.

NgRx

ng add @ngrx/store@latest
ng add @ngrx/store-devtools
ng add @ngrx/effects

AngularFire

ng add @angular/fire

Angular Material

ng add @angular/material

Apollo Angular

ng add apollo-angular
Clone this wiki locally