diff --git a/projects/ngrx.io/content/guide/effects/index.md b/projects/ngrx.io/content/guide/effects/index.md
index fbab949768..017a50c321 100644
--- a/projects/ngrx.io/content/guide/effects/index.md
+++ b/projects/ngrx.io/content/guide/effects/index.md
@@ -13,15 +13,9 @@ In a service-based Angular application, components are responsible for interacti
- Effects filter those actions based which action they are interested in using an operator.
- Effects perform tasks, whether synchronous or asynchronous and return a new action.
-## Installation
+## Installation
-```sh
-npm install @ngrx/effects --save
-```
-
-```sh
-yarn add @ngrx/effects
-```
+Detailed installation instructions can be found on the [Installation](guide/effects/install) page.
## Comparison with component-based side effects
diff --git a/projects/ngrx.io/content/guide/effects/install.md b/projects/ngrx.io/content/guide/effects/install.md
new file mode 100644
index 0000000000..8a2b76b88e
--- /dev/null
+++ b/projects/ngrx.io/content/guide/effects/install.md
@@ -0,0 +1,42 @@
+# Installation
+
+## Installing with `npm`
+
+For more information on using `npm` check out the docs here.
+
+```sh
+npm install @ngrx/effects --save
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs here.
+
+```sh
+yarn add @ngrx/effects
+```
+
+## Installing with `ng add`
+
+If your project is using the Angular CLI 6+ then you can install the Effects to your project with the following `ng add` command (details here):
+
+```sh
+ng add @ngrx/effects
+```
+### Optional `ng add` flags
+
+* path - path to the module that you wish to add the import for the `EffectsModule` to.
+* flat - Indicate if a directoy is to be created to hold your effects file
+* spec - Specifies if a spec file is generated.
+* project - name of the project defined in your `angular.json` to help locating the module to add the `EffectsModule` to.
+* module - name of file containing the module that you wish to add the import for the `EffectsModule` to. Can also include the relative path to the file. For example, `src/app/app.module.ts`
+* group - Group effects file within `effects` folder
+
+This command will automate the following steps:
+
+1. Update `package.json` > `dependencies` with `@ngrx/effects`.
+2. Run `npm install` to install those dependencies.
+3. By default will create a `src/app/app.effects.ts` file with an empty `AppEffects` class that has the `actions$: Actions` observable injected into it. If group flag is set to true then this file will be created under an `effects` folder.
+4. Create a `src/app/app.effects.spec.ts` spec file with a basic unit test. If group flag is set to true then this file will be created under an `effects` folder.
+5. Update your `src/app/app.module.ts` > `imports` array with `EffectsModule.forRoot([AppEffects])`. If you provided flags then the command will attempt to locate and update module found by the flags.
+
diff --git a/projects/ngrx.io/content/guide/entity/index.md b/projects/ngrx.io/content/guide/entity/index.md
index d4f1923c89..550a25750c 100644
--- a/projects/ngrx.io/content/guide/entity/index.md
+++ b/projects/ngrx.io/content/guide/entity/index.md
@@ -8,12 +8,6 @@ Entity provides an API to manipulate and query entity collections.
- Provides performant CRUD operations for managing entity collections.
- Extensible type-safe adapters for selecting entity information.
-### Installation
+## Installation
-```sh
-npm install @ngrx/entity --save
-```
-
-```sh
-yarn add @ngrx/entity
-```
+Detailed installation instructions can be found on the [Installation](guide/entity/install) page.
diff --git a/projects/ngrx.io/content/guide/entity/install.md b/projects/ngrx.io/content/guide/entity/install.md
new file mode 100644
index 0000000000..f98636a6bc
--- /dev/null
+++ b/projects/ngrx.io/content/guide/entity/install.md
@@ -0,0 +1,31 @@
+# Installation
+
+## Installing with `npm`
+
+For more information on using `npm` check out the docs here.
+
+```sh
+npm install @ngrx/entity --save
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs here.
+
+```sh
+yarn add @ngrx/entity
+```
+
+## Installing with `ng add`
+
+If your project is using the Angular CLI 6+ then you can install the Entity to your project with the following `ng add` command (details here):
+
+```sh
+ng add @ngrx/entity
+```
+
+This command will automate the following steps:
+
+1. Update `package.json` > `dependencies` with `@ngrx/entity`.
+2. Run `npm install` to install those dependencies.
+
diff --git a/projects/ngrx.io/content/guide/router-store/index.md b/projects/ngrx.io/content/guide/router-store/index.md
index d14a578e63..23a06247be 100644
--- a/projects/ngrx.io/content/guide/router-store/index.md
+++ b/projects/ngrx.io/content/guide/router-store/index.md
@@ -2,15 +2,9 @@
Bindings to connect the Angular Router with [Store](guide/store). During each router navigation cycle, multiple [actions](guide/router-store/actions) are dispatched that allow you to listen for changes in the router's state. You can then select data from the state of the router to provide additional information to your application.
-### Installation
+## Installation
-```sh
-npm install @ngrx/router-store --save
-```
-
-```sh
-yarn add @ngrx/router-store
-```
+Detailed installation instructions can be found on the [Installation](guide/router-store/install) page.
## Setup
@@ -33,4 +27,4 @@ import { AppComponent } from './app.component';
bootstrap: [AppComponent],
})
export class AppModule {}
-
\ No newline at end of file
+
diff --git a/projects/ngrx.io/content/guide/router-store/install.md b/projects/ngrx.io/content/guide/router-store/install.md
new file mode 100644
index 0000000000..2366a15d9c
--- /dev/null
+++ b/projects/ngrx.io/content/guide/router-store/install.md
@@ -0,0 +1,38 @@
+# Installation
+
+## Installing with `npm`
+
+For more information on using `npm` check out the docs here.
+
+```sh
+npm install @ngrx/router-store --save
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs here.
+
+```sh
+yarn add @ngrx/router-store
+```
+
+## Installing with `ng add`
+
+If your project is using the Angular CLI 6+ then you can install the Router Store to your project with the following `ng add` command (details here):
+
+```sh
+ng add @ngrx/router-store
+```
+
+### Optional `ng add` flags
+
+* path - path to the module that you wish to add the import for the `StoreRouterConnectingModule` to.
+* project - name of the project defined in your `angular.json` to help locating the module to add the `StoreRouterConnectingModule` to.
+* module - name of file containing the module that you wish to add the import for the `StoreRouterConnectingModule` to. Can also include the relative path to the file. For example, `src/app/app.module.ts`;
+
+This command will automate the following steps:
+
+1. Update `package.json` > `dependencies` with `@ngrx/router-store`.
+2. Run `npm install` to install those dependencies.
+3. By default, will update `src/app/app.module.ts` > `imports` array with `StoreRouterConnectingModule.forRoot()`. If you provided flags then the command will attempt to locate and update module found by the flags.
+
diff --git a/projects/ngrx.io/content/guide/schematics/index.md b/projects/ngrx.io/content/guide/schematics/index.md
index b81582ee39..d8e8e55744 100644
--- a/projects/ngrx.io/content/guide/schematics/index.md
+++ b/projects/ngrx.io/content/guide/schematics/index.md
@@ -4,17 +4,9 @@ Scaffolding library for Angular applications using NgRx libraries.
Schematics provides Angular CLI commands for generating files when building new NgRx feature areas and expanding existing ones. Built on top of [`Schematics`](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2), this tool integrates with the [`Angular CLI`](https://cli.angular.io/).
-## Installation
+## Installation
-Install @ngrx/schematics from npm:
-
-```sh
-npm install @ngrx/schematics --save-dev
-```
-
-```sh
-yarn add @ngrx/schematics --dev
-```
+Detailed installation instructions can be found on the [Installation](guide/schematics/install) page.
## Dependencies
diff --git a/projects/ngrx.io/content/guide/schematics/install.md b/projects/ngrx.io/content/guide/schematics/install.md
new file mode 100644
index 0000000000..5bd61f7ea6
--- /dev/null
+++ b/projects/ngrx.io/content/guide/schematics/install.md
@@ -0,0 +1,17 @@
+# Installation
+
+## Installing with `npm`
+
+For more information on using `npm` check out the docs here.
+
+```sh
+npm install @ngrx/schematics --save-dev
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs here.
+
+```sh
+yarn add @ngrx/schematics --dev
+```
diff --git a/projects/ngrx.io/content/guide/store-devtools/index.md b/projects/ngrx.io/content/guide/store-devtools/index.md
index c7155ea631..1bd275db04 100644
--- a/projects/ngrx.io/content/guide/store-devtools/index.md
+++ b/projects/ngrx.io/content/guide/store-devtools/index.md
@@ -2,15 +2,9 @@
Store Devtools provides developer tools and instrumentation for [Store](guide/store).
-## Installation
+## Installation
-```sh
-npm install @ngrx/store-devtools --save
-```
-
-```sh
-yarn add @ngrx/store-devtools
-```
+Detailed installation instructions can be found on the [Installation](guide/store-devtools/install) page.
## Setup
diff --git a/projects/ngrx.io/content/guide/store-devtools/install.md b/projects/ngrx.io/content/guide/store-devtools/install.md
new file mode 100644
index 0000000000..3aaf5655a4
--- /dev/null
+++ b/projects/ngrx.io/content/guide/store-devtools/install.md
@@ -0,0 +1,37 @@
+# Installation
+
+## Installing with `npm`
+
+For more information on using `npm` check out the docs here.
+
+```sh
+npm install @ngrx/store-devtools --save
+```
+
+## Installing with `yarn`
+For more information on using `yarn` check out the docs here.
+
+```sh
+yarn add @ngrx/store-devtools
+```
+
+## Installing with `ng add`
+
+If your project is using the Angular CLI 6+ then you can install the Store Devtools to your project with the following `ng add` command (details here):
+
+```sh
+ng add @ngrx/store-devtools
+```
+
+### Optional `ng add` flags
+
+* path - path to the module that you wish to add the import for the `StoreDevtoolsModule` to.
+* project - name of the project defined in your `angular.json` to help locating the module to add the `StoreDevtoolsModule` to.
+* module - name of file containing the module that you wish to add the import for the `StoreDevtoolsModule` to. Can also include the relative path to the file. For example, `src/app/app.module.ts`;
+* maxAge - number (>1) | 0 - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. 0 is infinite. Default is 25 for performance reasons.
+
+This command will automate the following steps:
+
+1. Update `package.json` > `dependencies` with `@ngrx/store-devtools`.
+2. Run `npm install` to install those dependencies.
+3. Update your `src/app.module.ts` > `imports` array with `StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })`. The maxAge property will be set to the flag `maxAge` if provided.
diff --git a/projects/ngrx.io/content/guide/store/index.md b/projects/ngrx.io/content/guide/store/index.md
index 9de35d654b..3f67835df6 100644
--- a/projects/ngrx.io/content/guide/store/index.md
+++ b/projects/ngrx.io/content/guide/store/index.md
@@ -9,15 +9,9 @@ Store is RxJS powered state management for Angular applications, inspired by Red
- [Selectors](guide/store/selectors) are pure functions used to select, derive and compose pieces of state.
- State accessed with the `Store`, an observable of state and an observer of actions.
-## Installation
+## Installation
-```sh
-npm install @ngrx/store --save
-```
-
-```sh
-yarn add @ngrx/store
-```
+Detailed installation instructions can be found on the [Installation](guide/store/install) page.
## Tutorial
diff --git a/projects/ngrx.io/content/guide/store/install.md b/projects/ngrx.io/content/guide/store/install.md
new file mode 100644
index 0000000000..3db66bd37d
--- /dev/null
+++ b/projects/ngrx.io/content/guide/store/install.md
@@ -0,0 +1,41 @@
+# Installation
+
+## Installing with `npm`
+
+For more information on using `npm` check out the docs here.
+
+```sh
+npm install @ngrx/store --save
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs here.
+
+```sh
+yarn add @ngrx/store
+```
+
+## Installing with `ng add`
+
+If your project is using the Angular CLI 6+ then you can install the Store to your project with the following `ng add` command (details here):
+
+```sh
+ng add @ngrx/store
+```
+
+### Optional `ng add` flags
+
+* path - path to the module that you wish to add the import for the `StoreModule` to.
+* project - name of the project defined in your `angular.json` to help locating the module to add the `StoreModule` to.
+* module - name of file containing the module that you wish to add the import for the `StoreModule` to. Can also include the relative path to the file. For example, `src/app/app.module.ts`;
+* statePath - The file path to create the state in. By default, this is `reducers`.
+* stateInterface - The type literal of the defined interface for the state. By default, this is `State`.
+
+This command will automate the following steps:
+
+1. Update `package.json` > `dependencies` with `@ngrx/store`.
+2. Run `npm install` to install those dependencies.
+3. Create a `src/app/reducers` folder, unless the `statePath` flag is provided, in which case this would be created based on the flag.
+4. Create a `src/app/reducers/index.ts` file with an empty `State` interface, an empty `reducers` map, and an empty `metaReducers` array. This may be created under a different directory if the `statePath` flag is provided.
+5. Update your `src/app/app.module.ts` > `imports` array with `StoreModule.forRoot(reducers, { metaReducers })`. If you provided flags then the command will attempt to locate and update module found by the flags.
diff --git a/projects/ngrx.io/content/navigation.json b/projects/ngrx.io/content/navigation.json
index 88fc95ee0d..89638ac53d 100644
--- a/projects/ngrx.io/content/navigation.json
+++ b/projects/ngrx.io/content/navigation.json
@@ -25,7 +25,6 @@
"title": "Sponsor"
}
],
-
"TopBarNarrow": [
{
"title": "About NgRx",
@@ -57,7 +56,6 @@
]
}
],
-
"SideNav": [
{
"url": "docs",
@@ -71,6 +69,10 @@
"title": "Getting Started",
"url": "guide/store"
},
+ {
+ "title": "Installation",
+ "url": "guide/store/install"
+ },
{
"title": "Architecture",
"children": [
@@ -123,6 +125,10 @@
"title": "Overview",
"url": "guide/store-devtools"
},
+ {
+ "title": "Installation",
+ "url": "guide/store-devtools/install"
+ },
{
"title": "Instrumentation",
"url": "guide/store-devtools/config"
@@ -136,6 +142,10 @@
"title": "Overview",
"url": "guide/effects"
},
+ {
+ "title": "Installation",
+ "url": "guide/effects/install"
+ },
{
"title": "Testing",
"url": "guide/effects/testing"
@@ -153,6 +163,10 @@
"title": "Overview",
"url": "guide/router-store"
},
+ {
+ "title": "Installation",
+ "url": "guide/router-store/install"
+ },
{
"title": "Actions",
"url": "guide/router-store/actions"
@@ -170,6 +184,10 @@
"title": "Overview",
"url": "guide/entity"
},
+ {
+ "title": "Installation",
+ "url": "guide/entity/install"
+ },
{
"title": "Entity Interfaces",
"url": "guide/entity/interfaces"
@@ -187,6 +205,10 @@
"title": "Overview",
"url": "guide/schematics"
},
+ {
+ "title": "Installation",
+ "url": "guide/schematics/install"
+ },
{
"title": "Schematics",
"children": [
@@ -250,7 +272,6 @@
"tooltip": "API Reference"
}
],
-
"Footer": [
{
"title": "Resources",
@@ -278,8 +299,7 @@
{
"url": "https://stackoverflow.com/questions/tagged/ngrx",
"title": "Stack Overflow",
- "tooltip":
- "Stack Overflow: where the community answers your technical NgRx questions."
+ "tooltip": "Stack Overflow: where the community answers your technical NgRx questions."
},
{
"url": "https://gitter.im/ngrx/platform",
@@ -314,7 +334,6 @@
]
}
],
-
"docVersions": [
{
"title": "v6",