chore: resolve build issues for integration app

integration/.browserslistrc

@@ -1,12 +1,11 @@
 # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+
 # For additional information regarding the format and rule options, please see:
+
 # https://github.com/browserslist/browserslist#queries
 
 # You can see what browsers were selected by your queries by running:
-#   npx browserslist
 
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+# npx browserslist
+
+last 2 Chrome versions

integration/app/app.component.ts

@@ -1,12 +1,6 @@
-import {
-  AbstractControl,
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup
-} from '@angular/forms';
+import { FormArray, FormBuilder, FormControl } from '@angular/forms';
 import { Component, OnInit } from '@angular/core';
-import { Select, Store } from '@ngxs/store';
+import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 
 import { TodoState } from '@integration/store/todos/todo/todo.state';
@@ -20,73 +14,60 @@ import { Extras, Pizza, Todo } from '@integration/store/todos/todos.model';
   templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit {
-  public allExtras: Extras[];
-  public pizzaForm: UntypedFormGroup;
-  public greeting: string;
-  @Select(TodoState) public todos$: Observable<Todo[]>;
-  @Select(TodoState.pandas) public pandas$: Observable<Todo[]>;
-  @Select(TodosState.pizza) public pizza$: Observable<Pizza>;
-  @Select(TodosState.injected) public injected$: Observable<string>;
+  allExtras: Extras[] = [
+    { name: 'cheese', selected: false },
+    { name: 'mushrooms', selected: false },
+    { name: 'olives', selected: false }
+  ];
 
-  constructor(private store: Store, private formBuilder: UntypedFormBuilder) {}
+  pizzaForm = this._fb.group({
+    toppings: [''],
+    crust: [{ value: 'thin', disabled: true }],
+    extras: this._fb.array(
+      this.allExtras.map((extra: Extras) => this._fb.control(extra.selected))
+    )
+  });
 
-  public get extras(): AbstractControl[] {
-    return (<UntypedFormArray>this.pizzaForm.get('extras')).controls;
-  }
+  greeting: string;
 
-  private get extrasControls(): UntypedFormControl[] {
-    return this.allExtras.map((extra: Extras) => this.formBuilder.control(extra.selected));
-  }
+  todos$: Observable<Todo[]> = this._store.select(TodoState);
+  pandas$: Observable<Todo[]> = this._store.select(TodoState.pandas);
+  pizza$: Observable<Pizza> = this._store.select(TodosState.pizza);
+  injected$: Observable<string> = this._store.select(TodosState.injected);
 
-  private static getAllExtras(): Extras[] {
-    return [
-      { name: 'cheese', selected: false },
-      { name: 'mushrooms', selected: false },
-      { name: 'olives', selected: false }
-    ];
+  constructor(private _store: Store, private _fb: FormBuilder) {}
+
+  get extras() {
+    return (this.pizzaForm.get('extras') as FormArray).controls as FormControl[];
   }
 
-  public ngOnInit(): void {
-    this.allExtras = AppComponent.getAllExtras();
-    this.pizzaForm = this.createPizzaForm();
-    this.addTodoByOnInit();
+  ngOnInit(): void {
+    const payload: Todo = 'ngOnInit todo';
+    const state: Todo[] = this._store.selectSnapshot(TodoState);
+    if (!state.includes(payload)) {
+      this._store.dispatch(new AddTodo(payload));
+    }
   }
 
-  public addTodo(todo: Todo) {
-    this.store.dispatch(new AddTodo(todo));
+  addTodo(todo: Todo) {
+    this._store.dispatch(new AddTodo(todo));
   }
 
-  public removeTodo(index: number) {
-    this.store.dispatch(new RemoveTodo(index)).subscribe(() => {
+  removeTodo(index: number) {
+    this._store.dispatch(new RemoveTodo(index)).subscribe(() => {
       console.log('Removed!');
     });
   }
 
-  public onSubmit() {
+  onSubmit() {
     this.pizzaForm.patchValue({ toppings: 'olives' });
   }
 
-  public onPrefix() {
-    this.store.dispatch(new SetPrefix());
-  }
-
-  public onLoadData() {
-    this.store.dispatch(new LoadData());
-  }
-
-  private createPizzaForm(): UntypedFormGroup {
-    return this.formBuilder.group({
-      toppings: [''],
-      crust: [{ value: 'thin', disabled: true }],
-      extras: this.formBuilder.array(this.extrasControls)
-    });
+  onPrefix() {
+    this._store.dispatch(new SetPrefix());
   }
 
-  private addTodoByOnInit() {
-    const payload: Todo = 'ngOnInit todo';
-    const state: Todo[] = this.store.selectSnapshot(TodoState);
-    if (!state.includes(payload)) {
-      this.store.dispatch(new AddTodo(payload));
-    }
+  onLoadData() {
+    this._store.dispatch(new LoadData());
   }
 }

integration/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@@ -8,11 +9,13 @@ import { NgxsStoreModule } from '@integration/store/store.module';
 
 @NgModule({
   imports: [
+    BrowserModule.withServerTransition({ appId: 'my-app' }),
+    BrowserAnimationsModule,
     FormsModule,
-    NgxsStoreModule,
-    AppRoutingModule,
     ReactiveFormsModule,
-    BrowserModule.withServerTransition({ appId: 'my-app' })
+
+    NgxsStoreModule,
+    AppRoutingModule
   ],
   declarations: [AppComponent],
   bootstrap: [AppComponent]

integration/app/app.server.module.ts

@@ -1,20 +1,12 @@
 import { NgModule } from '@angular/core';
-import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
+import { ServerModule } from '@angular/platform-server';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
 
 import { AppComponent } from '@integration/app.component';
 import { AppModule } from '@integration/app.module';
-import { TodosState } from '@integration/store/todos/todos.state';
 
 @NgModule({
-  imports: [
-    AppModule,
-    ServerModule,
-    NoopAnimationsModule,
-    ServerTransferStateModule,
-    NgxsStoragePluginModule.forRoot({ key: [TodosState] })
-  ],
+  imports: [AppModule, ServerModule, NoopAnimationsModule],
   bootstrap: [AppComponent]
 })
 export class AppServerModule {}

integration/app/list/list.component.html

@@ -4,5 +4,5 @@
 </div>
 
 <div *ngIf="router$ | async as router">
-  animals were resolved {{ router.root.firstChild.firstChild.data.list }}
+  animals were resolved {{ router.root.firstChild?.firstChild?.data?.list }}
 </div>

integration/app/list/list.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Select } from '@ngxs/store';
+import { Store } from '@ngxs/store';
 import { RouterState } from '@ngxs/router-plugin';
 import { Observable } from 'rxjs';
 
@@ -10,7 +10,9 @@ import { ListState } from '@integration/list/list.state';
   templateUrl: './list.component.html'
 })
 export class ListComponent {
-  @Select(ListState) public list$: Observable<string[]>;
-  @Select(ListState.hello) public foo: Observable<string>;
-  @Select(RouterState.state) public router$: Observable<RouterState>;
+  list$: Observable<string[]> = this._store.select(ListState);
+  foo: Observable<string> = this._store.select(ListState.hello);
+  router$ = this._store.select(RouterState.state);
+
+  constructor(private _store: Store) {}
 }