docs: update example app to standalone

Updated the example app to standalone, removed all the modules from app.

Author: sheikalthaf

projects/example-app/src/app/app.config.ts

@@ -0,0 +1,78 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+import { provideState, provideStore } from '@ngrx/store';
+import { provideEffects } from '@ngrx/effects';
+import { provideRouterStore } from '@ngrx/router-store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
+
+import { rootReducers, metaReducers } from '@example-app/reducers';
+
+import { APP_ROUTES } from '@example-app/app.routing';
+import { UserEffects, RouterEffects } from '@example-app/core/effects';
+import { provideRouter, withHashLocation } from '@angular/router';
+import * as fromAuth from '@example-app/auth/reducers';
+import { AuthEffects } from './auth/effects';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimationsAsync(),
+    provideHttpClient(),
+    provideRouter(APP_ROUTES, withHashLocation()),
+
+    /**
+     * provideStore() is imported once in the root providers, accepting a reducer
+     * function or object map of reducer functions. If passed an object of
+     * reducers, combineReducers will be run creating your application
+     * meta-reducer. This returns all providers for an @ngrx/store
+     * based application.
+     */
+    provideStore(rootReducers, {
+      metaReducers,
+      runtimeChecks: {
+        // strictStateImmutability and strictActionImmutability are enabled by default
+        strictStateSerializability: true,
+        strictActionSerializability: true,
+        strictActionWithinNgZone: true,
+        strictActionTypeUniqueness: true,
+      },
+    }),
+
+    /**
+     * @ngrx/router-store keeps router state up-to-date in the store.
+     */
+    provideRouterStore(),
+
+    /**
+     * Store devtools instrument the store retaining past versions of state
+     * and recalculating new states. This enables powerful time-travel
+     * debugging.
+     *
+     * To use the debugger, install the Redux Devtools extension for either
+     * Chrome or Firefox
+     *
+     * See: https://github.com/zalmoxisus/redux-devtools-extension
+     */
+    provideStoreDevtools({
+      name: 'NgRx Book Store App',
+      // In a production build you would want to disable the Store Devtools
+      // logOnly: !isDevMode(),
+    }),
+
+    /**
+     * The provideEffects() function is used to register effect classes
+     * so they are initialized when the application starts.
+     */
+    provideEffects(UserEffects, RouterEffects, AuthEffects),
+
+    /**
+     * The Auth state is provided here to ensure that the login details
+     * are available as soon as the application starts.
+     */
+    provideState({
+      name: fromAuth.authFeatureKey,
+      reducer: fromAuth.reducers,
+    }),
+  ],
+};

projects/example-app/src/app/app.module.ts

@@ -1,15 +1,19 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { authGuard } from '@example-app/auth/services';
 import { NotFoundPageComponent } from '@example-app/core/containers';
 
-export const routes: Routes = [
+export const APP_ROUTES: Routes = [
+  {
+    path: 'login',
+    loadChildren: () =>
+      import('@example-app/auth/auth.routes').then((m) => m.AUTH_ROUTES),
+  },
   { path: '', redirectTo: '/books', pathMatch: 'full' },
   {
     path: 'books',
     loadChildren: () =>
-      import('@example-app/books/books.module').then((m) => m.BooksModule),
+      import('@example-app/books/books.routes').then((m) => m.BOOKS_ROUTES),
     canActivate: [authGuard],
   },
   {
@@ -18,13 +22,3 @@ export const routes: Routes = [
     data: { title: 'Not found' },
   },
 ];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, {
-      useHash: true,
-    }),
-  ],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}

projects/example-app/src/app/app-routing.module.ts renamed to projects/example-app/src/app/app.routing.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+import { LoginPageComponent } from '@example-app/auth/containers';
+
+export const AUTH_ROUTES: Routes = [
+  {
+    path: '',
+    component: LoginPageComponent,
+    data: { title: 'Login' },
+  },
+];

projects/example-app/src/app/auth/auth-routing.module.ts

@@ -1,16 +1,16 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { LoginFormComponent } from '@example-app/auth/components';
-import { ReactiveFormsModule } from '@angular/forms';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 describe('Login Page', () => {
   let fixture: ComponentFixture<LoginFormComponent>;
   let instance: LoginFormComponent;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule],
-      declarations: [LoginFormComponent],
+      imports: [LoginFormComponent],
+      providers: [provideNoopAnimations()],
       schemas: [NO_ERRORS_SCHEMA],
     });
 

projects/example-app/src/app/auth/auth.module.ts

@@ -1,9 +1,13 @@
+import { NgIf } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Credentials } from '@example-app/auth/models';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-login-form',
+  imports: [MaterialModule, ReactiveFormsModule, NgIf],
   template: `
     <mat-card>
       <mat-card-title>Login</mat-card-title>

projects/example-app/src/app/auth/auth.routes.ts

@@ -1,14 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LogoutConfirmationDialogComponent } from '@example-app/auth/components';
-import { MaterialModule } from '@example-app/material';
 
 describe('Logout Confirmation Dialog', () => {
   let fixture: ComponentFixture<LogoutConfirmationDialogComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      declarations: [LogoutConfirmationDialogComponent],
+      imports: [LogoutConfirmationDialogComponent],
     });
 
     fixture = TestBed.createComponent(LogoutConfirmationDialogComponent);

projects/example-app/src/app/auth/components/login-form.component.spec.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 /**
  * The dialog will close with true if user clicks the ok button,
  * otherwise it will close with undefined.
  */
 @Component({
+  standalone: true,
+  imports: [MaterialModule],
   template: `
     <h2 mat-dialog-title>Logout</h2>
     <mat-dialog-content>Are you sure you want to logout?</mat-dialog-content>

projects/example-app/src/app/auth/components/login-form.component.ts

@@ -1,12 +1,9 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { LoginPageComponent } from '@example-app/auth/containers';
-import { LoginFormComponent } from '@example-app/auth/components';
 import * as fromAuth from '@example-app/auth/reducers';
 import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
-import { MaterialModule } from '@example-app/material';
 
 describe('Login Page', () => {
   let fixture: ComponentFixture<LoginPageComponent>;
@@ -15,9 +12,9 @@ describe('Login Page', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, MaterialModule, ReactiveFormsModule],
-      declarations: [LoginPageComponent, LoginFormComponent],
+      imports: [LoginPageComponent],
       providers: [
+        provideNoopAnimations(),
         provideMockStore({
           selectors: [
             { selector: fromAuth.selectLoginPagePending, value: false },

projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.spec.ts

@@ -3,9 +3,13 @@ import { Store } from '@ngrx/store';
 import { Credentials } from '@example-app/auth/models';
 import * as fromAuth from '@example-app/auth/reducers';
 import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
+import { LoginFormComponent } from '../components';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-login-page',
+  imports: [LoginFormComponent, AsyncPipe],
   template: `
     <bc-login-form
       (submitted)="onSubmit($event)"