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.module.ts renamed to projects/example-app/src/app/app.config.ts

@@ -1,40 +1,34 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { StoreRouterConnectingModule } from '@ngrx/router-store';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-
-import { AuthModule } from '@example-app/auth';
+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 { CoreModule } from '@example-app/core';
-import { AppRoutingModule } from '@example-app/app-routing.module';
+import { APP_ROUTES } from '@example-app/app.routing';
 import { UserEffects, RouterEffects } from '@example-app/core/effects';
-import { AppComponent } from '@example-app/core/containers';
+import { provideRouter, withHashLocation } from '@angular/router';
+import * as fromAuth from '@example-app/auth/reducers';
+import { AuthEffects } from './auth/effects';
 
-@NgModule({
-  imports: [
-    CommonModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    AuthModule,
-    AppRoutingModule,
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+    provideHttpClient(),
+    provideRouter(APP_ROUTES, withHashLocation()),
 
     /**
-     * StoreModule.forRoot is imported once in the root module, accepting a reducer
+     * 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.
      */
-    StoreModule.forRoot(rootReducers, {
+    provideStore(rootReducers, {
       metaReducers,
       runtimeChecks: {
         // strictStateImmutability and strictActionImmutability are enabled by default
@@ -48,7 +42,7 @@ import { AppComponent } from '@example-app/core/containers';
     /**
      * @ngrx/router-store keeps router state up-to-date in the store.
      */
-    StoreRouterConnectingModule.forRoot(),
+    provideRouterStore(),
 
     /**
      * Store devtools instrument the store retaining past versions of state
@@ -60,22 +54,27 @@ import { AppComponent } from '@example-app/core/containers';
      *
      * See: https://github.com/zalmoxisus/redux-devtools-extension
      */
-    StoreDevtoolsModule.instrument({
+    provideStoreDevtools({
       name: 'NgRx Book Store App',
       // In a production build you would want to disable the Store Devtools
       // logOnly: !isDevMode(),
     }),
 
     /**
-     * EffectsModule.forRoot() is imported once in the root module and
-     * sets up the effects class to be initialized immediately when the
-     * application starts.
+     * The provideEffects() function is used to register effect classes
+     * so they are initialized when the application starts.
      *
      * See: https://ngrx.io/guide/effects#registering-root-effects
      */
-    EffectsModule.forRoot(UserEffects, RouterEffects),
-    CoreModule,
+    provideEffects(UserEffects, RouterEffects, AuthEffects),
+
+    /**
+     * The Auth state is provided here to ensure that the login details
+     * is available as soon as the application starts.
+     */
+    provideState({
+      name: fromAuth.authFeatureKey,
+      reducer: fromAuth.reducers,
+    }),
   ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+};

projects/example-app/src/app/app-routing.module.ts renamed to projects/example-app/src/app/app.routing.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.routing').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.routing').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/auth/auth-routing.module.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.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.routing.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

@@ -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)"