LogoLogo
v3.7
v3.7
  • README
  • Getting Started
    • Why
    • Installation
  • Concepts
    • Introduction
    • Store
    • Actions
    • State
    • Select
  • Advanced
    • Action Handlers
    • Actions Life Cycle
    • Cancellation
    • Composition
    • Error Handling
    • Ivy Migration Guide
    • Lazy Loading
    • Life-cycle
    • Mapped Sub States
    • Meta Reducers
    • Optimizing Selectors
    • Options
    • Shared State
    • State Token
    • State Operators
    • Sub States
  • Recipes
    • Authentication
    • Caching
    • Component Events from NGXS
    • Debouncing Actions
    • Dynamic Plugins
    • Immutability Helpers
    • Module Federation
    • Style Guide
    • Unit Testing
    • RxAngular Integration
  • Snippets
    • State Operators
  • Plugins
    • Introduction
    • CLI
    • Logger
    • Devtools
    • Storage
    • Forms
    • Web Socket
    • Router
    • HMR
  • NGXS Labs
    • Introduction
  • Community
    • FAQ
    • Resources
    • Contributors
    • Contributing
    • Sponsors
  • Changelog
Powered by GitBook
On this page
  • Installation
  • Development Builds
  1. Getting Started

Installation

Installation

To get started, install the package from npm. The latest version (3.x) supports Angular/RxJS 6+, if you want support for Angular 5, use version 2.x.

npm install @ngxs/store --save

# or if you are using yarn
yarn add @ngxs/store

then in app.module.ts, import the NgxsModule:

import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';

import { ZooState } from './examples/zoo.state';

@NgModule({
  imports: [
    NgxsModule.forRoot([ZooState], {
      developmentMode: !environment.production
    })
  ]
})
export class AppModule {}

It's important that you add NgxsModule.forRoot([]) at the root of your module even if all of your states are feature states.

Development Builds

Our continuous integration server runs all tests on every commit to master and if they pass it will publish a new development build to NPM and tag it with the @dev tag.

This means that if you want the bleeding edge of @ngxs/store or any of the plugins you can simply do:

npm install @ngxs/store@dev --save
npm install @ngxs/logger-plugin@dev --save

# or if you are using yarn
yarn add @ngxs/store@dev
yarn add @ngxs/logger-plugin@dev

# of if you want to update multiple things at the same time
yarn add @ngxs/{store,logger-plugin,devtools-plugin}@dev

This will install the version currently tagged as @dev. Your package.json file will be locked to that specific version.

{
  "dependencies": {
    "@ngxs/store": "3.0.0-dev.a0d076d"
  }
}

If you later want to again update to the bleeding edge, you will have to run the above command again.

PreviousWhyNextConcepts

Last updated 2 years ago

When you include the module in the import, you can pass root stores along with . If you are lazy loading, you can use the forFeature option with the same arguments.

Options such as developmentMode can be passed to the module as the second argument in the forRoot method. In development mode, plugin authors can add additional runtime checks/etc to enhance the developer experience. Switching to development mode will also freeze your store using module.

options
deep-freeze-strict