Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicolasroehm/angular-boilerplate
Angular 18 - Bootstrap 5 boilerplate
https://github.com/nicolasroehm/angular-boilerplate
angular-18 boilerplate bootstrap-5
Last synced: about 1 month ago
JSON representation
Angular 18 - Bootstrap 5 boilerplate
- Host: GitHub
- URL: https://github.com/nicolasroehm/angular-boilerplate
- Owner: NicolasRoehm
- Created: 2022-04-27T06:47:48.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-19T11:02:30.000Z (5 months ago)
- Last Synced: 2024-10-11T06:42:41.939Z (about 1 month ago)
- Topics: angular-18, boilerplate, bootstrap-5
- Language: TypeScript
- Homepage:
- Size: 1.34 MB
- Stars: 43
- Watchers: 4
- Forks: 32
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ▶️ EasyAngular
Welcome to the EasyAngular boilerplate! This project is designed to help you quickly start a new **Angular 18** project with **Bootstrap 5** and various useful libraries. It comes with pre-coded elements to streamline your development process.
## Getting started
### Prerequisites
Make sure you have the following installed :
- [Node.js](https://nodejs.org/) (version 20)
- [Angular CLI](https://angular.dev/) (version 18) using `npm install -g @angular/cli`
### Installation
Clone the repository :
```sh
git clone https://github.com/NicolasRoehm/angular-boilerplate.git
cd angular-boilerplate
npm install
```
### ✒️ Usage
- Rename `EasyAngular` and `easy-angular` with your project name
- Place favicon generated with [RealFavIconGenerator](https://realfavicongenerator.net/) into `src/assets/img/favicon` folder
### Development server
Run the following command for a development server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
```sh
ng-serve
```
## Boilerplate content
### 🗂️ Source code structure
-
Pages
- Auth (login, forgot password, validate account) with 2 possible layouts
- Home
- 404
-
Shared components
- Blocks : toast & progress bar
- Forms : confirm
- Layouts : page & header
- Modals : wrapper
-
Enums : endpoints / environments / storage keys -
Helpers : storage / string -
Services : app (for requests) / store (for state management using signals) -
i18n : en.json (for internationalization)
### 🌐 Included packages
- [Bootstrap 5](https://getbootstrap.com/) : SCSS style & [ng-bootstrap](https://ng-bootstrap.github.io/) components
- [Axios](https://github.com/axios/axios) : HTTP client
- [ArrayTyper](https://github.com/FranzStrudel/-caliatys-array-typer) : Utility for type-safe array operations
- [angular-svg-icon](https://github.com/czeckd/angular-svg-icon) : SVG icon support
- [ngx-translate](https://github.com/ngx-translate/core) : Internationalization library
## 🛠️ Tools
- Generate models from JSON - https://app.quicktype.io/
- Generate favicon from SVG - https://realfavicongenerator.net/
## Angular CLI commands
### Code scaffolding
Generate a new component :
```sh
ng generate component component-name
```
You can also use `ng generate` for directives, pipes, services, classes, guards, interfaces, enums, and modules.
### Build
Build the project :
```sh
ng build
```
The build artifacts will be stored in the `dist/` directory.
### Running tests
#### Unit tests
Run unit tests via Karma :
```sh
ng test
```
#### End-to-End tests
Run end-to-end tests via a platform of your choice. You need to add a package that implements end-to-end testing capabilities :
```sh
ng e2e
```
## Further help
To get more help on the Angular CLI, use `ng help` or visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.