From 660c0aec84fe881aac248e7efde4472586a45096 Mon Sep 17 00:00:00 2001 From: Wes Grimes <wgrimes@epic-premier.com> Date: Wed, 23 Jan 2019 14:25:43 -0500 Subject: [PATCH 1/5] Add documentation to the Store -> Getting Started page detailing use of ng add --- projects/ngrx.io/content/guide/store/index.md | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/projects/ngrx.io/content/guide/store/index.md b/projects/ngrx.io/content/guide/store/index.md index 9de35d654b..52cb4058d6 100644 --- a/projects/ngrx.io/content/guide/store/index.md +++ b/projects/ngrx.io/content/guide/store/index.md @@ -19,6 +19,38 @@ npm install @ngrx/store --save yarn add @ngrx/store ``` +## Alternative Install using Angular CLI Schematics + +If your project is using the Angular CLI 6+ then you can utilize the following `ng add` commands <a href="https://angular.io/cli/add" target="_blank">(details here)</a>: + +### Add NgRx Store +```sh +ng add @ngrx/store +``` + +This can be a real time-saver as running the above command will automate the following steps: + +1. Update `package.json` > `depedencies` with `@ngrx/store`. +2. Run an `npm install` to install those depedencies. +3. Create a `src/app/reducers` folder +4. Create a shell `src/app/reducers/index.ts` with an empty `State` interface, an empty `reducers` map, and empty `metaReducers` array +5. Update your `src/app/app.module.ts` > `imports` array with `StoreModule.forRoot(reducers, { metaReducers })` + + +### Add NgRx Store DevTools + +To add the NgRx Store DevTools to your project run the following: + +```sh +ng add @ngrx/store-devtools +``` + +This command will automate the following steps: + +1. Update `package.json` > `depedencies` with `@ngrx/store-devtools`. +2. Run an `npm install` to install those depedencies. +3. Update your `src/app.module.ts` > `imports` array with `StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })` + ## Tutorial The following tutorial shows you how to manage the state of a counter, and how to select and display it within an Angular component. Try the <live-example name="store" noDownload></live-example>. From b487127e5df610e693a49c42b3ba039359de9057 Mon Sep 17 00:00:00 2001 From: Wes Grimes <wgrimes@epic-premier.com> Date: Wed, 23 Jan 2019 14:29:48 -0500 Subject: [PATCH 2/5] reword heading --- projects/ngrx.io/content/guide/store/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/ngrx.io/content/guide/store/index.md b/projects/ngrx.io/content/guide/store/index.md index 52cb4058d6..048785a107 100644 --- a/projects/ngrx.io/content/guide/store/index.md +++ b/projects/ngrx.io/content/guide/store/index.md @@ -19,7 +19,7 @@ npm install @ngrx/store --save yarn add @ngrx/store ``` -## Alternative Install using Angular CLI Schematics +## Alternative Install - Adding to your Angular CLI Project(s) If your project is using the Angular CLI 6+ then you can utilize the following `ng add` commands <a href="https://angular.io/cli/add" target="_blank">(details here)</a>: From 9b3d048f294f508a09d5a1e9e8f32c213691dcbb Mon Sep 17 00:00:00 2001 From: Wes Grimes <wgrimes@epic-premier.com> Date: Wed, 23 Jan 2019 15:35:29 -0500 Subject: [PATCH 3/5] Reorganize into sub-install pages --- .../ngrx.io/content/guide/effects/index.md | 10 +---- .../ngrx.io/content/guide/effects/install.md | 34 +++++++++++++++ .../ngrx.io/content/guide/entity/index.md | 10 +---- .../ngrx.io/content/guide/entity/install.md | 18 ++++++++ .../content/guide/router-store/index.md | 12 ++---- .../content/guide/router-store/install.md | 17 ++++++++ .../ngrx.io/content/guide/schematics/index.md | 12 +----- .../content/guide/schematics/install.md | 17 ++++++++ .../content/guide/store-devtools/index.md | 10 +---- .../content/guide/store-devtools/install.md | 30 +++++++++++++ projects/ngrx.io/content/guide/store/index.md | 42 +------------------ .../ngrx.io/content/guide/store/install.md | 33 +++++++++++++++ projects/ngrx.io/content/navigation.json | 31 +++++++++++--- 13 files changed, 187 insertions(+), 89 deletions(-) create mode 100644 projects/ngrx.io/content/guide/effects/install.md create mode 100644 projects/ngrx.io/content/guide/entity/install.md create mode 100644 projects/ngrx.io/content/guide/router-store/install.md create mode 100644 projects/ngrx.io/content/guide/schematics/install.md create mode 100644 projects/ngrx.io/content/guide/store-devtools/install.md create mode 100644 projects/ngrx.io/content/guide/store/install.md 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..4aaf6a1309 --- /dev/null +++ b/projects/ngrx.io/content/guide/effects/install.md @@ -0,0 +1,34 @@ +# 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 +``` + +This command will automate the following steps: + +1. Update `package.json` > `depedencies` with `@ngrx/effects`. +2. Run `npm install` to install those depedencies. +3. Create a `src/app/app.effects.ts` file with an empty `AppEffects` class that has the `actions$: Actions` observable injected into it. +4. Create a `src/app/app.effects.spec.ts` spec file with a basic unit test. +5. Update your `src/app/app.module.ts` > `imports` array with `EffectsModule.forRoot([AppEffects])` + 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..42effeb3f2 --- /dev/null +++ b/projects/ngrx.io/content/guide/entity/install.md @@ -0,0 +1,18 @@ +# 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 +``` + 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 {} -</code-example> \ No newline at end of file +</code-example> 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..ec14a87096 --- /dev/null +++ b/projects/ngrx.io/content/guide/router-store/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/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 +``` 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 <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 +``` 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..cc49937074 --- /dev/null +++ b/projects/ngrx.io/content/guide/store-devtools/install.md @@ -0,0 +1,30 @@ +# 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 +``` + +This command will automate the following steps: + +1. Update `package.json` > `depedencies` with `@ngrx/store-devtools`. +2. Run `npm install` to install those depedencies. +3. Update your `src/app.module.ts` > `imports` array with `StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })` diff --git a/projects/ngrx.io/content/guide/store/index.md b/projects/ngrx.io/content/guide/store/index.md index 048785a107..3f67835df6 100644 --- a/projects/ngrx.io/content/guide/store/index.md +++ b/projects/ngrx.io/content/guide/store/index.md @@ -9,47 +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 -``` - -## Alternative Install - Adding to your Angular CLI Project(s) - -If your project is using the Angular CLI 6+ then you can utilize the following `ng add` commands <a href="https://angular.io/cli/add" target="_blank">(details here)</a>: - -### Add NgRx Store -```sh -ng add @ngrx/store -``` - -This can be a real time-saver as running the above command will automate the following steps: - -1. Update `package.json` > `depedencies` with `@ngrx/store`. -2. Run an `npm install` to install those depedencies. -3. Create a `src/app/reducers` folder -4. Create a shell `src/app/reducers/index.ts` with an empty `State` interface, an empty `reducers` map, and empty `metaReducers` array -5. Update your `src/app/app.module.ts` > `imports` array with `StoreModule.forRoot(reducers, { metaReducers })` - - -### Add NgRx Store DevTools - -To add the NgRx Store DevTools to your project run the following: - -```sh -ng add @ngrx/store-devtools -``` - -This command will automate the following steps: - -1. Update `package.json` > `depedencies` with `@ngrx/store-devtools`. -2. Run an `npm install` to install those depedencies. -3. Update your `src/app.module.ts` > `imports` array with `StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })` +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..ca80baf5be --- /dev/null +++ b/projects/ngrx.io/content/guide/store/install.md @@ -0,0 +1,33 @@ +# 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 +``` + +This command will automate the following steps: + +1. Update `package.json` > `depedencies` with `@ngrx/store`. +2. Run `npm install` to install those depedencies. +3. Create a `src/app/reducers` folder +4. Create a `src/app/reducers/index.ts` file with an empty `State` interface, an empty `reducers` map, and an empty `metaReducers` array +5. Update your `src/app/app.module.ts` > `imports` array with `StoreModule.forRoot(reducers, { metaReducers })` 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", From 67c1238fcac70e95bc076856fd97bbcf53f023db Mon Sep 17 00:00:00 2001 From: Wes Grimes <wgrimes@epic-premier.com> Date: Thu, 24 Jan 2019 10:18:04 -0500 Subject: [PATCH 4/5] Added additional ng add commands. Updated each install instruction to include documentation for optional ng add flags --- .../ngrx.io/content/guide/effects/install.md | 14 ++++++++++--- .../ngrx.io/content/guide/entity/install.md | 13 ++++++++++++ .../content/guide/router-store/install.md | 21 +++++++++++++++++++ .../content/guide/store-devtools/install.md | 9 +++++++- .../ngrx.io/content/guide/store/install.md | 14 ++++++++++--- 5 files changed, 64 insertions(+), 7 deletions(-) diff --git a/projects/ngrx.io/content/guide/effects/install.md b/projects/ngrx.io/content/guide/effects/install.md index 4aaf6a1309..b86fe67eda 100644 --- a/projects/ngrx.io/content/guide/effects/install.md +++ b/projects/ngrx.io/content/guide/effects/install.md @@ -23,12 +23,20 @@ If your project is using the Angular CLI 6+ then you can install the Effects to ```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` > `depedencies` with `@ngrx/effects`. 2. Run `npm install` to install those depedencies. -3. Create a `src/app/app.effects.ts` file with an empty `AppEffects` class that has the `actions$: Actions` observable injected into it. -4. Create a `src/app/app.effects.spec.ts` spec file with a basic unit test. -5. Update your `src/app/app.module.ts` > `imports` array with `EffectsModule.forRoot([AppEffects])` +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/install.md b/projects/ngrx.io/content/guide/entity/install.md index 42effeb3f2..c94c2ee879 100644 --- a/projects/ngrx.io/content/guide/entity/install.md +++ b/projects/ngrx.io/content/guide/entity/install.md @@ -16,3 +16,16 @@ For more information on using `yarn` check out the docs <a href="https://yarnpkg 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` > `depedencies` with `@ngrx/entity`. +2. Run `npm install` to install those depedencies. + diff --git a/projects/ngrx.io/content/guide/router-store/install.md b/projects/ngrx.io/content/guide/router-store/install.md index ec14a87096..b58bf1cc4f 100644 --- a/projects/ngrx.io/content/guide/router-store/install.md +++ b/projects/ngrx.io/content/guide/router-store/install.md @@ -15,3 +15,24 @@ For more information on using `yarn` check out the docs <a href="https://yarnpkg ```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` > `depedencies` with `@ngrx/router-store`. +2. Run `npm install` to install those depedencies. +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/store-devtools/install.md b/projects/ngrx.io/content/guide/store-devtools/install.md index cc49937074..827e4c778d 100644 --- a/projects/ngrx.io/content/guide/store-devtools/install.md +++ b/projects/ngrx.io/content/guide/store-devtools/install.md @@ -23,8 +23,15 @@ If your project is using the Angular CLI 6+ then you can install the Store Devto 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` > `depedencies` with `@ngrx/store-devtools`. 2. Run `npm install` to install those depedencies. -3. Update your `src/app.module.ts` > `imports` array with `StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })` +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/install.md b/projects/ngrx.io/content/guide/store/install.md index ca80baf5be..c66a4dfc1a 100644 --- a/projects/ngrx.io/content/guide/store/install.md +++ b/projects/ngrx.io/content/guide/store/install.md @@ -24,10 +24,18 @@ If your project is using the Angular CLI 6+ then you can install the Store to yo 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` > `depedencies` with `@ngrx/store`. 2. Run `npm install` to install those depedencies. -3. Create a `src/app/reducers` folder -4. Create a `src/app/reducers/index.ts` file with an empty `State` interface, an empty `reducers` map, and an empty `metaReducers` array -5. Update your `src/app/app.module.ts` > `imports` array with `StoreModule.forRoot(reducers, { metaReducers })` +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. From 6bd14b85d170262231ce12c878315d4774111d16 Mon Sep 17 00:00:00 2001 From: Wes Grimes <wgrimes@epic-premier.com> Date: Fri, 25 Jan 2019 08:12:15 -0500 Subject: [PATCH 5/5] docs: fixing typos in install pages --- projects/ngrx.io/content/guide/effects/install.md | 6 +++--- projects/ngrx.io/content/guide/entity/install.md | 4 ++-- projects/ngrx.io/content/guide/router-store/install.md | 4 ++-- projects/ngrx.io/content/guide/store-devtools/install.md | 4 ++-- projects/ngrx.io/content/guide/store/install.md | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/projects/ngrx.io/content/guide/effects/install.md b/projects/ngrx.io/content/guide/effects/install.md index b86fe67eda..8a2b76b88e 100644 --- a/projects/ngrx.io/content/guide/effects/install.md +++ b/projects/ngrx.io/content/guide/effects/install.md @@ -29,13 +29,13 @@ ng add @ngrx/effects * 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`; +* 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` > `depedencies` with `@ngrx/effects`. -2. Run `npm install` to install those depedencies. +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/install.md b/projects/ngrx.io/content/guide/entity/install.md index c94c2ee879..f98636a6bc 100644 --- a/projects/ngrx.io/content/guide/entity/install.md +++ b/projects/ngrx.io/content/guide/entity/install.md @@ -26,6 +26,6 @@ ng add @ngrx/entity This command will automate the following steps: -1. Update `package.json` > `depedencies` with `@ngrx/entity`. -2. Run `npm install` to install those depedencies. +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/install.md b/projects/ngrx.io/content/guide/router-store/install.md index b58bf1cc4f..2366a15d9c 100644 --- a/projects/ngrx.io/content/guide/router-store/install.md +++ b/projects/ngrx.io/content/guide/router-store/install.md @@ -32,7 +32,7 @@ ng add @ngrx/router-store This command will automate the following steps: -1. Update `package.json` > `depedencies` with `@ngrx/router-store`. -2. Run `npm install` to install those depedencies. +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/store-devtools/install.md b/projects/ngrx.io/content/guide/store-devtools/install.md index 827e4c778d..3aaf5655a4 100644 --- a/projects/ngrx.io/content/guide/store-devtools/install.md +++ b/projects/ngrx.io/content/guide/store-devtools/install.md @@ -32,6 +32,6 @@ ng add @ngrx/store-devtools This command will automate the following steps: -1. Update `package.json` > `depedencies` with `@ngrx/store-devtools`. -2. Run `npm install` to install those depedencies. +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/install.md b/projects/ngrx.io/content/guide/store/install.md index c66a4dfc1a..3db66bd37d 100644 --- a/projects/ngrx.io/content/guide/store/install.md +++ b/projects/ngrx.io/content/guide/store/install.md @@ -34,8 +34,8 @@ ng add @ngrx/store This command will automate the following steps: -1. Update `package.json` > `depedencies` with `@ngrx/store`. -2. Run `npm install` to install those depedencies. +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.