# Lazy Loading

Stores can be lazy-loaded easily by importing the `NgxsModule` using the `forFeature` method. All the other syntax for how you import and describe them are the same. For example:

```typescript
@NgModule({
  imports: [
    NgxsModule.forFeature([LazyState])
  ]
})
export class LazyModule{}
```

It's important to note when lazy-loading a store, it is registered in the global state so this state object will now be persisted globally. Even though it's available globally, you should only use it within that feature module so you make sure not to create dependencies on things that could not be loaded yet.

You probably defined a `AppState` interface that represents the global state graph but since we lazy loaded this we can't really include that in the definition. To handle this, let's extend the `AppState` and use that in our a component like:

```typescript
export interface AppStateModel {
  zoos: Zoo[];
}

export interface OfficesStateModel extends AppStateModel {
  offices: Office[];
}
```

Now when we use our `Select` in our lazy loaded feature module, we can use `OfficesState`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.ngxs.io/v3.4/advanced/lazy.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
