The ngrx-data library makes it easier to write an Angular application that manages entity data with ngrx in a "reactive" style, following the redux pattern.

If you're following the redux pattern and managing entity data with ngrx, the ngrx-data library can significantly reduce the amount of code you have to write.

Many applications have substantial domain models with 10s or 100s of entity types.

To create, retrieve, update, and delete (CRUD) all of these entities with vanilla ngrx is an overwhelming task. You're writing actions, action-creators, reducers, effects, dispatchers, and selectors as well as the HTTP GET, PUT, POST, and DELETE methods for each entity type.

In even a small model, this is a ton of repetitive code to create, maintain, and test.

The ngrx-data library is one way to stay on the ngrx path while radically reducing the "boilerplate" necessary to manage entities with ngrx.

The "Introduction to ngrx-data" guide offers a quick overview.

The "Overview" page links to more in-depth documentation.

This repository contains the ngrx-data source code and a demonstration application (the "demo app") that exercises many of the library features.

The key folders in this repo are:

• docs --> the docs for the library and the demo
• lib ---> the ngrx-data library source code that we publish to npm
• src/client ---> the demo app source
• src/server ---> a node server for remote data access

The demo app is based on the Angular CLI. You may want to install the CLI globally if you have not already done so.

npm install -g @angular/cli

Then follow these steps:

(1) Clone this repository

git clone https://github.com/johnpapa/angular-ngrx-data.git
cd angular-ngrx-data

(2) Install the npm packages

npm install

(3) Build the ngrx-data library

npm run build-setup

(4) Serve the CLI-based demo app

ng serve -o

Run npm start if you have not installed the Angular CLI globally.

The ngrx-data library ships with unit tests to validate functionality and guard against regressions.

These tests also demonstrate features of the library that are not covered in the demo app. They're worth reading to discover more advanced techniques.

Run this CLI command to execute the tests for the library.

ng test

Run npm test if you have not installed the Angular CLI globally.

We welcome PRs that add to the tests as well as those that fix bugs and documentation.

Be sure to run these tests before submitting a PR for review.

The demo app is configured for monitoring with the Redux DevTools.

Follow these instructions to install them in your browser and learn how to use them.

When running tests, open the browser dev tools, go to the "Sources" tab, and look for the library files by name.

In chrome, type [Command-P] and letters of the file name.

When running the app (e.g., with ng serve), the browser dev tools give you TWO choices for a given TypeScript source file, both claiming to be from .ts.

The one you want for library and app files ends in /lib/src/file-name.ts and /src/client/app/path/file-name.ts respectively.

Hope to solve the two file problem.

The demo app is setup to build and run against the version of the library in dist/ngrx-data.

That's convenient when you're evolving the library code and re-building as you go with npm run build-lib or npm run build-setup.

The version in dist/ngrx-data will reflect your latest changes. Obviously the package deployed in node_modules would not.

If you want to see how the demo app runs against the published package, you'll have to make a few temporary changes to the TypeScript configuration.

1. Remove the following from src/tsconfig.json so that the IDE (e.g., VS Code) looks for ngrx-data in node_modules/ngrx-data instead of src/lib.

  "paths": {
    "ngrx-data": ["../lib/src"]
  },

2. Remove that same setting from the src/client/tsconfig.app.json. Now ng build references node_modules/ngrx-data instead of src/lib when it builds the demo app.

Now install the ngrx-data package without touching the package.json as follows:

npm install ngrx-data --no-save --no-lock

Remember to restore the tsconfig settings when you're done. Do not commit those changes!

The demo app queries and saves mock entity data to an in-memory database with the help of the Angular In-memory Web API.

The "Remote Data" toggle switch in the header switches to the remote database.

The app fails when you switch to the remote database.

Notice how the app detects errors and pops up a toast message with the failed ngrx Action.type.

The error details are in the browser's console log.

You must first set up a database and launch a web api server that talks to it.

The src/server folder has code for a local node web api server, configured for the demo app.

TODO:

• Explain how to build and run the server.
• Explain how to build and serve the mongo db

We know there are a great many npm script commands in package.json, many (most?) of which don't work.

They're on our list for future cleanup. Please don't create issues for them (although PRs that fix them are welcome).

Open an issue here