feat: defer internal cli imports to ng-compat component

.bitmap

@@ -30,6 +30,13 @@
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/common"
     },
+    "dev-services/ng-compat": {
+        "name": "dev-services/ng-compat",
+        "scope": "",
+        "version": "",
+        "mainFile": "index.ts",
+        "rootDir": "angular/devkit/ng-compat"
+    },
     "dev-services/compiler/elements": {
         "name": "dev-services/compiler/elements",
         "scope": "bitdev.angular",

.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',
+  }
+};

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;

angular/devkit/ng-compat/build-angular/webpack/index.ts

@@ -0,0 +1,2 @@
+export * from './configs';
+export * from './stats';

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;
+}

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/[email protected]": {}
+  }
+}

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';

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';
 

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"
         }
       }

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"

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';
 

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 = {

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;

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 {

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);
     }
   }
 }