refactor: make app standalone (#136)

Author: sheikalthaf

src/app/app.component.ts

@@ -1,13 +1,17 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { NavigationEnd, NavigationStart, Router, RouterOutlet } from '@angular/router';
 import { merge, Observable } from 'rxjs';
 import { filter, mapTo } from 'rxjs/operators';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { AsyncPipe, NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'ac-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, AsyncPipe, NgIf, MatProgressBar]
 })
 export class AppComponent implements OnInit {
   loading$: Observable<boolean>;

src/app/app.config.ts

@@ -0,0 +1,36 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideState, provideStore } from '@ngrx/store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
+import { environment } from '../environments/environment';
+import { ROOT_REDUCER, USER_PROVIDED_META_REDUCERS } from './state/app.state';
+import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';
+import { APP_ROUTES } from './app.routes';
+import { provideRouterStore } from '@ngrx/router-store';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { checklistReducer } from './checklist/state/checklist.reducer';
+import { projectsReducer } from './projects/state/projects.reducer';
+import { MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxDefaultOptions } from '@angular/material/checkbox';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+    provideRouter(APP_ROUTES, withPreloading(PreloadAllModules)),
+    provideStore(ROOT_REDUCER, {
+      metaReducers: USER_PROVIDED_META_REDUCERS
+    }),
+    provideState('checklist', checklistReducer),
+    provideState('projects', projectsReducer),
+    provideStoreDevtools({
+      maxAge: 25,
+      logOnly: environment.production,
+      connectInZone: true
+    }),
+    provideRouterStore(),
+
+    // material design
+    {
+      provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
+      useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions
+    }
+  ]
+};

src/app/app.module.ts

@@ -1,6 +1,10 @@
 import { Routes } from '@angular/router';
 
 export const APP_ROUTES: Routes = [
-  { path: '', redirectTo: '/projects', pathMatch: 'full' },
-  { path: '**', redirectTo: '/projects' }
+  { path: 'projects', loadChildren: () => import('./projects/projects.routes').then(m => m.PROJECTS_ROUTES) },
+  {
+    path: ':project/checklist',
+    loadChildren: () => import('./checklist/checklist.routes').then(m => m.CHECKLIST_ROUTES)
+  },
+  { path: '', redirectTo: 'projects', pathMatch: 'full' }
 ];

src/app/app.routes.ts

@@ -1,10 +1,15 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { ChecklistFilter } from '../models/checklist.model';
+import { MatIcon } from '@angular/material/icon';
+import { MatButton } from '@angular/material/button';
+import { NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist-cta-bar',
   templateUrl: './checklist-cta-bar.component.html',
-  styleUrls: ['./checklist-cta-bar.component.scss']
+  styleUrls: ['./checklist-cta-bar.component.scss'],
+  imports: [NgIf, MatButton, MatIcon]
 })
 export class ChecklistCtaBarComponent {
   @Input() filter: ChecklistFilter;

src/app/app.server.module.ts

@@ -5,11 +5,18 @@ import { ToggleFavorite, ToggleItem } from '../../projects/state/projects.action
 import { ApplicationState } from '../../state/app.state';
 import { ChecklistItem } from '../models/checklist.model';
 import { ChecklistSelectors } from '../state/checklist.selectors';
+import { BannerComponent } from '../../shared/banner/banner.component';
+import { ChecklistMetadataComponent } from '../checklist-item-metadata/checklist-metadata.component';
+import { ChecklistFavoriteButtonComponent } from '../checklist-favorite-button/checklist-favorite-button.component';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { NgIf, AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist-detail-view',
   templateUrl: './checklist-detail-view.component.html',
-  styleUrls: ['./checklist-detail-view.component.scss']
+  styleUrls: ['./checklist-detail-view.component.scss'],
+  imports: [NgIf, MatCheckbox, ChecklistFavoriteButtonComponent, ChecklistMetadataComponent, BannerComponent, AsyncPipe]
 })
 export class ChecklistDetailViewComponent implements OnInit {
   item$: Observable<any>;

src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.ts

@@ -1,9 +1,14 @@
 import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { NgStyle } from '@angular/common';
+import { MatIconButton } from '@angular/material/button';
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist-favorite-button',
   templateUrl: './checklist-favorite-button.component.html',
-  styleUrls: ['./checklist-favorite-button.component.scss']
+  styleUrls: ['./checklist-favorite-button.component.scss'],
+  imports: [MatIconButton, NgStyle, MatIcon]
 })
 export class ChecklistFavoriteButtonComponent {
   _style = {};

src/app/checklist/checklist-detail-view/checklist-detail-view.component.ts

@@ -6,11 +6,17 @@ import { ApplicationState } from '../../state/app.state';
 import { ChecklistFilter, ChecklistItem, Favorite } from '../models/checklist.model';
 import { SetFavoritesFilter } from '../state/checklist.actions';
 import { ChecklistSelectors } from '../state/checklist.selectors';
+import { ChecklistListItemComponent } from '../checklist-list/checklist-list-item.component';
+import { ChecklistListComponent } from '../checklist-list/checklist-list.component';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { ChecklistCtaBarComponent } from '../checklist-cta-bar/checklist-cta-bar.component';
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist-favorites-view',
   templateUrl: './checklist-favorites-view.component.html',
-  styleUrls: ['./checklist-favorites-view.component.scss']
+  styleUrls: ['./checklist-favorites-view.component.scss'],
+  imports: [ChecklistCtaBarComponent, NgIf, NgFor, ChecklistListComponent, ChecklistListItemComponent, AsyncPipe]
 })
 export class ChecklistFavoritesViewComponent implements OnInit {
   favorites$: Observable<Array<Favorite>>;

src/app/checklist/checklist-favorite-button/checklist-favorite-button.component.ts

@@ -1,10 +1,13 @@
 import { Component, Input } from '@angular/core';
 import { Author } from '../models/checklist.model';
+import { NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist-metadata',
   templateUrl: './checklist-metadata.component.html',
-  styleUrls: ['./checklist-metadata.component.scss']
+  styleUrls: ['./checklist-metadata.component.scss'],
+  imports: [NgIf]
 })
 export class ChecklistMetadataComponent {
   @Input() author: Author;