docs: reorganize installation instructions into individual pages for …

…each module (#1523)

Closes #1146

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 on the type of action they are interested in. This is done by using an operator.
 - Effects perform tasks, which are 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
 

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 <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+
+```sh
+npm install @ngrx/effects --save
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/docs/usage" target="_blank">here</a>.
+
+```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 <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
+
+```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.
+

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.

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 <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+
+```sh
+npm install @ngrx/entity --save
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/docs/usage" target="_blank">here</a>.
+
+```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 <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
+
+```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. 
+

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 {}
-</code-example>
+</code-example>

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 <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+
+```sh
+npm install @ngrx/router-store --save
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/docs/usage" target="_blank">here</a>.
+
+```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 <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
+
+```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.
+

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
 

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 <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+
+```sh
+npm install @ngrx/schematics --save-dev
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/docs/usage" target="_blank">here</a>.
+
+```sh
+yarn add @ngrx/schematics --dev
+```

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
 

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 <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+
+```sh
+npm install @ngrx/store-devtools --save
+```
+
+## Installing with `yarn`
+For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/docs/usage" target="_blank">here</a>.
+
+```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 <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
+
+```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. 

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
 

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 <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+
+```sh
+npm install @ngrx/store --save
+```
+
+## Installing with `yarn`
+
+For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/docs/usage" target="_blank">here</a>.
+
+```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 <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
+
+```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.