🌱 Angular seed project

by @Mr_w_007.

This is an Angular project seed based on Angular 12 (Updated to Angular 14).

Table of Content

• Features
• Prerequisites
• Installation
• Getting Started
• Starting the development server
• Building the Project
• Testing
• Code scaffolding
• NgRx
• Documentation
• Further help

🌟 Features

• Dockerized project.
• NgRx Architecture.
• Angular Material.
• Bootstrap CSS.
• Fontawsome Icons.
• Dynamic theming.
• Documentation generation using Compodoc.

⚡ Prerequisites

The project is intended to be developed in a docker environment, so it is recommended to install version 20 or higher Docker version.

The dockerized project have dependencies that require Node 14, NPM 6 or higher NodeJS version.

🚧 Installation

Before you install: Please read the prerequisites

Clone the project to working directory

git clone https://github.com/mrw007/angular-seed-project.git
cd angular-seed-project

🚀 Getting Started

Creating the development environment

sh entrypoint create-env-dev

Getting into the docker container

To access the running container

• If you are using Windows

sh entrypoint start

• If you are using Linux

sh entrypoint start-linux

🏃‍♂️ Starting the development server

The development server is mapped automatically via the docker container networking publishing the server app by default on localhost:8080.

The app will automatically reload if you change any of the source files. Just run

npm start

inside the running container.

🔨 Building the Project

Run

npm run build

to build the project loacally. The build artifacts will be stored in the dist/ directory.

🧪 Testing

Running unit tests

Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes

ng test

Following the test result is ensured in the generated reports file.

Running end-to-end tests

Run

ng e2e

to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

🏗 Code scaffolding

You can use the ng generate (or just ng g) command to generate Angular components: You can find all possible blueprints in the table below:

| Scaffold | Usage | | | | | Component | ng g component my-new-component | | Directive | ng g directive my-new-directive | | Pipe | ng g pipe my-new-pipe | | Service | ng g service my-new-service | | Class | ng g class my-new-class | | Guard | ng g guard my-new-guard | | Interface | ng g interface my-new-interface | | Enum | ng g enum my-new-enum | | Module | ng g module my-module |

angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow this steps:

1. ng g module new-module to create a new module
2. call ng g component new-module/new-component This should add the new component, directive or pipe reference to the new-module you've created.

🔄 NgRx

What is NgRx? 🤔

NgRx is a framework for building reactive applications in Angular. NgRx provides libraries for:

• Managing global and local state.
• Isolation of side effects to promote a cleaner component architecture.
• Entity collection management.
• Integration with the Angular Router.
• Developer tooling that enhances developer experience when building many different types of applications.

Installed Packages 📦

• @ngrx/store - including reducers, actions, selectors
• @ngrx/effects - for implementation of side effects like http requests, logging, notifications,...
• @ngrx/entity - for CRUD operations
• @ngrx/router-store - to connect the Angular Router to @ngrx/store
• @ngrx/store-devtools - to enable a powerful time-travelling debugger.

Further help 📚

To get more help about Ngrx, check out NgRx's official documentation website.

📖 Documentation

You can generate the Project's documentation with compodoc using the following command, inside the running container

npm run compodoc

🆘 Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.