@nx/angular 0.0.0-pr-22179-271588f

package/src/migrations/utils/projects.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProjectsFilteredByDependencies = void 0;
+const devkit_1 = require("@nx/devkit");
+async function getProjectsFilteredByDependencies(tree, dependencies) {
+    const projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+    return Object.entries(projectGraph.dependencies)
+        .filter(([node, deps]) => !projectGraph.externalNodes?.[node] &&
+        deps.some(({ target }) => dependencies.includes(target)))
+        .map(([projectName]) => ({
+        project: (0, devkit_1.readProjectConfiguration)(tree, projectName),
+        graphNode: projectGraph.nodes[projectName],
+    }));
+}
+exports.getProjectsFilteredByDependencies = getProjectsFilteredByDependencies;

package/src/runtime/nx/data-persistence.d.ts

@@ -0,0 +1,271 @@
+import type { Type } from '@angular/core';
+import type { ActivatedRouteSnapshot } from '@angular/router';
+import type { Action } from '@ngrx/store';
+import type { Observable } from 'rxjs';
+export interface PessimisticUpdateOpts<T extends Array<unknown>, A> {
+    run(a: A, ...slices: [...T]): Observable<Action> | Action | void;
+    onError(a: A, e: any): Observable<any> | any;
+}
+export interface OptimisticUpdateOpts<T extends Array<unknown>, A> {
+    run(a: A, ...slices: [...T]): Observable<Action> | Action | void;
+    undoAction(a: A, e: any): Observable<Action> | Action;
+}
+export interface FetchOpts<T extends Array<unknown>, A> {
+    id?(a: A, ...slices: [...T]): any;
+    run(a: A, ...slices: [...T]): Observable<Action> | Action | void;
+    onError?(a: A, e: any): Observable<any> | any;
+}
+export interface HandleNavigationOpts<T extends Array<unknown>> {
+    run(a: ActivatedRouteSnapshot, ...slices: [...T]): Observable<Action> | Action | void;
+    onError?(a: ActivatedRouteSnapshot, e: any): Observable<any> | any;
+}
+export type ActionOrActionWithStates<T extends Array<unknown>, A> = A | [A, ...T];
+export type ActionOrActionWithState<T, A> = ActionOrActionWithStates<[T], A>;
+export type ActionStatesStream<T extends Array<unknown>, A> = Observable<ActionOrActionWithStates<T, A>>;
+export type ActionStateStream<T, A> = Observable<ActionOrActionWithStates<[T], A>>;
+/**
+ *
+ * @whatItDoes Handles pessimistic updates (updating the server first).
+ *
+ * Updating the server, when implemented naively, suffers from race conditions and poor error handling.
+ *
+ * `pessimisticUpdate` addresses these problems. It runs all fetches in order, which removes race conditions
+ * and forces the developer to handle errors.
+ *
+ * ## Example:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   updateTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       ofType('UPDATE_TODO'),
+ *       pessimisticUpdate({
+ *         // provides an action
+ *         run: (action: UpdateTodo) => {
+ *           // update the backend first, and then dispatch an action that will
+ *           // update the client side
+ *           return this.backend.updateTodo(action.todo.id, action.todo).pipe(
+ *             map((updated) => ({
+ *               type: 'UPDATE_TODO_SUCCESS',
+ *               todo: updated,
+ *             }))
+ *           );
+ *         },
+ *         onError: (action: UpdateTodo, error: any) => {
+ *           // we don't need to undo the changes on the client side.
+ *           // we can dispatch an error, or simply log the error here and return `null`
+ *           return null;
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * Note that if you don't return a new action from the run callback, you must set the dispatch property
+ * of the effect to false, like this:
+ *
+ * ```typescript
+ * class TodoEffects {
+ *   updateTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       //...
+ *     ), { dispatch: false }
+ *   );
+ * }
+ * ```
+ *
+ * @param opts
+ */
+export declare function pessimisticUpdate<T extends Array<unknown>, A extends Action>(opts: PessimisticUpdateOpts<T, A>): (source: ActionStatesStream<T, A>) => Observable<Action>;
+/**
+ *
+ * @whatItDoes Handles optimistic updates (updating the client first).
+ *
+ * It runs all fetches in order, which removes race conditions and forces the developer to handle errors.
+ *
+ * When using `optimisticUpdate`, in case of a failure, the developer has already updated the state locally,
+ * so the developer must provide an undo action.
+ *
+ * The error handling must be done in the callback, or by means of the undo action.
+ *
+ * ## Example:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   updateTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       ofType('UPDATE_TODO'),
+ *       optimisticUpdate({
+ *         // provides an action
+ *         run: (action: UpdateTodo) => {
+ *           return this.backend.updateTodo(action.todo.id, action.todo).pipe(
+ *             mapTo({
+ *               type: 'UPDATE_TODO_SUCCESS',
+ *             })
+ *           );
+ *         },
+ *         undoAction: (action: UpdateTodo, error: any) => {
+ *           // dispatch an undo action to undo the changes in the client state
+ *           return {
+ *             type: 'UNDO_TODO_UPDATE',
+ *             todo: action.todo,
+ *           };
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * Note that if you don't return a new action from the run callback, you must set the dispatch property
+ * of the effect to false, like this:
+ *
+ * ```typescript
+ * class TodoEffects {
+ *   updateTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       //...
+ *     ), { dispatch: false }
+ *   );
+ * }
+ * ```
+ *
+ * @param opts
+ */
+export declare function optimisticUpdate<T extends Array<unknown>, A extends Action>(opts: OptimisticUpdateOpts<T, A>): (source: ActionStatesStream<T, A>) => Observable<Action>;
+/**
+ *
+ * @whatItDoes Handles data fetching.
+ *
+ * Data fetching implemented naively suffers from race conditions and poor error handling.
+ *
+ * `fetch` addresses these problems. It runs all fetches in order, which removes race conditions
+ * and forces the developer to handle errors.
+ *
+ * ## Example:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   loadTodos$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       ofType('GET_TODOS'),
+ *       fetch({
+ *         // provides an action
+ *         run: (a: GetTodos) => {
+ *           return this.backend.getAll().pipe(
+ *             map((response) => ({
+ *               type: 'TODOS',
+ *               todos: response.todos,
+ *             }))
+ *           );
+ *         },
+ *         onError: (action: GetTodos, error: any) => {
+ *           // dispatch an undo action to undo the changes in the client state
+ *           return null;
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * This is correct, but because it set the concurrency to 1, it may not be performant.
+ *
+ * To fix that, you can provide the `id` function, like this:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   loadTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       ofType('GET_TODO'),
+ *       fetch({
+ *         id: (todo: GetTodo) => {
+ *           return todo.id;
+ *         },
+ *         // provides an action
+ *         run: (todo: GetTodo) => {
+ *           return this.backend.getTodo(todo.id).map((response) => ({
+ *             type: 'LOAD_TODO_SUCCESS',
+ *             todo: response.todo,
+ *           }));
+ *         },
+ *         onError: (action: GetTodo, error: any) => {
+ *           // dispatch an undo action to undo the changes in the client state
+ *           return null;
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * With this setup, the requests for Todo 1 will run concurrently with the requests for Todo 2.
+ *
+ * In addition, if there are multiple requests for Todo 1 scheduled, it will only run the last one.
+ *
+ * @param opts
+ */
+export declare function fetch<T extends Array<unknown>, A extends Action>(opts: FetchOpts<T, A>): (source: ActionStatesStream<T, A>) => Observable<Action>;
+/**
+ * @whatItDoes Handles data fetching as part of router navigation.
+ *
+ * Data fetching implemented naively suffers from race conditions and poor error handling.
+ *
+ * `navigation` addresses these problems.
+ *
+ * It checks if an activated router state contains the passed in component type, and, if it does, runs the `run`
+ * callback. It provides the activated snapshot associated with the component and the current state. And it only runs
+ * the last request.
+ *
+ * ## Example:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   loadTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       // listens for the routerNavigation action from @ngrx/router-store
+ *       navigation(TodoComponent, {
+ *         run: (activatedRouteSnapshot: ActivatedRouteSnapshot) => {
+ *           return this.backend
+ *             .fetchTodo(activatedRouteSnapshot.params['id'])
+ *             .pipe(
+ *               map((todo) => ({
+ *                 type: 'LOAD_TODO_SUCCESS',
+ *                 todo: todo,
+ *               }))
+ *             );
+ *         },
+ *         onError: (
+ *           activatedRouteSnapshot: ActivatedRouteSnapshot,
+ *           error: any
+ *         ) => {
+ *           // we can log and error here and return null
+ *           // we can also navigate back
+ *           return null;
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * @param component
+ * @param opts
+ */
+export declare function navigation<T extends Array<unknown>, A extends Action>(component: Type<any>, opts: HandleNavigationOpts<T>): (source: ActionStatesStream<T, A>) => Observable<Action>;

package/src/runtime/nx/data-persistence.js

@@ -0,0 +1,350 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navigation = exports.fetch = exports.optimisticUpdate = exports.pessimisticUpdate = void 0;
+const router_store_1 = require("@ngrx/router-store");
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+/**
+ *
+ * @whatItDoes Handles pessimistic updates (updating the server first).
+ *
+ * Updating the server, when implemented naively, suffers from race conditions and poor error handling.
+ *
+ * `pessimisticUpdate` addresses these problems. It runs all fetches in order, which removes race conditions
+ * and forces the developer to handle errors.
+ *
+ * ## Example:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   updateTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       ofType('UPDATE_TODO'),
+ *       pessimisticUpdate({
+ *         // provides an action
+ *         run: (action: UpdateTodo) => {
+ *           // update the backend first, and then dispatch an action that will
+ *           // update the client side
+ *           return this.backend.updateTodo(action.todo.id, action.todo).pipe(
+ *             map((updated) => ({
+ *               type: 'UPDATE_TODO_SUCCESS',
+ *               todo: updated,
+ *             }))
+ *           );
+ *         },
+ *         onError: (action: UpdateTodo, error: any) => {
+ *           // we don't need to undo the changes on the client side.
+ *           // we can dispatch an error, or simply log the error here and return `null`
+ *           return null;
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * Note that if you don't return a new action from the run callback, you must set the dispatch property
+ * of the effect to false, like this:
+ *
+ * ```typescript
+ * class TodoEffects {
+ *   updateTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       //...
+ *     ), { dispatch: false }
+ *   );
+ * }
+ * ```
+ *
+ * @param opts
+ */
+function pessimisticUpdate(opts) {
+    return (source) => {
+        return source.pipe(mapActionAndState(), (0, operators_1.concatMap)(runWithErrorHandling(opts.run, opts.onError)));
+    };
+}
+exports.pessimisticUpdate = pessimisticUpdate;
+/**
+ *
+ * @whatItDoes Handles optimistic updates (updating the client first).
+ *
+ * It runs all fetches in order, which removes race conditions and forces the developer to handle errors.
+ *
+ * When using `optimisticUpdate`, in case of a failure, the developer has already updated the state locally,
+ * so the developer must provide an undo action.
+ *
+ * The error handling must be done in the callback, or by means of the undo action.
+ *
+ * ## Example:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   updateTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       ofType('UPDATE_TODO'),
+ *       optimisticUpdate({
+ *         // provides an action
+ *         run: (action: UpdateTodo) => {
+ *           return this.backend.updateTodo(action.todo.id, action.todo).pipe(
+ *             mapTo({
+ *               type: 'UPDATE_TODO_SUCCESS',
+ *             })
+ *           );
+ *         },
+ *         undoAction: (action: UpdateTodo, error: any) => {
+ *           // dispatch an undo action to undo the changes in the client state
+ *           return {
+ *             type: 'UNDO_TODO_UPDATE',
+ *             todo: action.todo,
+ *           };
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * Note that if you don't return a new action from the run callback, you must set the dispatch property
+ * of the effect to false, like this:
+ *
+ * ```typescript
+ * class TodoEffects {
+ *   updateTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       //...
+ *     ), { dispatch: false }
+ *   );
+ * }
+ * ```
+ *
+ * @param opts
+ */
+function optimisticUpdate(opts) {
+    return (source) => {
+        return source.pipe(mapActionAndState(), (0, operators_1.concatMap)(runWithErrorHandling(opts.run, opts.undoAction)));
+    };
+}
+exports.optimisticUpdate = optimisticUpdate;
+/**
+ *
+ * @whatItDoes Handles data fetching.
+ *
+ * Data fetching implemented naively suffers from race conditions and poor error handling.
+ *
+ * `fetch` addresses these problems. It runs all fetches in order, which removes race conditions
+ * and forces the developer to handle errors.
+ *
+ * ## Example:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   loadTodos$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       ofType('GET_TODOS'),
+ *       fetch({
+ *         // provides an action
+ *         run: (a: GetTodos) => {
+ *           return this.backend.getAll().pipe(
+ *             map((response) => ({
+ *               type: 'TODOS',
+ *               todos: response.todos,
+ *             }))
+ *           );
+ *         },
+ *         onError: (action: GetTodos, error: any) => {
+ *           // dispatch an undo action to undo the changes in the client state
+ *           return null;
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * This is correct, but because it set the concurrency to 1, it may not be performant.
+ *
+ * To fix that, you can provide the `id` function, like this:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   loadTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       ofType('GET_TODO'),
+ *       fetch({
+ *         id: (todo: GetTodo) => {
+ *           return todo.id;
+ *         },
+ *         // provides an action
+ *         run: (todo: GetTodo) => {
+ *           return this.backend.getTodo(todo.id).map((response) => ({
+ *             type: 'LOAD_TODO_SUCCESS',
+ *             todo: response.todo,
+ *           }));
+ *         },
+ *         onError: (action: GetTodo, error: any) => {
+ *           // dispatch an undo action to undo the changes in the client state
+ *           return null;
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * With this setup, the requests for Todo 1 will run concurrently with the requests for Todo 2.
+ *
+ * In addition, if there are multiple requests for Todo 1 scheduled, it will only run the last one.
+ *
+ * @param opts
+ */
+function fetch(opts) {
+    return (source) => {
+        if (opts.id) {
+            const groupedFetches = source.pipe(mapActionAndState(), (0, operators_1.groupBy)(([action, ...store]) => {
+                return opts.id(action, ...store);
+            }));
+            return groupedFetches.pipe((0, operators_1.mergeMap)((pairs) => pairs.pipe((0, operators_1.switchMap)(runWithErrorHandling(opts.run, opts.onError)))));
+        }
+        return source.pipe(mapActionAndState(), (0, operators_1.concatMap)(runWithErrorHandling(opts.run, opts.onError)));
+    };
+}
+exports.fetch = fetch;
+/**
+ * @whatItDoes Handles data fetching as part of router navigation.
+ *
+ * Data fetching implemented naively suffers from race conditions and poor error handling.
+ *
+ * `navigation` addresses these problems.
+ *
+ * It checks if an activated router state contains the passed in component type, and, if it does, runs the `run`
+ * callback. It provides the activated snapshot associated with the component and the current state. And it only runs
+ * the last request.
+ *
+ * ## Example:
+ *
+ * ```typescript
+ * @Injectable()
+ * class TodoEffects {
+ *   loadTodo$ = createEffect(() =>
+ *     this.actions$.pipe(
+ *       // listens for the routerNavigation action from @ngrx/router-store
+ *       navigation(TodoComponent, {
+ *         run: (activatedRouteSnapshot: ActivatedRouteSnapshot) => {
+ *           return this.backend
+ *             .fetchTodo(activatedRouteSnapshot.params['id'])
+ *             .pipe(
+ *               map((todo) => ({
+ *                 type: 'LOAD_TODO_SUCCESS',
+ *                 todo: todo,
+ *               }))
+ *             );
+ *         },
+ *         onError: (
+ *           activatedRouteSnapshot: ActivatedRouteSnapshot,
+ *           error: any
+ *         ) => {
+ *           // we can log and error here and return null
+ *           // we can also navigate back
+ *           return null;
+ *         },
+ *       })
+ *     )
+ *   );
+ *
+ *   constructor(private actions$: Actions, private backend: Backend) {}
+ * }
+ * ```
+ *
+ * @param component
+ * @param opts
+ */
+function navigation(component, opts) {
+    return (source) => {
+        const nav = source.pipe(mapActionAndState(), (0, operators_1.filter)(([action]) => isStateSnapshot(action)), (0, operators_1.map)(([action, ...slices]) => {
+            if (!isStateSnapshot(action)) {
+                // Because of the above filter we'll never get here,
+                // but this properly type narrows `action`
+                return;
+            }
+            return [
+                findSnapshot(component, action.payload.routerState.root),
+                ...slices,
+            ];
+        }), (0, operators_1.filter)(([snapshot]) => !!snapshot));
+        return nav.pipe((0, operators_1.switchMap)(runWithErrorHandling(opts.run, opts.onError)));
+    };
+}
+exports.navigation = navigation;
+function isStateSnapshot(action) {
+    return action.type === router_store_1.ROUTER_NAVIGATION;
+}
+function runWithErrorHandling(run, onError) {
+    return ([action, ...slices]) => {
+        try {
+            const r = wrapIntoObservable(run(action, ...slices));
+            return r.pipe((0, operators_1.catchError)((e) => wrapIntoObservable(onError(action, e))));
+        }
+        catch (e) {
+            return wrapIntoObservable(onError(action, e));
+        }
+    };
+}
+/**
+ * @whatItDoes maps Observable<Action | [Action, State]> to
+ * Observable<[Action, State]>
+ */
+function mapActionAndState() {
+    return (source) => {
+        return source.pipe((0, operators_1.map)((value) => normalizeActionAndState(value)));
+    };
+}
+/**
+ * @whatItDoes Normalizes either a bare action or an array of action and slices
+ * into an array of action and slices (or undefined)
+ */
+function normalizeActionAndState(args) {
+    let action, slices;
+    if (args instanceof Array) {
+        [action, ...slices] = args;
+    }
+    else {
+        slices = [];
+        action = args;
+    }
+    return [action, ...slices];
+}
+function findSnapshot(component, s) {
+    if (s.routeConfig && s.routeConfig.component === component) {
+        return s;
+    }
+    for (const c of s.children) {
+        const ss = findSnapshot(component, c);
+        if (ss) {
+            return ss;
+        }
+    }
+    return null;
+}
+function wrapIntoObservable(obj) {
+    if ((0, rxjs_1.isObservable)(obj)) {
+        return obj;
+    }
+    else if (!obj) {
+        return (0, rxjs_1.of)();
+    }
+    else {
+        return (0, rxjs_1.of)(obj);
+    }
+}

package/src/utils/backward-compatible-versions.d.ts

@@ -0,0 +1,8 @@
+import * as latestVersions from './versions';
+type SupportedVersions = 'angularV15' | 'angularV16';
+export type LatestPackageVersionNames = Exclude<keyof typeof latestVersions, 'nxVersion'>;
+export type CompatPackageVersionNames = LatestPackageVersionNames | 'ngUniversalVersion';
+export type PackageLatestVersions = Record<LatestPackageVersionNames, string>;
+export type PackageCompatVersions = Record<CompatPackageVersionNames, string>;
+export declare const backwardCompatibleVersions: Record<SupportedVersions, PackageCompatVersions>;
+export {};

package/src/utils/backward-compatible-versions.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backwardCompatibleVersions = void 0;
+exports.backwardCompatibleVersions = {
+    angularV15: {
+        angularVersion: '~15.2.0',
+        angularDevkitVersion: '~15.2.0',
+        ngPackagrVersion: '~15.2.2',
+        ngrxVersion: '~15.3.0',
+        rxjsVersion: '~7.8.0',
+        zoneJsVersion: '~0.12.0',
+        angularJsVersion: '1.7.9',
+        tsLibVersion: '^2.3.0',
+        ngUniversalVersion: '~15.1.0',
+        corsVersion: '~2.8.5',
+        typesCorsVersion: '~2.8.5',
+        expressVersion: '~4.18.2',
+        typesExpressVersion: '4.17.14',
+        browserSyncVersion: '^3.0.0',
+        moduleFederationNodeVersion: '~1.0.5',
+        angularEslintVersion: '~15.0.0',
+        tailwindVersion: '^3.0.2',
+        postcssVersion: '^8.4.5',
+        postcssUrlVersion: '~10.1.3',
+        autoprefixerVersion: '^10.4.0',
+        tsNodeVersion: '10.9.1',
+        jestPresetAngularVersion: '~13.0.0',
+        typesNodeVersion: '16.11.7',
+        jasmineMarblesVersion: '^0.9.2',
+        jsoncEslintParserVersion: '^2.1.0',
+    },
+    angularV16: {
+        angularVersion: '~16.2.0',
+        angularDevkitVersion: '~16.2.0',
+        ngPackagrVersion: '~16.2.0',
+        ngrxVersion: '~16.0.0',
+        rxjsVersion: '~7.8.0',
+        zoneJsVersion: '~0.13.0',
+        angularJsVersion: '1.7.9',
+        tsLibVersion: '^2.3.0',
+        ngUniversalVersion: '~16.2.0',
+        corsVersion: '~2.8.5',
+        typesCorsVersion: '~2.8.5',
+        expressVersion: '~4.18.2',
+        typesExpressVersion: '4.17.14',
+        browserSyncVersion: '^3.0.0',
+        moduleFederationNodeVersion: '~1.0.5',
+        angularEslintVersion: '~16.0.0',
+        tailwindVersion: '^3.0.2',
+        postcssVersion: '^8.4.5',
+        postcssUrlVersion: '~10.1.3',
+        autoprefixerVersion: '^10.4.0',
+        tsNodeVersion: '10.9.1',
+        jestPresetAngularVersion: '~13.1.0',
+        typesNodeVersion: '16.11.7',
+        jasmineMarblesVersion: '^0.9.2',
+        jsoncEslintParserVersion: '^2.1.0',
+    },
+};