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;

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

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

src/app/checklist/checklist-item-metadata/checklist-metadata.component.ts

@@ -1,10 +1,17 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { ChecklistItem } from '../models/checklist.model';
+import { ChecklistFavoriteButtonComponent } from '../checklist-favorite-button/checklist-favorite-button.component';
+import { ChipComponent } from '../../shared/chip/chip.component';
+import { NgIf } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist-list-item',
   templateUrl: './checklist-list-item.component.html',
-  styleUrls: ['./checklist-list-item.component.scss']
+  styleUrls: ['./checklist-list-item.component.scss'],
+  imports: [MatCheckbox, RouterLink, NgIf, ChipComponent, ChecklistFavoriteButtonComponent]
 })
 export class ChecklistListItemComponent {
   @Input() item: ChecklistItem;

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist-list',
   template: '<ng-content></ng-content>',
   styleUrls: ['./checklist-list.component.scss']

src/app/checklist/checklist-list/checklist-list-item.component.ts

@@ -1,6 +1,6 @@
 import { animate, query, stagger, style, transition, trigger } from '@angular/animations';
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { select, Store } from '@ngrx/store';
 import { Observable, zip } from 'rxjs';
 import { filter, switchMap, tap } from 'rxjs/operators';
@@ -9,11 +9,15 @@ import { extractRouteParams, getActivatedChild } from '../../shared/router.utils
 import { ApplicationState } from '../../state/app.state';
 import { Category, ChecklistItem } from '../models/checklist.model';
 import { ChecklistSelectors } from '../state/checklist.selectors';
+import { MatIcon } from '@angular/material/icon';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist-overview',
   templateUrl: './checklist-overview.component.html',
   styleUrls: ['./checklist-overview.component.scss'],
+  imports: [NgIf, NgFor, MatIcon, RouterOutlet, AsyncPipe],
   animations: [
     trigger('breadcrumb', [
       transition('* <=> *', [

src/app/checklist/checklist-list/checklist-list.component.ts

@@ -1,18 +1,22 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { Router } from '@angular/router';
 import * as fuzzysort from 'fuzzysort';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { debounceTime, map, switchMap } from 'rxjs/operators';
 import { CategoryEntity, ChecklistItem } from '../models/checklist.model';
 import { IndexEntry, SearchResult } from '../search/search.models';
 import { SearchService } from '../search/search.service';
+import { MatOption } from '@angular/material/core';
+import { NgFor, NgIf, AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist-search',
   templateUrl: './checklist-search.component.html',
-  styleUrls: ['./checklist-search.component.scss']
+  styleUrls: ['./checklist-search.component.scss'],
+  imports: [ReactiveFormsModule, MatAutocompleteTrigger, MatAutocomplete, NgFor, MatOption, NgIf, AsyncPipe]
 })
 export class ChecklistSearchComponent implements OnInit {
   results$: Observable<any>;

src/app/checklist/checklist-overview/checklist-overview.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatSidenav, MatDrawerMode } from '@angular/material/sidenav';
+import { MatSidenav, MatDrawerMode, MatSidenavContainer, MatSidenavContent } from '@angular/material/sidenav';
 import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { select, Store } from '@ngrx/store';
 import { BehaviorSubject, combineLatest, Observable, of, zip } from 'rxjs';
 import { filter, map, switchMap } from 'rxjs/operators';
@@ -16,16 +16,59 @@ import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-
 import { Category, ChecklistItem } from './models/checklist.model';
 import { ToggleEditMode } from './state/checklist.actions';
 import { ChecklistSelectors } from './state/checklist.selectors';
+import { FooterComponent } from '../shared/footer/footer.component';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatBadge } from '@angular/material/badge';
+import { ScoreChartComponent } from '../shared/score-chart/score-chart.component';
+import { ChecklistSearchComponent } from './checklist-search/checklist-search.component';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import {
+  DropdownStaticOptionsComponent,
+  DropdownStaticOptionComponent
+} from '../shared/dropdown/dropdown-static-options.component';
+import { DropdownComponent } from '../shared/dropdown/dropdown.component';
+import { ToolbarLogoComponent } from '../shared/toolbar/toolbar-logo/toolbar-logo.component';
+import { MatIcon } from '@angular/material/icon';
+import { MatIconButton } from '@angular/material/button';
+import { ToolbarComponent } from '../shared/toolbar/toolbar.component';
+import { SearchService } from './search/search.service';
 
 enum CategoryListMode {
   List,
   Edit
 }
 
 @Component({
+  standalone: true,
   selector: 'ac-checklist',
   templateUrl: './checklist.component.html',
-  styleUrls: ['./checklist.component.scss']
+  styleUrls: ['./checklist.component.scss'],
+  imports: [
+    ToolbarComponent,
+    MatIconButton,
+    MatIcon,
+    ToolbarLogoComponent,
+    DropdownComponent,
+    DropdownStaticOptionsComponent,
+    DropdownStaticOptionComponent,
+    RouterLink,
+    NgIf,
+    ChecklistSearchComponent,
+    MatSidenavContainer,
+    MatSidenav,
+    ScoreChartComponent,
+    RouterLinkActive,
+    MatBadge,
+    MatSlideToggle,
+    NgFor,
+    MatCheckbox,
+    MatSidenavContent,
+    RouterOutlet,
+    FooterComponent,
+    AsyncPipe
+  ],
+  providers: [SearchService]
 })
 export class ChecklistComponent implements OnInit {
   private editMode$ = new BehaviorSubject(CategoryListMode.List);