https://github.com/actionanand/ngrx-module-based
NgRx with NgModule
https://github.com/actionanand/ngrx-module-based
angular angular18 angular2 ngrx
Last synced: 5 months ago
JSON representation
NgRx with NgModule
- Host: GitHub
- URL: https://github.com/actionanand/ngrx-module-based
- Owner: actionanand
- License: mit
- Created: 2024-10-16T21:17:51.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-18T08:10:36.000Z (over 1 year ago)
- Last Synced: 2025-08-04T02:53:40.534Z (7 months ago)
- Topics: angular, angular18, angular2, ngrx
- Language: TypeScript
- Homepage: https://actionanand.github.io/ngrx-module-based/
- Size: 531 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular - NgRx with NgModule
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.3.
## Adding NgRx to Angular Project
```sh
ng add @ngrx/store
```
### Adding effects
```sh
ng add @ngrx/effects
```
### Adding @ngrx/operators
The concatLatestFrom operator has been moved from `@ngrx/effects` to `@ngrx/operators`. If you're looking for the older documentation (prior to v18), see the [v17 documentation](https://v17.ngrx.io/guide/effects/operators#concatlatestfrom).
The `concatLatestFrom` operator functions similarly to `withLatestFrom` with one important difference - it lazily evaluates the provided Observable factory.
```bash
ng add @ngrx/operators
```
## Cloning Guide
1. Clone only the remote primary HEAD (default: origin/master)
```bash
git clone --single-branch
```
2. Only specific branch
```bash
git clone --branch --single-branch []
```
```bash
git clone --branch
```
3. Cloning repositories using degit
- master branch is default.
```bash
npx degit github:user/repo#branch-name
```
4. Cloning this project with skeleton
```bash
git clone https://github.com/actionanand/ngrx-module-based.git --branch 1-skeleton angular-proj-name
```
```bash
npx degit github:actionanand/ngrx-module-based#1-skeleton angular-proj-name
```
## Automate using `Prettier`, `Es Lint` and `Husky`
1. Install the compatible node version
```bash
nvm install v20.13.1
```
2. Install and Configure Prettier
- Install prettier as below:
```bash
yarn add prettier -D
```
- Create a `.prettierrc` file and write down the format as below: - [online ref](https://prettier.io/docs/en/options.html)
```yml
trailingComma: 'all'
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
bracketSpacing: true
bracketSameLine: true
arrowParens: 'avoid'
printWidth: 120
overrides:
- files:
- '*.js'
- '*.jsx'
options:
bracketSpacing: true
jsxSingleQuote: true
semi: true
singleQuote: true
tabWidth: 2
useTabs: false
- files:
- '*.ts'
options:
tabWidth: 2
```
- Create a `.prettierignore` file and write as below(sample)
```gitignore
# Ignore artifacts:
build
coverage
e2e
node_modules
dist
dest
reports
# Ignore files
*.lock
package-lock.json
yarn.lock
```
3. Install `Es Lint`, if not installed
```bash
ng add @angular-eslint/schematics
```
if error comes, use the below command
```shell
ng add @angular-eslint/schematics@next
```
4. Configure pre-commit hooks
Pre-commit hooks are a nice way to run certain checks to ensure clean code. This can be used to format staged files if for some reason they weren’t automatically formatted during editing. [husky](https://github.com/typicode/husky) can be used to easily configure git hooks to prevent bad commits. We will use this along with [pretty-quick](https://github.com/azz/pretty-quick) to run Prettier on our changed files. Install these packages, along with [npm-run-all](https://github.com/mysticatea/npm-run-all), which will make it easier for us to run npm scripts:
```bash
yarn add husky pretty-quick npm-run-all -D
```
To configure the pre-commit hook, simply add a `precommit` npm script. We want to first run Prettier, then run TSLint on the formatted files. To make our scripts cleaner, I am using the npm-run-all package, which gives you two commands, `run-s` to run scripts in sequence, and `run-p` to run scripts in parallel:
```json
"precommit": "run-s format:fix lint",
"format:fix": "pretty-quick --staged",
"format:check": "prettier --config ./.prettierrc --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
"format:all": "prettier --config ./.prettierrc --write \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
"lint": "ng lint",
```
5. Initialize husky
- Run it once
```bash
npm pkg set scripts.prepare="husky install"
npm run prepare
```
- Add a hook
```bash
npx husky add .husky/pre-commit "yarn run precommit"
npx husky add .husky/pre-commit "yarn test"
git add .husky/pre-commit
```
- Make a commit
```bash
git commit -m "Keep calm and commit"
# `yarn run precommit and yarn test` will run every time you commit
```
6. How to skip prettier format only in particular file
1. JS
```js
matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
// prettier-ignore
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
```
2. JSX
```jsx
{/* prettier-ignore */}
```
3. HTML
```html
hello world
```
4. CSS
```css
/* prettier-ignore */
.my ugly rule
{
}
```
5. Markdown
```md
Do not format this
```
6. YAML
```yml
# prettier-ignore
key : value
hello: world
```
7. For more, please [check](https://prettier.io/docs/en/ignore.html)
## Resources
- [GitHub Actions for Angular](https://github.com/rodrigokamada/angular-github-actions)
- [Angular 16 - milestone release](https://github.com/actionanand/ng16-signal-milestone-release)
## Wiki
1. [Reading your Application State using Selectors](https://angular-training-guide.rangle.io/state-management/ngrx/reading_your_application_state_using_selectors)
2. [You should take advantage of the improved NgRx APIs](https://timdeschryver.dev/blog/you-should-take-advantage-of-the-improved-ngrx-apis#)
3. [perfect selector : Do's and Dont's - NgRx Official](https://ngrx.io/guide/eslint-plugin/rules/prefer-selector-in-select)