refactor: move libs

apps/ngrx/2-effect-vs-selector/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

apps/ngrx/2-effect-vs-selector/README.md

@@ -0,0 +1,13 @@
+# Effect vs Selector
+
+> author: thomas-laforge
+
+### Run Application
+
+```bash
+npx nx serve ngrx-effect-vs-selector
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/ngrx/2-effect-selector/).

apps/ngrx/2-effect-vs-selector/jest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'ngrx-effect-vs-selector',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../../coverage/apps/ngrx/2-effect-vs-selector',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

apps/ngrx/2-effect-vs-selector/project.json

@@ -0,0 +1,83 @@
+{
+  "name": "ngrx-effect-vs-selector",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/ngrx/2-effect-vs-selector/src",
+  "prefix": "app",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:browser",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/ngrx/2-effect-vs-selector",
+        "index": "apps/ngrx/2-effect-vs-selector/src/index.html",
+        "main": "apps/ngrx/2-effect-vs-selector/src/main.ts",
+        "polyfills": "apps/ngrx/2-effect-vs-selector/src/polyfills.ts",
+        "tsConfig": "apps/ngrx/2-effect-vs-selector/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/ngrx/2-effect-vs-selector/src/favicon.ico",
+          "apps/ngrx/2-effect-vs-selector/src/assets"
+        ],
+        "styles": ["apps/ngrx/2-effect-vs-selector/src/styles.scss"],
+        "scripts": [],
+        "allowedCommonJsDependencies": ["seedrandom"]
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "ngrx-effect-vs-selector:build:production"
+        },
+        "development": {
+          "buildTarget": "ngrx-effect-vs-selector:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "ngrx-effect-vs-selector:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/ngrx/2-effect-vs-selector/jest.config.ts"
+      }
+    }
+  },
+  "tags": []
+}

apps/ngrx/2-effect-vs-selector/src/app/app.component.ts

@@ -0,0 +1,72 @@
+import { AsyncPipe, NgFor } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  inject,
+} from '@angular/core';
+import { Store } from '@ngrx/store';
+import { loadActivities } from './store/activity/activity.actions';
+import { ActivityType } from './store/activity/activity.model';
+import { selectActivities } from './store/activity/activity.selectors';
+import { loadStatuses } from './store/status/status.actions';
+import { selectAllTeachersByActivityType } from './store/status/status.selectors';
+import { loadUsers } from './store/user/user.actions';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [NgFor, AsyncPipe],
+  template: `
+    <h1>Activity Board</h1>
+    <section>
+      <div class="card" *ngFor="let activity of activities$ | async">
+        <h2>Activity Name: {{ activity.name }}</h2>
+        <p>Main teacher: {{ activity.teacher.name }}</p>
+        <span>All teachers available for : {{ activity.type }} are</span>
+        <ul>
+          <li
+            *ngFor="
+              let teacher of getAllTeachersForActivityType$(activity.type)
+                | async
+            ">
+            {{ teacher.name }}
+          </li>
+        </ul>
+      </div>
+    </section>
+  `,
+  styles: [
+    `
+      section {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 2px;
+      }
+
+      .card {
+        display: flex;
+        flex-direction: column;
+        border: solid;
+        border-width: 1px;
+        border-color: black;
+        padding: 2px;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent implements OnInit {
+  private store = inject(Store);
+
+  activities$ = this.store.select(selectActivities);
+
+  ngOnInit(): void {
+    this.store.dispatch(loadActivities());
+    this.store.dispatch(loadUsers());
+    this.store.dispatch(loadStatuses());
+  }
+
+  getAllTeachersForActivityType$ = (type: ActivityType) =>
+    this.store.select(selectAllTeachersByActivityType(type));
+}

apps/ngrx/2-effect-vs-selector/src/app/app.config.ts

@@ -0,0 +1,27 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideEffects } from '@ngrx/effects';
+import { provideStore } from '@ngrx/store';
+import { ActivityEffects } from './store/activity/activity.effects';
+import {
+  activityFeatureKey,
+  activityReducer,
+} from './store/activity/activity.reducer';
+import { StatusEffects } from './store/status/status.effects';
+import { UserEffects } from './store/user/user.effects';
+
+import { statusFeatureKey, statusReducer } from './store/status/status.reducer';
+
+import { userFeatureKey, userReducer } from './store/user/user.reducer';
+
+const reducers = {
+  [statusFeatureKey]: statusReducer,
+  [activityFeatureKey]: activityReducer,
+  [userFeatureKey]: userReducer,
+};
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideStore(reducers),
+    provideEffects([ActivityEffects, UserEffects, StatusEffects]),
+  ],
+};

apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.actions.ts

@@ -0,0 +1,14 @@
+import { createAction, props } from '@ngrx/store';
+import { Activity } from './activity.model';
+
+export const loadActivities = createAction('[Activity Effect] Load Activities');
+
+export const loadActivitiesSuccess = createAction(
+  '[Activity Effect] Load Activities Success',
+  props<{ activities: Activity[] }>(),
+);
+
+export const loadActivitiesFailure = createAction(
+  '[Activity Effect] Load Activities Failure',
+  props<{ error: unknown }>(),
+);

apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.effects.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { of } from 'rxjs';
+import { catchError, concatMap, map } from 'rxjs/operators';
+import * as ActivityActions from './activity.actions';
+import { ActivityService } from './activity.service';
+
+@Injectable()
+export class ActivityEffects {
+  loadActivities$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(ActivityActions.loadActivities),
+      concatMap(() =>
+        this.ActivityService.fetchActivities().pipe(
+          map((activities) =>
+            ActivityActions.loadActivitiesSuccess({ activities }),
+          ),
+          catchError((error) =>
+            of(ActivityActions.loadActivitiesFailure({ error })),
+          ),
+        ),
+      ),
+    );
+  });
+
+  constructor(
+    private actions$: Actions,
+    private ActivityService: ActivityService,
+  ) {}
+}

apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.model.ts

@@ -0,0 +1,55 @@
+import {
+  incrementalNumber,
+  rand,
+  randFirstName,
+  randText,
+} from '@ngneat/falso';
+
+export const activityType = [
+  'Sport',
+  'Sciences',
+  'History',
+  'Maths',
+  'Physics',
+] as const;
+export type ActivityType = (typeof activityType)[number];
+
+export interface Person {
+  id: number;
+  name: string;
+}
+
+export interface Activity {
+  id: number;
+  name: string;
+  type: ActivityType;
+  teacher: Person;
+}
+
+const factoryPerson = incrementalNumber();
+
+export const randPerson = () => ({
+  id: factoryPerson(),
+  name: randFirstName(),
+});
+
+const factoryActivity = incrementalNumber();
+
+export const randActivity = (): Activity => ({
+  id: factoryActivity(),
+  name: randText(),
+  type: rand(activityType),
+  teacher: randPerson(),
+});
+
+export const activities: Activity[] = [
+  randActivity(),
+  randActivity(),
+  randActivity(),
+  randActivity(),
+  randActivity(),
+  randActivity(),
+  randActivity(),
+  randActivity(),
+  randActivity(),
+];

apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.reducer.ts

@@ -0,0 +1,25 @@
+import { createReducer, on } from '@ngrx/store';
+import * as ActivityActions from './activity.actions';
+import { Activity } from './activity.model';
+
+export const activityFeatureKey = 'Activity';
+
+export interface ActivityState {
+  activities: Activity[];
+}
+
+export const initialState: ActivityState = {
+  activities: [],
+};
+
+export const activityReducer = createReducer(
+  initialState,
+  on(ActivityActions.loadActivitiesSuccess, (state, { activities }) => ({
+    ...state,
+    activities,
+  })),
+  on(ActivityActions.loadActivitiesFailure, (state) => ({
+    state,
+    activities: [],
+  })),
+);

apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.selectors.ts

@@ -0,0 +1,10 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { ActivityState, activityFeatureKey } from './activity.reducer';
+
+export const selectActivityState =
+  createFeatureSelector<ActivityState>(activityFeatureKey);
+
+export const selectActivities = createSelector(
+  selectActivityState,
+  (state) => state.activities,
+);

apps/ngrx/2-effect-vs-selector/src/app/store/activity/activity.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { map, timer } from 'rxjs';
+import { activities } from './activity.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ActivityService {
+  fetchActivities = () => timer(500).pipe(map(() => activities));
+}

apps/ngrx/2-effect-vs-selector/src/app/store/status/status.actions.ts

@@ -0,0 +1,9 @@
+import { createAction, props } from '@ngrx/store';
+import { Status } from './status.model';
+
+export const loadStatuses = createAction('[Status] Load Statuses');
+
+export const loadStatusesSuccess = createAction(
+  '[Status] Load Statuses Success',
+  props<{ statuses: Status[] }>(),
+);

apps/ngrx/2-effect-vs-selector/src/app/store/status/status.effects.ts

@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
+import { combineLatest, concatMap, map } from 'rxjs';
+import { selectActivities } from '../activity/activity.selectors';
+import { selectUser } from '../user/user.selectors';
+import * as StatusActions from './status.actions';
+import { Status } from './status.model';
+
+@Injectable()
+export class StatusEffects {
+  loadStatuses$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(StatusActions.loadStatuses),
+      concatMap(() =>
+        combineLatest([
+          this.store.select(selectUser),
+          this.store.select(selectActivities),
+        ]).pipe(
+          map(([user, activities]): Status[] => {
+            if (user?.isAdmin) {
+              return activities.reduce(
+                (status: Status[], activity): Status[] => {
+                  const index = status.findIndex(
+                    (s) => s.name === activity.type,
+                  );
+                  if (index === -1) {
+                    return [
+                      ...status,
+                      { name: activity.type, teachers: [activity.teacher] },
+                    ];
+                  } else {
+                    status[index].teachers.push(activity.teacher);
+                    return status;
+                  }
+                },
+                [],
+              );
+            }
+            return [];
+          }),
+          map((statuses) => StatusActions.loadStatusesSuccess({ statuses })),
+        ),
+      ),
+    );
+  });
+
+  constructor(
+    private actions$: Actions,
+    private store: Store,
+  ) {}
+}

apps/ngrx/2-effect-vs-selector/src/app/store/status/status.model.ts

@@ -0,0 +1,6 @@
+import { ActivityType, Person } from '../activity/activity.model';
+
+export interface Status {
+  name: ActivityType;
+  teachers: Person[];
+}

apps/ngrx/2-effect-vs-selector/src/app/store/status/status.reducer.ts

@@ -0,0 +1,29 @@
+import { createReducer, on } from '@ngrx/store';
+import { ActivityType, Person } from '../activity/activity.model';
+import * as StatusActions from './status.actions';
+import { Status } from './status.model';
+
+export const statusFeatureKey = 'status';
+
+export interface StatusState {
+  statuses: Status[];
+  teachersMap: Map<ActivityType, Person[]>;
+}
+
+export const initialState: StatusState = {
+  statuses: [],
+  teachersMap: new Map(),
+};
+
+export const statusReducer = createReducer(
+  initialState,
+  on(StatusActions.loadStatusesSuccess, (state, { statuses }): StatusState => {
+    const map = new Map();
+    statuses.forEach((s) => map.set(s.name, s.teachers));
+    return {
+      ...state,
+      statuses,
+      teachersMap: map,
+    };
+  }),
+);

apps/ngrx/2-effect-vs-selector/src/app/store/status/status.selectors.ts

@@ -0,0 +1,17 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { ActivityType } from '../activity/activity.model';
+import { StatusState, statusFeatureKey } from './status.reducer';
+
+export const selectStatusState =
+  createFeatureSelector<StatusState>(statusFeatureKey);
+
+export const selectStatuses = createSelector(
+  selectStatusState,
+  (state) => state.statuses,
+);
+
+export const selectAllTeachersByActivityType = (name: ActivityType) =>
+  createSelector(
+    selectStatusState,
+    (state) => state.teachersMap.get(name) ?? [],
+  );

apps/ngrx/2-effect-vs-selector/src/app/store/user/user.actions.ts

@@ -0,0 +1,14 @@
+import { createAction, props } from '@ngrx/store';
+import { User } from './user.model';
+
+export const loadUsers = createAction('[User] Load Users');
+
+export const loadUsersSuccess = createAction(
+  '[User] Load Users Success',
+  props<{ user: User }>(),
+);
+
+export const loadUsersFailure = createAction(
+  '[User] Load Users Failure',
+  props<{ error: unknown }>(),
+);

apps/ngrx/2-effect-vs-selector/src/app/store/user/user.effects.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { of } from 'rxjs';
+import { catchError, concatMap, map } from 'rxjs/operators';
+import * as UserActions from './user.actions';
+import { UserService } from './user.service';
+
+@Injectable()
+export class UserEffects {
+  loadUsers$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(UserActions.loadUsers),
+      concatMap(() =>
+        this.userService.fetchUser().pipe(
+          map((user) => UserActions.loadUsersSuccess({ user })),
+          catchError((error) => of(UserActions.loadUsersFailure({ error }))),
+        ),
+      ),
+    );
+  });
+
+  constructor(
+    private actions$: Actions,
+    private userService: UserService,
+  ) {}
+}

apps/ngrx/2-effect-vs-selector/src/app/store/user/user.model.ts

@@ -0,0 +1,15 @@
+import { randFirstName, randLastName, randText } from '@ngneat/falso';
+
+export interface User {
+  firstname: string;
+  lastname: string;
+  isAdmin: boolean;
+  apiKey: string;
+}
+
+export const user: User = {
+  firstname: randFirstName(),
+  lastname: randLastName(),
+  isAdmin: true,
+  apiKey: randText(),
+};

apps/ngrx/2-effect-vs-selector/src/app/store/user/user.reducer.ts

@@ -0,0 +1,19 @@
+import { createReducer, on } from '@ngrx/store';
+import * as UserActions from './user.actions';
+import { User } from './user.model';
+
+export const userFeatureKey = 'user';
+
+export interface UserState {
+  user?: User;
+}
+
+export const initialState: UserState = {
+  user: undefined,
+};
+
+export const userReducer = createReducer(
+  initialState,
+  on(UserActions.loadUsersSuccess, (state, { user }) => ({ ...state, user })),
+  on(UserActions.loadUsersFailure, (state) => ({ ...state, user: undefined })),
+);

apps/ngrx/2-effect-vs-selector/src/app/store/user/user.selectors.ts

@@ -0,0 +1,9 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { UserState, userFeatureKey } from './user.reducer';
+
+export const selectUserState = createFeatureSelector<UserState>(userFeatureKey);
+
+export const selectUser = createSelector(
+  selectUserState,
+  (state) => state.user,
+);

apps/ngrx/2-effect-vs-selector/src/app/store/user/user.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { map, timer } from 'rxjs';
+import { user } from './user.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+  fetchUser = () => timer(500).pipe(map(() => user));
+}

apps/ngrx/2-effect-vs-selector/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Ngrx1</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/ngrx/2-effect-vs-selector/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig);

apps/ngrx/2-effect-vs-selector/src/polyfills.ts

@@ -0,0 +1,52 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

apps/ngrx/2-effect-vs-selector/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

apps/ngrx/2-effect-vs-selector/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [],
+    "target": "ES2022",
+    "useDefineForClassFields": false
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
+}

apps/ngrx/2-effect-vs-selector/tsconfig.editor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "types": ["jest", "node"]
+  }
+}

apps/ngrx/2-effect-vs-selector/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    }
+  ],
+  "compilerOptions": {
+    "target": "es2020",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

apps/ngrx/2-effect-vs-selector/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}