Chapter 2: Getting started: Installing dependencies and creating the project

Installations#

NodeJS/Angular#

If you already have NodeJS and Angular CLI on your machine, skip this step. Otherwise, do the following:

Download and install NodeJS
Install the Angular CLI by running the following command:
```
npm install -g @angular/cli
```

Creating the project#

As I mentioned in the previous chapter, we are going to create an Angular finance logging application with NgRx.

Let's create this project and get started by creating a new Angular project:

ng new finance-logger --defaults

Let's now add NgRx store to the party:

cd financial-loggernpm install @ngrx/store

note

NgRx is divided into several packages, but the most basic functionalities are provided from @ngrx/store, we will be using additional packages as we dive into more complex concepts.

Using standalone components#

Angular has introduced the notion of standalone components lately and it's gaining popularity. If you would like to advantage of the new syntax, you can follow the following steps, otherwise you can keep your application as it is since we will show you how to get along with this tutorial whether or not you still have an AppModule:

Set the standalone flag to true in the app.component.ts:

app.component.ts

@Component({  selector: 'app-root',  standalone: true,  template: '...',  styles: []})export class AppComponent {  title = 'finance-logger';}

Remove the app.module.ts
Replace the following content in main.ts to indicate Angular to create the application from your AppComponent instead of your AppModule:

main.ts

- platformBrowserDynamic().bootstrapModule(AppModule)+ bootstrapApplication(AppComponent)  .catch(err => console.error(err));

Up and running#

Finally, all we have to do is to add our (empty) store to the app before launching it:

With standalone components
From the AppModule

In your main.ts file, add the provideStore from @ngrx/store to the application's providers:

main.ts

bootstrapApplication(AppComponent, {  providers: [ provideStore() ]}).catch((err) => console.error(err));

Alternatively, you can use the former way of adding the store using StoreModule by calling importProvidersFrom, however we do not recommand you to do so since you can take advantage of the new API.

In your app.module.ts file, call add the StoreModule.forRoot({}) from @ngrx/store in the providers:

app.module.ts

@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    AppRoutingModule,    StoreModule.forRoot({}),  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

We are all set! You can run the following commmand to launch our Angular application and see it running on http://localhost:4200/:

ng serve --open

Now that the setup is done, we can move on to chapter 3 where we will explore what NgRx is and where it came from.