diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000..c08777b6
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,108 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  ignorePatterns: ["node_modules/"],
+  parserOptions: {
+    createDefaultProgram: true
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    jest: true
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    "plugin:markdown/recommended"
+  ],
+  plugins: [
+    '@typescript-eslint',
+    'import'
+  ],
+  overrides: [
+    {
+      files: ['*.ts', '*.js'],
+      parserOptions: {
+        project: require.resolve('./tsconfig.json'),
+        createDefaultProgram: true,
+      }
+    }
+  ],
+  rules: {
+    complexity: ['error', { max: 25 }],
+    'no-console': ['error'],
+    '@typescript-eslint/no-unused-vars': ['error', { args: 'after-used' }],
+    '@typescript-eslint/no-use-before-define': [
+      'error',
+      { functions: false, classes: true, variables: true, typedefs: true },
+    ],
+    '@typescript-eslint/return-await': 'error',
+    'no-return-await': 'off',
+    '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+    // ERRORS OF plugin:@typescript-eslint/recommended
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    // END ERRORS OF plugin:@typescript-eslint/recommended
+
+    // ERRORS OF 'plugin:promise/recommended'
+    'promise/always-return': 'off',
+    'promise/no-nesting': 'off',
+    // END ERRORS OF 'plugin:promise/recommended'
+    'import/prefer-default-export': 'off', // typescript works better without default export
+    'import/export': 'off', // typescript does allow multiple export default when overloading. not sure why it's enabled here. rule source: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/export.md
+    'prefer-object-spread': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    'import/no-cycle': 'off',
+    'import/no-useless-path-segments': 'off',
+    'no-restricted-imports': [
+      'error',
+      {
+        name: '@teambit/ui-foundation.ui.react-router.link',
+        message: 'use @teambit/base-ui.routing.link',
+      },
+      {
+        name: '@teambit/ui-foundation.ui.react-router.nav-link',
+        message: 'use @teambit/base-ui.routing.nav-link',
+      },
+    ],
+    'lines-between-class-members': 'off',
+    radix: 'off',
+    'no-underscore-dangle': 'off',
+    'no-param-reassign': 'off',
+    'no-return-assign': [0, 'except-parens'],
+    'class-methods-use-this': 'off',
+    // 'simple-import-sort/sort': 'error',
+    // 'sort-imports': 'off',
+    // 'import/first': 'error',
+    // 'import/newline-after-import': 'error',
+    'import/no-duplicates': 'error',
+    'prefer-destructuring': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'no-restricted-syntax': [2, 'ForInStatement', 'LabeledStatement', 'WithStatement'],
+    'no-unused-expressions': 'off',
+    'max-len': [
+      2,
+      200,
+      2,
+      {
+        ignoreUrls: true,
+        ignoreComments: true,
+        ignoreRegExpLiterals: true,
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
+      },
+    ],
+    'max-lines': [2, 1800],
+    'func-names': [0],
+
+    // ERRORS OF plugin:react/recommended
+    'react/no-unescaped-entities': 'off',
+  }
+};
diff --git a/angular/devkit/ng-compat/build-angular/browser-schema.ts b/angular/devkit/ng-compat/build-angular/browser-schema.ts
new file mode 100644
index 00000000..cc3fb24a
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/browser-schema.ts
@@ -0,0 +1,7 @@
+import { VERSION } from '@angular/cli';
+
+export let BrowserBuilderSchema: any;
+
+if (Number(VERSION.major) > 12) {
+  BrowserBuilderSchema = require('@angular-devkit/build-angular/src/builders/browser/schema').Schema;
+}
diff --git a/angular/devkit/ng-compat/build-angular/index-html-webpack-plugin.ts b/angular/devkit/ng-compat/build-angular/index-html-webpack-plugin.ts
new file mode 100644
index 00000000..e9cb4a17
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/index-html-webpack-plugin.ts
@@ -0,0 +1,9 @@
+import { VERSION } from '@angular/cli';
+
+export let IndexHtmlWebpackPlugin: any;
+if (VERSION.major === '16' && Number(VERSION.minor) >= 2) {
+  // 16.2+
+  IndexHtmlWebpackPlugin = require('@angular-devkit/build-angular/src/tools/webpack/plugins/index-html-webpack-plugin').IndexHtmlWebpackPlugin;
+} else {
+  IndexHtmlWebpackPlugin = require('@angular-devkit/build-angular/src/webpack/plugins/index-html-webpack-plugin').IndexHtmlWebpackPlugin;
+}
diff --git a/angular/devkit/ng-compat/build-angular/server-schema.ts b/angular/devkit/ng-compat/build-angular/server-schema.ts
new file mode 100644
index 00000000..d3778023
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/server-schema.ts
@@ -0,0 +1,7 @@
+import { VERSION } from '@angular/cli';
+
+export let OutputHashing: any;
+
+if (VERSION.major === '12') {
+  OutputHashing = require('@angular-devkit/build-angular/src/server/schema').OutputHashing;
+}
diff --git a/angular/devkit/ng-compat/build-angular/utils/index.ts b/angular/devkit/ng-compat/build-angular/utils/index.ts
new file mode 100644
index 00000000..31891a37
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/utils/index.ts
@@ -0,0 +1,18 @@
+import { json, logging } from '@angular-devkit/core';
+import { VERSION } from '@angular/cli';
+import { BrowserBuilderSchema } from '../browser-schema';
+
+export * from './normalize-cache';
+export * from './package-chunk-sort';
+export * from './webpack-browser-config';
+
+export let normalizeBrowserSchema: (workspaceRoot: string, projectRoot: string, projectSourceRoot: string | undefined, options: typeof BrowserBuilderSchema, metadata?: json.JsonObject, logger?: logging.LoggerApi) => any;
+export let normalizeOptimization: (optimization?: any) => any;
+export let BuildBrowserFeatures: any;
+
+if (VERSION.major) {
+  const utils = require('@angular-devkit/build-angular/src/utils');
+  normalizeBrowserSchema = utils.normalizeBrowserSchema;
+  normalizeOptimization = utils.normalizeOptimization;
+  BuildBrowserFeatures = utils.BuildBrowserFeatures;
+}
diff --git a/angular/devkit/ng-compat/build-angular/utils/normalize-cache.ts b/angular/devkit/ng-compat/build-angular/utils/normalize-cache.ts
new file mode 100644
index 00000000..00d4cc53
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/utils/normalize-cache.ts
@@ -0,0 +1,8 @@
+import { VERSION } from '@angular/cli';
+import { json } from '@angular-devkit/core';
+
+
+export let normalizeCacheOptions: (metadata: json.JsonObject, worspaceRoot: string) => any;
+if (Number(VERSION.major) > 12) {
+  normalizeCacheOptions = require('@angular-devkit/build-angular/src/utils/normalize-cache').normalizeCacheOptions;
+}
diff --git a/angular/devkit/ng-compat/build-angular/utils/package-chunk-sort.ts b/angular/devkit/ng-compat/build-angular/utils/package-chunk-sort.ts
new file mode 100644
index 00000000..9c2277ff
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/utils/package-chunk-sort.ts
@@ -0,0 +1,11 @@
+import { VERSION } from '@angular/cli';
+
+export let generateEntryPoints: (options: {
+  styles: any[];
+  scripts: any[];
+  isHMREnabled?: boolean;
+}) => any[];
+
+if (VERSION.major) {
+  generateEntryPoints = require('@angular-devkit/build-angular/src/utils/package-chunk-sort').generateEntryPoints;
+}
diff --git a/angular/devkit/ng-compat/build-angular/utils/webpack-browser-config.ts b/angular/devkit/ng-compat/build-angular/utils/webpack-browser-config.ts
new file mode 100644
index 00000000..d905b5cd
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/utils/webpack-browser-config.ts
@@ -0,0 +1,34 @@
+import { logging } from '@angular-devkit/core';
+import { VERSION } from '@angular/cli';
+import { Configuration } from '@teambit/webpack';
+import { BrowserBuilderSchema } from '../browser-schema';
+
+type wbConfigFn = (
+  workspaceRoot: string,
+  projectRoot: string,
+  sourceRoot: string | undefined,
+  projectName: string,
+  options: any,
+  webpackPartialGenerator: any,
+  logger: logging.LoggerApi,
+  extraBuildOptions: Partial<any>
+) => Promise<Configuration>;
+
+type wbConfigFnV12 = (
+  workspaceRoot: string,
+  projectRoot: string,
+  sourceRoot: string | undefined,
+  options: any,
+  webpackPartialGenerator: any,
+  logger: logging.LoggerApi,
+  extraBuildOptions: Partial<any>
+) => Promise<Configuration>;
+
+export let generateWebpackConfig: wbConfigFn & wbConfigFnV12;
+export let getIndexOutputFile: (index: typeof BrowserBuilderSchema['index']) => string;
+
+if (VERSION.major) {
+  const webpackBrowserConfig = require('@angular-devkit/build-angular/src/utils/webpack-browser-config');
+  generateWebpackConfig = webpackBrowserConfig.generateWebpackConfig;
+  getIndexOutputFile = webpackBrowserConfig.getIndexOutputFile;
+}
diff --git a/angular/devkit/ng-compat/build-angular/webpack/configs.ts b/angular/devkit/ng-compat/build-angular/webpack/configs.ts
new file mode 100644
index 00000000..939cdf81
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/webpack/configs.ts
@@ -0,0 +1,20 @@
+import type { Configuration } from 'webpack';
+import { VERSION } from '@angular/cli';
+
+type configFn = (wco: any) => Promise<Configuration> | Configuration;
+let configs: any;
+if (VERSION.major === '16' && Number(VERSION.minor) >= 2) {
+  // 16.2+
+  configs = require('@angular-devkit/build-angular/src/tools/webpack/configs');
+} else {
+  configs = require('@angular-devkit/build-angular/src/webpack/configs');
+}
+
+export const getCommonConfig: configFn = configs.getCommonConfig;
+export const getDevServerConfig: configFn = configs.getDevServerConfig;
+export const getStylesConfig: configFn = configs.getStylesConfig;
+
+// Angular v12, undefined for other versions
+export const getBrowserConfig: configFn = configs.getBrowserConfig;
+export const getStatsConfig: (wco: any) => { stats: any } = configs.getStatsConfig;
+export const getTypeScriptConfig: configFn = configs.getTypeScriptConfig;
diff --git a/angular/devkit/ng-compat/build-angular/webpack/index.ts b/angular/devkit/ng-compat/build-angular/webpack/index.ts
new file mode 100644
index 00000000..3043751e
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/webpack/index.ts
@@ -0,0 +1,2 @@
+export * from './configs';
+export * from './stats';
diff --git a/angular/devkit/ng-compat/build-angular/webpack/stats.ts b/angular/devkit/ng-compat/build-angular/webpack/stats.ts
new file mode 100644
index 00000000..9684d1a9
--- /dev/null
+++ b/angular/devkit/ng-compat/build-angular/webpack/stats.ts
@@ -0,0 +1,12 @@
+import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
+import { logging } from '@angular-devkit/core';
+import { VERSION } from '@angular/cli';
+import { BrowserBuilderSchema } from '../browser-schema';
+
+export let createWebpackLoggingCallback: (options: typeof BrowserBuilderSchema, logger: logging.LoggerApi) => WebpackLoggingCallback;
+
+if (VERSION.major === '16' && Number(VERSION.minor) >= 2) {
+  createWebpackLoggingCallback = require('@angular-devkit/build-angular/src/tools/webpack/utils/stats').createWebpackLoggingCallback;
+} else {
+  createWebpackLoggingCallback = require('@angular-devkit/build-angular/src/webpack/utils/stats').createWebpackLoggingCallback;
+}
diff --git a/angular/devkit/ng-compat/component.json b/angular/devkit/ng-compat/component.json
new file mode 100644
index 00000000..6704c50e
--- /dev/null
+++ b/angular/devkit/ng-compat/component.json
@@ -0,0 +1,21 @@
+{
+  "componentId": {
+    "scope": "bitdev.angular",
+    "name": "dev-services/ng-compat"
+  },
+  "propagate": true,
+  "extensions": {
+    "teambit.dependencies/dependency-resolver": {
+      "policy": {
+        "dependencies": {
+        },
+        "peerDependencies": {
+          "@angular-devkit/build-angular": ">= 0.0.1",
+          "@angular/cli": ">= 8.0.0",
+          "webpack": ">= 4.44.2"
+        }
+      }
+    },
+    "teambit.node/node@1.0.16": {}
+  }
+}
diff --git a/angular/devkit/ng-compat/index.ts b/angular/devkit/ng-compat/index.ts
new file mode 100644
index 00000000..ecb367c3
--- /dev/null
+++ b/angular/devkit/ng-compat/index.ts
@@ -0,0 +1,4 @@
+export * from './build-angular/index-html-webpack-plugin';
+export * from './build-angular/webpack';
+export * from './build-angular/utils';
+export * from './build-angular/browser-schema';
diff --git a/angular/devkit/preview/preview/angular-preview.ts b/angular/devkit/preview/preview/angular-preview.ts
index 3b55bee3..b686eac4 100644
--- a/angular/devkit/preview/preview/angular-preview.ts
+++ b/angular/devkit/preview/preview/angular-preview.ts
@@ -5,7 +5,7 @@ import { AsyncEnvHandler, EnvHandler } from '@teambit/envs';
 import { EnvPreviewConfig, Preview } from '@teambit/preview';
 import { WebpackConfigTransformer, WebpackConfigWithDevServer } from '@teambit/webpack';
 import objectHash from 'object-hash';
-import { Configuration } from 'webpack';
+import type { Configuration } from 'webpack';
 // Make sure bit recognizes the dependencies
 import 'webpack-dev-server';
 
diff --git a/angular/devkit/preview/preview/component.json b/angular/devkit/preview/preview/component.json
index af8a640c..3db3ba78 100644
--- a/angular/devkit/preview/preview/component.json
+++ b/angular/devkit/preview/preview/component.json
@@ -21,6 +21,8 @@
           "@angular/platform-browser-dynamic": ">= 8.0.0",
           "rxjs": "^6.5.5 || ^7.4.0",
           "typescript": ">= 3.5.3",
+          "webpack": ">= 4.44.2",
+          "webpack-dev-server": ">= 3.11.2",
           "zone.js": ">= 0.9.1"
         }
       }
diff --git a/angular/devkit/webpack/component.json b/angular/devkit/webpack/component.json
index 99a12604..fff91795 100644
--- a/angular/devkit/webpack/component.json
+++ b/angular/devkit/webpack/component.json
@@ -12,7 +12,8 @@
         },
         "peerDependencies": {
           "@angular-devkit/build-angular": ">= 0.0.1",
-          "typescript": ">= 3.5.3"
+          "typescript": ">= 3.5.3",
+          "webpack": ">= 4.44.2"
         },
         "devDependencies": {
           "@babel/runtime": "7.22.15"
diff --git a/angular/devkit/webpack/ng-webpack-bundler.ts b/angular/devkit/webpack/ng-webpack-bundler.ts
index 1839fd2b..bc6e4617 100644
--- a/angular/devkit/webpack/ng-webpack-bundler.ts
+++ b/angular/devkit/webpack/ng-webpack-bundler.ts
@@ -27,7 +27,7 @@ import {
 } from '@teambit/webpack';
 import { generateTransformers, runTransformers } from '@teambit/webpack.webpack-bundler';
 import { join } from 'path';
-import { Configuration, WebpackPluginInstance } from 'webpack';
+import type { Configuration, WebpackPluginInstance } from 'webpack';
 import { WebpackConfigFactoryOpts } from './utils';
 import { StatsLoggerPlugin } from './webpack-plugins/stats-logger';
 
diff --git a/angular/devkit/webpack/ng-webpack-dev-server.ts b/angular/devkit/webpack/ng-webpack-dev-server.ts
index 6a576409..8747cf61 100644
--- a/angular/devkit/webpack/ng-webpack-dev-server.ts
+++ b/angular/devkit/webpack/ng-webpack-dev-server.ts
@@ -28,7 +28,7 @@ import {
 } from '@teambit/webpack';
 import { generateTransformers, runTransformers } from '@teambit/webpack.webpack-bundler';
 import { join, posix } from 'path';
-import { Configuration } from 'webpack';
+import type { Configuration } from 'webpack';
 import { WebpackConfigFactoryOpts } from './utils';
 
 export type WebpackDevServerOptions = {
diff --git a/angular/devkit/webpack/utils.ts b/angular/devkit/webpack/utils.ts
index 040b8b44..f453da36 100644
--- a/angular/devkit/webpack/utils.ts
+++ b/angular/devkit/webpack/utils.ts
@@ -2,7 +2,7 @@ import { BundlerSetup } from '@bitdev/angular.dev-services.common';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { Logger } from '@teambit/logger';
 import { WebpackConfigWithDevServer } from '@teambit/webpack';
-import { Configuration, WebpackPluginInstance } from 'webpack';
+import type { Configuration, WebpackPluginInstance } from 'webpack';
 
 
 export type WebpackConfig = Configuration;
diff --git a/angular/devkit/webpack/webpack-plugins/angular-resolver.ts b/angular/devkit/webpack/webpack-plugins/angular-resolver.ts
index 50949ac9..c0fa4a15 100644
--- a/angular/devkit/webpack/webpack-plugins/angular-resolver.ts
+++ b/angular/devkit/webpack/webpack-plugins/angular-resolver.ts
@@ -8,7 +8,7 @@
 // eslint-disable-next-line max-classes-per-file
 import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';
 import { NgccProcessor } from '@bitdev/angular.dev-services.ngcc';
-import { Compiler } from 'webpack';
+import type { Compiler } from 'webpack';
 import { NodeJSFileSystem } from './nodejs-file-system';
 
 interface ResourceData {
diff --git a/angular/devkit/webpack/webpack-plugins/stats-logger.ts b/angular/devkit/webpack/webpack-plugins/stats-logger.ts
index e09e09da..94787267 100644
--- a/angular/devkit/webpack/webpack-plugins/stats-logger.ts
+++ b/angular/devkit/webpack/webpack-plugins/stats-logger.ts
@@ -1,5 +1,4 @@
 import type { Compiler, Stats } from 'webpack';
-import { loadEsmModule } from '@bitdev/angular.dev-services.common';
 
 const PLUGIN_NAME = 'angular-stats-logger-plugin';
 
@@ -11,24 +10,14 @@ export class StatsLoggerPlugin {
     };
     try {
       // "Executed when the compilation has completed."
-      try {
-        const { createWebpackLoggingCallback } = await loadEsmModule('@angular-devkit/build-angular/src/webpack/utils/stats') as any;
-        const loggingCallback = createWebpackLoggingCallback({} as any, logger as any) as any;
-        compiler.hooks.done.tap(PLUGIN_NAME, (stats: Stats) => {
-          loggingCallback(stats, { stats: { logging: 'info', colors: true } });
-        });
-      } catch (e) {
-        // angular v16+
-        try {
-          const { createWebpackLoggingCallback } = await loadEsmModule('@angular-devkit/build-angular/src/tools/webpack/utils/stats') as any;
-          const loggingCallback = createWebpackLoggingCallback({} as any, logger as any) as any;
-          compiler.hooks.done.tap(PLUGIN_NAME, (stats: Stats) => {
-            loggingCallback(stats, { stats: { logging: 'info', colors: true } });
-          });
-        } catch (e) {}
-      }
+      const { createWebpackLoggingCallback } = await import('@bitdev/angular.dev-services.ng-compat');
+      const loggingCallback = createWebpackLoggingCallback({} as any, logger as any) as any;
+      compiler.hooks.done.tap(PLUGIN_NAME, (stats: Stats) => {
+        loggingCallback(stats, { stats: { logging: 'info', colors: true } });
+      });
     } catch (e) {
       // if it fails, just continue (we don't need logging to break the build)
+      console.log('Failed to load @bitdev/angular.dev-services.ng-compat', e);
     }
   }
 }
diff --git a/angular/envs/angular-v12-env/component.json b/angular/envs/angular-v12-env/component.json
index 1a750efd..bcd410d5 100644
--- a/angular/envs/angular-v12-env/component.json
+++ b/angular/envs/angular-v12-env/component.json
@@ -18,6 +18,7 @@
           "@angular-eslint/eslint-plugin-template": "^12.1.0",
           "@angular-eslint/template-parser": "^12.1.0",
           "@angular/animations": "^12.2.16",
+          "@angular/cli": "~12.2.16",
           "@angular/common": "^12.2.16",
           "@angular/compiler": "^12.2.16",
           "@angular/compiler-cli": "^12.2.16",
@@ -31,6 +32,7 @@
           "@types/react-dev-utils": "~9.0.8",
           "@types/remark-prism": "~1.3.0",
           "@types/webpack-dev-server": "4.3.1",
+          "@types/webpack-dev-middleware": "5.0.2",
           "@typescript-eslint/eslint-plugin": "^4.26.0",
           "@typescript-eslint/parser": "^4.26.0",
           "eslint": "7.26.0",
diff --git a/angular/envs/angular-v12-env/webpack-config.factory.ts b/angular/envs/angular-v12-env/webpack-config.factory.ts
index 0c7f0643..6435100f 100644
--- a/angular/envs/angular-v12-env/webpack-config.factory.ts
+++ b/angular/envs/angular-v12-env/webpack-config.factory.ts
@@ -1,30 +1,23 @@
 /* eslint-disable no-param-reassign */
+import { OutputHashing } from '@angular-devkit/build-angular';
 import type { BrowserBuilderOptions, DevServerBuilderOptions } from '@angular-devkit/build-angular';
-import { OutputHashing } from '@angular-devkit/build-angular/src/server/schema';
+import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
+import { BundlerSetup } from '@bitdev/angular.dev-services.common';
 import {
   BuildBrowserFeatures,
-  normalizeBrowserSchema,
-  normalizeOptimization
-} from '@angular-devkit/build-angular/src/utils';
-import { generateEntryPoints } from '@angular-devkit/build-angular/src/utils/package-chunk-sort';
-import {
-  BrowserWebpackConfigOptions,
+  generateEntryPoints,
   generateWebpackConfig,
-  getIndexOutputFile
-} from '@angular-devkit/build-angular/src/utils/webpack-browser-config';
-import {
   getBrowserConfig,
   getCommonConfig,
   getDevServerConfig,
+  getIndexOutputFile,
   getStatsConfig,
   getStylesConfig,
-  getTypeScriptConfig
-} from '@angular-devkit/build-angular/src/webpack/configs';
-import {
-  IndexHtmlWebpackPlugin
-} from '@angular-devkit/build-angular/src/webpack/plugins/index-html-webpack-plugin';
-import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
-import { BundlerSetup } from '@bitdev/angular.dev-services.common';
+  getTypeScriptConfig,
+  IndexHtmlWebpackPlugin,
+  normalizeBrowserSchema,
+  normalizeOptimization
+} from '@bitdev/angular.dev-services.ng-compat';
 import {
   WebpackBuildConfigFactoryOpts,
   WebpackConfig,
@@ -150,7 +143,7 @@ async function getWebpackConfig(
     getSystemPath(projectRoot),
     getSystemPath(normalizedSourceRoot),
     normalizedOptions,
-    (wco: BrowserWebpackConfigOptions) => [
+    (wco: any) => [
       setup === BundlerSetup.Serve ? getDevServerConfig(wco) : {},
       getCommonConfig(wco),
       getBrowserConfig(wco),
diff --git a/angular/envs/angular-v13-env/component.json b/angular/envs/angular-v13-env/component.json
index 1d9df4f4..793da6ff 100644
--- a/angular/envs/angular-v13-env/component.json
+++ b/angular/envs/angular-v13-env/component.json
@@ -18,6 +18,7 @@
           "@angular-eslint/eslint-plugin-template": "~13.0.1",
           "@angular-eslint/template-parser": "~13.0.1",
           "@angular/animations": "~13.2.0",
+          "@angular/cli": "~13.2.0",
           "@angular/common": "~13.2.0",
           "@angular/compiler": "~13.2.0",
           "@angular/compiler-cli": "~13.2.0",
@@ -31,6 +32,7 @@
           "@types/react-dev-utils": "~9.0.8",
           "@types/remark-prism": "~1.3.0",
           "@types/webpack-dev-server": "4.3.1",
+          "@types/webpack-dev-middleware": "5.0.2",
           "@typescript-eslint/eslint-plugin": "^5.3.0",
           "@typescript-eslint/parser": "^5.3.0",
           "eslint": "8.2.0",
diff --git a/angular/envs/angular-v13-env/webpack-config.factory.ts b/angular/envs/angular-v13-env/webpack-config.factory.ts
index 4bee7859..bd339401 100644
--- a/angular/envs/angular-v13-env/webpack-config.factory.ts
+++ b/angular/envs/angular-v13-env/webpack-config.factory.ts
@@ -1,27 +1,20 @@
 /* eslint-disable no-param-reassign */
 import type { BrowserBuilderOptions, DevServerBuilderOptions } from '@angular-devkit/build-angular';
 import { OutputHashing } from '@angular-devkit/build-angular';
+import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
+import { BundlerSetup } from '@bitdev/angular.dev-services.common';
 import {
-  normalizeBrowserSchema,
-  normalizeOptimization
-} from '@angular-devkit/build-angular/src/utils';
-import { normalizeCacheOptions } from '@angular-devkit/build-angular/src/utils/normalize-cache';
-import { generateEntryPoints } from '@angular-devkit/build-angular/src/utils/package-chunk-sort';
-import {
-  BrowserWebpackConfigOptions,
+  generateEntryPoints,
   generateWebpackConfig,
-  getIndexOutputFile
-} from '@angular-devkit/build-angular/src/utils/webpack-browser-config';
-import {
   getCommonConfig,
   getDevServerConfig,
-  getStylesConfig
-} from '@angular-devkit/build-angular/src/webpack/configs';
-import {
-  IndexHtmlWebpackPlugin
-} from '@angular-devkit/build-angular/src/webpack/plugins/index-html-webpack-plugin';
-import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
-import { BundlerSetup } from '@bitdev/angular.dev-services.common';
+  getIndexOutputFile,
+  getStylesConfig,
+  IndexHtmlWebpackPlugin,
+  normalizeBrowserSchema,
+  normalizeCacheOptions,
+  normalizeOptimization
+} from '@bitdev/angular.dev-services.ng-compat';
 import {
   WebpackBuildConfigFactoryOpts,
   WebpackConfig,
@@ -166,7 +159,7 @@ async function getWebpackConfig(
     getSystemPath(normalizedSourceRoot),
     'bit-angular-v13-env', // projectName
     normalizedOptions,
-    (wco: BrowserWebpackConfigOptions) => [
+    (wco: any) => [
       setup === BundlerSetup.Serve ? getDevServerConfig(wco) : {},
       getCommonConfig(wco),
       getStylesConfig(wco),
diff --git a/angular/envs/angular-v14-env/component.json b/angular/envs/angular-v14-env/component.json
index 98e20064..010805f7 100644
--- a/angular/envs/angular-v14-env/component.json
+++ b/angular/envs/angular-v14-env/component.json
@@ -17,6 +17,7 @@
           "@angular-eslint/eslint-plugin-template": "~14.0.0",
           "@angular-eslint/template-parser": "~14.0.0",
           "@angular/animations": "~14.2.12",
+          "@angular/cli": "~14.2.12",
           "@angular/common": "~14.2.12",
           "@angular/compiler": "~14.2.12",
           "@angular/compiler-cli": "~14.2.12",
@@ -31,6 +32,7 @@
           "@types/react-dev-utils": "~9.0.8",
           "@types/remark-prism": "~1.3.0",
           "@types/webpack-dev-server": "4.3.1",
+          "@types/webpack-dev-middleware": "5.0.2",
           "@typescript-eslint/eslint-plugin": "^5.29.0",
           "@typescript-eslint/parser": "^5.29.0",
           "css-loader": "6.2.0",
diff --git a/angular/envs/angular-v14-env/webpack-config.factory.ts b/angular/envs/angular-v14-env/webpack-config.factory.ts
index 3b6a2c3a..d247665c 100644
--- a/angular/envs/angular-v14-env/webpack-config.factory.ts
+++ b/angular/envs/angular-v14-env/webpack-config.factory.ts
@@ -1,27 +1,20 @@
 /* eslint-disable no-param-reassign */
 import type { BrowserBuilderOptions, DevServerBuilderOptions } from '@angular-devkit/build-angular';
 import { OutputHashing } from '@angular-devkit/build-angular';
+import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
+import { BundlerSetup } from '@bitdev/angular.dev-services.common';
 import {
-  normalizeBrowserSchema,
-  normalizeOptimization
-} from '@angular-devkit/build-angular/src/utils';
-import { normalizeCacheOptions } from '@angular-devkit/build-angular/src/utils/normalize-cache';
-import { generateEntryPoints } from '@angular-devkit/build-angular/src/utils/package-chunk-sort';
-import {
-  BrowserWebpackConfigOptions,
+  generateEntryPoints,
   generateWebpackConfig,
-  getIndexOutputFile
-} from '@angular-devkit/build-angular/src/utils/webpack-browser-config';
-import {
   getCommonConfig,
   getDevServerConfig,
-  getStylesConfig
-} from '@angular-devkit/build-angular/src/webpack/configs';
-import {
-  IndexHtmlWebpackPlugin
-} from '@angular-devkit/build-angular/src/webpack/plugins/index-html-webpack-plugin';
-import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
-import { BundlerSetup } from '@bitdev/angular.dev-services.common';
+  getIndexOutputFile,
+  getStylesConfig,
+  IndexHtmlWebpackPlugin,
+  normalizeBrowserSchema,
+  normalizeCacheOptions,
+  normalizeOptimization
+} from '@bitdev/angular.dev-services.ng-compat';
 import {
   WebpackBuildConfigFactoryOpts,
   WebpackConfig,
@@ -167,7 +160,7 @@ async function getWebpackConfig(
     getSystemPath(normalizedSourceRoot),
     'bit-angular-v14-env', // projectName
     normalizedOptions,
-    (wco: BrowserWebpackConfigOptions) => [
+    (wco: any) => [
       setup === BundlerSetup.Serve ? getDevServerConfig(wco) : {},
       getCommonConfig(wco),
       getStylesConfig(wco)
diff --git a/angular/envs/angular-v15-env/component.json b/angular/envs/angular-v15-env/component.json
index c11cd7e6..d216a383 100644
--- a/angular/envs/angular-v15-env/component.json
+++ b/angular/envs/angular-v15-env/component.json
@@ -17,6 +17,7 @@
           "@angular-eslint/eslint-plugin-template": "~15.1.0",
           "@angular-eslint/template-parser": "~15.1.0",
           "@angular/animations": "~15.1.5",
+          "@angular/cli": "~15.1.5",
           "@angular/common": "~15.1.5",
           "@angular/compiler": "~15.1.5",
           "@angular/compiler-cli": "~15.1.5",
@@ -30,7 +31,6 @@
           "@types/jest": "^29.2.4",
           "@types/react-dev-utils": "~9.0.8",
           "@types/remark-prism": "~1.3.0",
-          "@types/webpack-dev-server": "4.3.1",
           "@typescript-eslint/eslint-plugin": "^5.45.1",
           "@typescript-eslint/parser": "^5.45.1",
           "css-loader": "6.2.0",
diff --git a/angular/envs/angular-v15-env/webpack-config.factory.ts b/angular/envs/angular-v15-env/webpack-config.factory.ts
index fd27b695..b3b604d2 100644
--- a/angular/envs/angular-v15-env/webpack-config.factory.ts
+++ b/angular/envs/angular-v15-env/webpack-config.factory.ts
@@ -1,27 +1,20 @@
 /* eslint-disable no-param-reassign */
 import type { BrowserBuilderOptions, DevServerBuilderOptions } from '@angular-devkit/build-angular';
 import { OutputHashing } from '@angular-devkit/build-angular';
+import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
+import { BundlerSetup } from '@bitdev/angular.dev-services.common';
 import {
-  normalizeBrowserSchema,
-  normalizeOptimization
-} from '@angular-devkit/build-angular/src/utils';
-import { normalizeCacheOptions } from '@angular-devkit/build-angular/src/utils/normalize-cache';
-import { generateEntryPoints } from '@angular-devkit/build-angular/src/utils/package-chunk-sort';
-import {
-  BrowserWebpackConfigOptions,
+  generateEntryPoints,
   generateWebpackConfig,
-  getIndexOutputFile
-} from '@angular-devkit/build-angular/src/utils/webpack-browser-config';
-import {
   getCommonConfig,
   getDevServerConfig,
-  getStylesConfig
-} from '@angular-devkit/build-angular/src/webpack/configs';
-import {
-  IndexHtmlWebpackPlugin
-} from '@angular-devkit/build-angular/src/webpack/plugins/index-html-webpack-plugin';
-import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
-import { BundlerSetup } from '@bitdev/angular.dev-services.common';
+  getIndexOutputFile,
+  getStylesConfig,
+  IndexHtmlWebpackPlugin,
+  normalizeBrowserSchema,
+  normalizeCacheOptions,
+  normalizeOptimization
+} from '@bitdev/angular.dev-services.ng-compat';
 import {
   WebpackBuildConfigFactoryOpts,
   WebpackConfig,
@@ -167,7 +160,7 @@ async function getWebpackConfig(
     getSystemPath(normalizedSourceRoot),
     'bit-angular-v15-env', // projectName
     normalizedOptions,
-    (wco: BrowserWebpackConfigOptions) => [
+    (wco: any) => [
       setup === BundlerSetup.Serve ? getDevServerConfig(wco) : {},
       getCommonConfig(wco),
       getStylesConfig(wco)
diff --git a/angular/envs/angular-v16-env/angular-v16-env.bit-env.ts b/angular/envs/angular-v16-env/angular-v16-env.bit-env.ts
index 1b187515..81f21345 100644
--- a/angular/envs/angular-v16-env/angular-v16-env.bit-env.ts
+++ b/angular/envs/angular-v16-env/angular-v16-env.bit-env.ts
@@ -1,7 +1,15 @@
 import { AngularBaseEnv } from '@bitdev/angular.envs.base-env';
-import { AngularEnvOptions } from '@bitdev/angular.dev-services.common';
+import {
+  AngularEnvOptions,
+  BrowserOptions,
+  DevServerOptions, isAppDevContext
+} from '@bitdev/angular.dev-services.common';
 import { NativeCompileCache } from '@teambit/toolbox.performance.v8-cache';
+import { NgViteDevServer, ViteConfigTransformer } from '@bitdev/angular.dev-services.vite';
 import { webpackConfigFactory } from './webpack-config.factory';
+import { DevServer, DevServerContext } from '@teambit/bundler';
+import { Configuration, WebpackConfigTransformer, WebpackConfigWithDevServer } from '@teambit/webpack';
+import { AsyncEnvHandler } from '@teambit/envs';
 
 // Disable v8-caching because it breaks ESM loaders
 NativeCompileCache.uninstall();
@@ -29,6 +37,27 @@ export class AngularV16Env extends AngularBaseEnv {
     webpackModulePath: require.resolve('webpack', { paths: [require.resolve('@angular-devkit/build-angular')] }),
     devServer: 'webpack',
   };
+
+  override getDevServer(
+    devServerContext: DevServerContext,
+    ngEnvOptions: AngularEnvOptions,
+    transformers: (WebpackConfigTransformer | ViteConfigTransformer)[] = [],
+    angularOptions: Partial<BrowserOptions & DevServerOptions> = {},
+    webpackOptions: Partial<WebpackConfigWithDevServer | Configuration> = {},
+    sourceRoot?: string
+  ): AsyncEnvHandler<DevServer> {
+    if (this.ngEnvOptions.devServer === 'vite' && isAppDevContext(devServerContext)) {
+      return NgViteDevServer.from({
+        angularOptions,
+        devServerContext,
+        ngEnvOptions,
+        sourceRoot,
+        transformers,
+        webpackOptions: webpackOptions as any
+      });
+    }
+    return this.super();
+  }
 }
 
 export default new AngularV16Env();
diff --git a/angular/envs/angular-v16-env/component.json b/angular/envs/angular-v16-env/component.json
index 789b2ac3..7edac032 100644
--- a/angular/envs/angular-v16-env/component.json
+++ b/angular/envs/angular-v16-env/component.json
@@ -20,6 +20,7 @@
           "@angular/common": "~16.2.0",
           "@angular/compiler": "~16.2.0",
           "@angular/compiler-cli": "~16.2.0",
+          "@angular/cli": "~16.2.0",
           "@angular/core": "~16.2.0",
           "@angular/elements": "~16.2.0",
           "@angular/platform-browser": "~16.2.0",
diff --git a/angular/envs/angular-v16-env/webpack-config.factory.ts b/angular/envs/angular-v16-env/webpack-config.factory.ts
index 1e8a6f73..0ddc7ee3 100644
--- a/angular/envs/angular-v16-env/webpack-config.factory.ts
+++ b/angular/envs/angular-v16-env/webpack-config.factory.ts
@@ -4,22 +4,15 @@ import { OutputHashing } from '@angular-devkit/build-angular';
 import {
   getCommonConfig,
   getDevServerConfig,
-  getStylesConfig
-} from '@angular-devkit/build-angular/src/tools/webpack/configs';
-import {
-  IndexHtmlWebpackPlugin
-} from '@angular-devkit/build-angular/src/tools/webpack/plugins/index-html-webpack-plugin';
-import {
+  getStylesConfig,
+  IndexHtmlWebpackPlugin,
+  normalizeCacheOptions,
+  generateEntryPoints,
+  generateWebpackConfig,
+  getIndexOutputFile,
   normalizeBrowserSchema,
   normalizeOptimization
-} from '@angular-devkit/build-angular/src/utils';
-import { normalizeCacheOptions } from '@angular-devkit/build-angular/src/utils/normalize-cache';
-import { generateEntryPoints } from '@angular-devkit/build-angular/src/utils/package-chunk-sort';
-import {
-  BrowserWebpackConfigOptions,
-  generateWebpackConfig,
-  getIndexOutputFile
-} from '@angular-devkit/build-angular/src/utils/webpack-browser-config';
+} from '@bitdev/angular.dev-services.ng-compat';
 import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
 import { BundlerSetup } from '@bitdev/angular.dev-services.common';
 import {
@@ -166,7 +159,7 @@ async function getWebpackConfig(
     getSystemPath(normalizedSourceRoot),
     'bit-angular-v16-env', // projectName
     normalizedOptions,
-    (wco: BrowserWebpackConfigOptions) => [
+    (wco: any) => [
       setup === BundlerSetup.Serve ? getDevServerConfig(wco) : {},
       getCommonConfig(wco),
       getStylesConfig(wco)
diff --git a/angular/envs/base-env/angular-base-env.bit-env.ts b/angular/envs/base-env/angular-base-env.bit-env.ts
index 1514eb04..59923f0b 100644
--- a/angular/envs/base-env/angular-base-env.bit-env.ts
+++ b/angular/envs/base-env/angular-base-env.bit-env.ts
@@ -3,7 +3,6 @@ import {
   AngularEnvOptions,
   BrowserOptions,
   DevServerOptions,
-  isAppDevContext,
   NG_APP_NAME
 } from '@bitdev/angular.dev-services.common';
 import {
@@ -15,7 +14,6 @@ import {
   BundlerProvider,
   DevServerProvider
 } from '@bitdev/angular.dev-services.preview.preview';
-import { NgViteDevServer, ViteConfigTransformer } from '@bitdev/angular.dev-services.vite';
 import { NgWebpackBundler, NgWebpackDevServer } from '@bitdev/angular.dev-services.webpack';
 import {
   NgAppTemplate,
@@ -48,7 +46,6 @@ import { WebpackConfigTransformer, WebpackConfigWithDevServer } from '@teambit/w
 import { ConfigWriterList } from '@teambit/workspace-config-files';
 import { ESLint as ESLintLib } from 'eslint';
 import { merge } from 'lodash';
-import { Configuration } from 'webpack';
 import { AngularEnvInterface } from './angular-env.interface';
 import hostDependencies from './preview/host-dependencies';
 
@@ -149,37 +146,27 @@ export abstract class AngularBaseEnv implements AngularEnvInterface {
   getDevServer(
     devServerContext: DevServerContext,
     ngEnvOptions: AngularEnvOptions,
-    transformers: (WebpackConfigTransformer | ViteConfigTransformer)[] = [],
+    transformers: WebpackConfigTransformer[] = [],
     angularOptions: Partial<BrowserOptions & DevServerOptions> = {},
-    webpackOptions: Partial<WebpackConfigWithDevServer | Configuration> = {},
+    webpackOptions: any = {},
     sourceRoot?: string
   ): AsyncEnvHandler<DevServer> {
-    if (this.ngEnvOptions.devServer === 'vite' && isAppDevContext(devServerContext)) {
-      return NgViteDevServer.from({
-        angularOptions,
-        devServerContext,
-        ngEnvOptions,
-        sourceRoot,
-        transformers,
-        webpackOptions: webpackOptions as any
-      });
-    }
     return NgWebpackDevServer.from({
       angularOptions,
       devServerContext,
       ngEnvOptions,
       sourceRoot,
-      transformers: transformers as WebpackConfigTransformer[],
-      webpackOptions: webpackOptions as any
+      transformers,
+      webpackOptions: webpackOptions
     });
   }
 
   getBundler(
     bundlerContext: BundlerContext,
     ngEnvOptions: AngularEnvOptions,
-    transformers: (WebpackConfigTransformer | ViteConfigTransformer)[] = [],
+    transformers: WebpackConfigTransformer[] = [],
     angularOptions: Partial<BrowserOptions & DevServerOptions> = {},
-    webpackOptions: Partial<WebpackConfigWithDevServer | Configuration> = {},
+    webpackOptions: any = {},
     sourceRoot?: string
   ): AsyncEnvHandler<Bundler> {
     return NgWebpackBundler.from({
@@ -187,8 +174,8 @@ export abstract class AngularBaseEnv implements AngularEnvInterface {
       bundlerContext,
       ngEnvOptions,
       sourceRoot,
-      transformers: transformers as WebpackConfigTransformer[],
-      webpackOptions: webpackOptions as any
+      transformers,
+      webpackOptions: webpackOptions
     });
   }
 
@@ -196,9 +183,9 @@ export abstract class AngularBaseEnv implements AngularEnvInterface {
     const ngEnvOptions = this.getNgEnvOptions();
     const devServerProvider: DevServerProvider = (
       devServerContext: DevServerContext,
-      transformers?: (WebpackConfigTransformer | ViteConfigTransformer)[],
-      angularOptions?: Partial<BrowserOptions & DevServerOptions>,
-      webpackOptions?: Partial<WebpackConfigWithDevServer | Configuration>,
+      transformers: WebpackConfigTransformer[] = [],
+      angularOptions: Partial<BrowserOptions & DevServerOptions> = {},
+      webpackOptions: any = {},
       sourceRoot?: string
     ) => this.getDevServer(devServerContext, ngEnvOptions, transformers, angularOptions, webpackOptions, sourceRoot);
     const bundlerProvider: BundlerProvider = (bundlerContext: BundlerContext) => this.getBundler(bundlerContext, ngEnvOptions);