diff --git a/.bitmap b/.bitmap index 09f44874..07a08e7f 100644 --- a/.bitmap +++ b/.bitmap @@ -12,245 +12,371 @@ "angular-env": { "name": "angular-env", "scope": "bitdev.angular", - "version": "6.0.13", + "version": "7.1.0", "mainFile": "index.ts", "rootDir": "angular/envs/angular-env" }, "app-types/angular-app-type": { "name": "app-types/angular-app-type", "scope": "bitdev.angular", - "version": "6.0.11", + "version": "7.0.0", "mainFile": "index.ts", "rootDir": "angular/app-types/angular-app-type" }, "dev-services/common": { "name": "dev-services/common", "scope": "bitdev.angular", - "version": "6.0.8", + "version": "7.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/common" }, "dev-services/compiler/elements": { "name": "dev-services/compiler/elements", "scope": "bitdev.angular", - "version": "6.0.8", + "version": "7.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/compiler/elements" }, "dev-services/compiler/multi-compiler": { "name": "dev-services/compiler/multi-compiler", "scope": "bitdev.angular", - "version": "6.0.9", + "version": "7.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/compiler/multi-compiler" }, "dev-services/compiler/ng-packagr": { "name": "dev-services/compiler/ng-packagr", "scope": "bitdev.angular", - "version": "6.0.9", + "version": "7.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/compiler/ng-packagr" }, "dev-services/linter/eslint": { "name": "dev-services/linter/eslint", "scope": "bitdev.angular", - "version": "3.0.3", + "version": "4.0.0", "mainFile": "index.js", "rootDir": "angular/devkit/linter/eslint" }, "dev-services/ng-compat": { "name": "dev-services/ng-compat", "scope": "bitdev.angular", - "version": "3.0.3", + "version": "4.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/ng-compat" }, "dev-services/preview/mounter": { "name": "dev-services/preview/mounter", "scope": "bitdev.angular", - "version": "3.0.3", + "version": "4.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/preview/mounter" }, "dev-services/preview/preview": { "name": "dev-services/preview/preview", "scope": "bitdev.angular", - "version": "6.0.8", + "version": "7.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/preview/preview" }, "dev-services/preview/preview-app": { "name": "dev-services/preview/preview-app", "scope": "bitdev.angular", - "version": "1.0.2", + "version": "2.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/preview/preview-app" }, "dev-services/preview/runtime": { "name": "dev-services/preview/runtime", "scope": "bitdev.angular", - "version": "3.0.3", + "version": "4.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/preview/runtime" }, "dev-services/webpack": { "name": "dev-services/webpack", "scope": "bitdev.angular", - "version": "6.0.8", + "version": "7.0.0", "mainFile": "index.ts", "rootDir": "angular/devkit/webpack" }, - "envs/angular-v13-env": { - "name": "envs/angular-v13-env", + "docs/angular-docs-routes": { + "name": "docs/angular-docs-routes", "scope": "bitdev.angular", - "version": "6.0.13", + "version": "1.0.0", "mainFile": "index.ts", - "rootDir": "angular/envs/angular-v13-env" + "rootDir": "angular/docs/angular-docs-routes" }, - "envs/angular-v14-env": { - "name": "envs/angular-v14-env", + "docs/angular-env-docs-data": { + "name": "docs/angular-env-docs-data", "scope": "bitdev.angular", - "version": "6.0.13", + "version": "1.0.0", "mainFile": "index.ts", - "rootDir": "angular/envs/angular-v14-env" + "rootDir": "angular/docs/angular-env-docs-data" }, - "envs/angular-v15-env": { - "name": "envs/angular-v15-env", + "docs/angular-versions": { + "name": "docs/angular-versions", "scope": "bitdev.angular", - "version": "6.0.13", + "version": "1.0.0", "mainFile": "index.ts", - "rootDir": "angular/envs/angular-v15-env" + "rootDir": "angular/docs/angular-versions" + }, + "docs/bit-angular-introduction": { + "name": "docs/bit-angular-introduction", + "scope": "bitdev.angular", + "version": "0.0.4", + "mainFile": "index.ts", + "rootDir": "angular/docs/bit-angular-introduction" + }, + "docs/build-pipelines": { + "name": "docs/build-pipelines", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/build-pipelines" + }, + "docs/component-generators": { + "name": "docs/component-generators", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/component-generators" + }, + "docs/component-libs": { + "name": "docs/component-libs", + "scope": "bitdev.angular", + "version": "0.0.3", + "mainFile": "index.ts", + "rootDir": "angular/docs/component-libs" + }, + "docs/components-documentation": { + "name": "docs/components-documentation", + "scope": "bitdev.angular", + "version": "0.0.3", + "mainFile": "index.ts", + "rootDir": "angular/docs/components-documentation" + }, + "docs/components-overview": { + "name": "docs/components-overview", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/components-overview" + }, + "docs/components-preview": { + "name": "docs/components-preview", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/components-preview" + }, + "docs/create-custom-env": { + "name": "docs/create-custom-env", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/create-custom-env" + }, + "docs/create-ng-app": { + "name": "docs/create-ng-app", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/create-ng-app" + }, + "docs/dependency-policy": { + "name": "docs/dependency-policy", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/dependency-policy" + }, + "docs/development-tools": { + "name": "docs/development-tools", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/development-tools" + }, + "docs/ng-app-build": { + "name": "docs/ng-app-build", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/ng-app-build" + }, + "docs/ng-app-deploy": { + "name": "docs/ng-app-deploy", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/ng-app-deploy" + }, + "docs/ng-base-components": { + "name": "docs/ng-base-components", + "scope": "bitdev.angular", + "version": "0.0.3", + "mainFile": "index.ts", + "rootDir": "angular/docs/ng-base-components" + }, + "docs/ng-component-libraries": { + "name": "docs/ng-component-libraries", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/ng-component-libraries" + }, + "docs/ng-design-overview": { + "name": "docs/ng-design-overview", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/ng-design-overview" + }, + "docs/ng-theming": { + "name": "docs/ng-theming", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/ng-theming" + }, + "docs/workspace-starters": { + "name": "docs/workspace-starters", + "scope": "bitdev.angular", + "version": "1.0.0", + "mainFile": "index.ts", + "rootDir": "angular/docs/workspace-starters" }, "envs/angular-v16-env": { "name": "envs/angular-v16-env", "scope": "bitdev.angular", - "version": "6.0.13", + "version": "7.1.0", "mainFile": "index.ts", "rootDir": "angular/envs/angular-v16-env" }, "envs/angular-v17-env": { "name": "envs/angular-v17-env", "scope": "bitdev.angular", - "version": "5.0.13", + "version": "6.1.0", "mainFile": "index.ts", "rootDir": "angular/envs/angular-v17-env" }, "envs/angular-v18-env": { "name": "envs/angular-v18-env", "scope": "bitdev.angular", - "version": "1.0.13", + "version": "2.1.0", "mainFile": "index.ts", "rootDir": "angular/envs/angular-v18-env" }, + "envs/angular-v19-env": { + "name": "envs/angular-v19-env", + "scope": "bitdev.angular", + "version": "1.1.0", + "mainFile": "index.ts", + "rootDir": "angular/envs/angular-v19-env" + }, "envs/base-env": { "name": "envs/base-env", "scope": "bitdev.angular", - "version": "6.0.11", + "version": "7.1.0", "mainFile": "index.ts", "rootDir": "angular/envs/base-env" }, "examples/my-angular-env": { "name": "examples/my-angular-env", "scope": "bitdev.angular", - "version": "6.0.13", + "version": "7.1.0", "mainFile": "index.ts", "rootDir": "angular/examples/my-angular-env" }, - "examples/my-angular-v13-env": { - "name": "examples/my-angular-v13-env", - "scope": "bitdev.angular", - "version": "5.0.13", - "mainFile": "index.ts", - "rootDir": "angular/examples/my-angular-v13-env" - }, - "examples/my-angular-v14-env": { - "name": "examples/my-angular-v14-env", - "scope": "bitdev.angular", - "version": "6.0.13", - "mainFile": "index.ts", - "rootDir": "angular/examples/my-angular-v14-env" - }, - "examples/my-angular-v15-env": { - "name": "examples/my-angular-v15-env", - "scope": "bitdev.angular", - "version": "6.0.13", - "mainFile": "index.ts", - "rootDir": "angular/examples/my-angular-v15-env" - }, "examples/my-angular-v16-env": { "name": "examples/my-angular-v16-env", "scope": "bitdev.angular", - "version": "5.0.13", + "version": "6.1.0", "mainFile": "index.ts", "rootDir": "angular/examples/my-angular-v16-env" }, "examples/my-angular-v17-env": { "name": "examples/my-angular-v17-env", "scope": "bitdev.angular", - "version": "5.0.13", + "version": "6.1.0", "mainFile": "index.ts", "rootDir": "angular/examples/my-angular-v17-env" }, "examples/my-angular-v18-env": { "name": "examples/my-angular-v18-env", "scope": "bitdev.angular", - "version": "1.0.13", + "version": "2.1.0", "mainFile": "index.ts", "rootDir": "angular/examples/my-angular-v18-env" }, + "examples/my-angular-v19-env": { + "name": "examples/my-angular-v19-env", + "scope": "bitdev.angular", + "version": "1.1.0", + "mainFile": "index.ts", + "rootDir": "angular/examples/my-angular-v19-env" + }, "integration/demo-app": { "name": "integration/demo-app", "scope": "bitdev.angular", - "version": "0.0.5", + "version": "1.1.0", "mainFile": "index.ts", "rootDir": "angular/integration/demo-app" }, "integration/demo-lib": { "name": "integration/demo-lib", "scope": "bitdev.angular", - "version": "0.0.10", + "version": "1.1.0", "mainFile": "public-api.ts", "rootDir": "angular/integration/demo-lib" }, - "integration/demo-lib-v15": { - "name": "integration/demo-lib-v15", - "scope": "bitdev.angular", - "version": "0.0.10", - "mainFile": "public-api.ts", - "rootDir": "angular/integration/demo-lib-v15" - }, "integration/demo-lib-v16": { "name": "integration/demo-lib-v16", "scope": "bitdev.angular", - "version": "0.0.10", + "version": "1.1.0", "mainFile": "public-api.ts", "rootDir": "angular/integration/demo-lib-v16" }, "integration/demo-lib-v17": { "name": "integration/demo-lib-v17", "scope": "bitdev.angular", - "version": "0.0.10", + "version": "1.1.0", "mainFile": "public-api.ts", "rootDir": "angular/integration/demo-lib-v17" }, "integration/demo-lib-v18": { "name": "integration/demo-lib-v18", "scope": "bitdev.angular", - "version": "0.0.10", + "version": "1.1.0", "mainFile": "public-api.ts", "rootDir": "angular/integration/demo-lib-v18" }, + "integration/demo-lib-v19": { + "name": "integration/demo-lib-v19", + "scope": "bitdev.angular", + "version": "1.1.0", + "mainFile": "public-api.ts", + "rootDir": "angular/integration/demo-lib-v19" + }, + "readme": { + "name": "readme", + "scope": "bitdev.angular", + "version": "2.0.3", + "mainFile": "index.ts", + "rootDir": "angular/readme" + }, "templates/generators": { "name": "templates/generators", "scope": "bitdev.angular", - "version": "6.0.2", + "version": "7.1.0", "mainFile": "index.ts", "rootDir": "angular/templates/generators" }, "templates/starters": { "name": "templates/starters", "scope": "bitdev.angular", - "version": "6.0.2", + "version": "7.0.0", "mainFile": "index.ts", "rootDir": "angular/templates/starters" }, diff --git a/angular/app-types/angular-app-type/angular.application.ts b/angular/app-types/angular-app-type/angular.application.ts index fcd4895c..45a06154 100644 --- a/angular/app-types/angular-app-type/angular.application.ts +++ b/angular/app-types/angular-app-type/angular.application.ts @@ -1,10 +1,6 @@ import { VERSION } from '@angular/cli'; -import { - ApplicationOptions, - getWorkspace, - NG_APP_NAME, - normalizePath -} from '@bitdev/angular.dev-services.common'; +import { getWorkspace, NG_APP_NAME, normalizePath } from '@bitdev/angular.dev-services.common'; +import { ApplicationBuilderOptions, SsrClass } from '@bitdev/angular.dev-services.ng-compat'; import { AngularPreview } from '@bitdev/angular.dev-services.preview.preview'; import { AppBuildContext, @@ -44,7 +40,7 @@ export class AngularApp implements Application { readonly options: AngularAppOptions ) { this.name = options.name || NG_APP_NAME; - this.idName = `bitdev.angular/${ this.name }`; + this.idName = `bitdev.angular/${this.name}`; this.deploy = options.deploy; } @@ -59,19 +55,19 @@ export class AngularApp implements Application { } private getTsconfigPath(tempFolder: string): string { - return normalizePath(join(tempFolder, `tsconfig/tsconfig-${ Date.now() }.json`)); + return normalizePath(join(tempFolder, `tsconfig/tsconfig-${Date.now()}.json`)); } private getPublicDir(artifactsDir: string) { return join(artifactsDir, this.name); } - private getDevServerContext(context: AppContext, _appRootPath: string): DevServerContext { + private getDevServerContext(context: AppContext): DevServerContext { // const ngEnvOptions = this.angularEnv.getNgEnvOptions(); return Object.assign(cloneDeep(context), { entry: [], rootPath: /*ngEnvOptions.devServer === 'vite' ? _appRootPath : */'', - publicPath: `${ this.publicDir }/${ this.options.name }`, + publicPath: `${this.publicDir}/${this.options.name}`, title: this.options.name }); } @@ -122,9 +118,9 @@ export class AngularApp implements Application { const pkgName = depsResolver.getPackageName(dep); // TODO we should find a way to use the real entry file based on the component config because people can change it if (fs.existsSync(join(componentDir, 'public-api.ts'))) { - tsconfigJSON.compilerOptions.paths[pkgName] = [`${ componentDir }/public-api.ts`, `${ componentDir }`]; + tsconfigJSON.compilerOptions.paths[pkgName] = [`${componentDir}/public-api.ts`, `${componentDir}`]; } - tsconfigJSON.compilerOptions.paths[`${ pkgName }/*`] = [`${ componentDir }/*`]; + tsconfigJSON.compilerOptions.paths[`${pkgName}/*`] = [`${componentDir}/*`]; } }); @@ -181,7 +177,7 @@ export class AngularApp implements Application { const envVars = await this.getEnvFile('development', appRootPath, context.envVariables as any); await serveApplication({ angularOptions: { - ...this.options.angularBuildOptions as ApplicationOptions, + ...this.options.angularBuildOptions as ApplicationBuilderOptions, tsConfig: tsconfigPath }, sourceRoot: this.options.sourceRoot || 'src', @@ -194,7 +190,7 @@ export class AngularApp implements Application { } }); } else { - const devServerContext = this.getDevServerContext(context, appRootPath); + const devServerContext = this.getDevServerContext(context); const envContext = this.getEnvContext(context); const preview = this.getPreview(tsconfigPath)(envContext); @@ -216,8 +212,13 @@ export class AngularApp implements Application { const outputPath = this.getPublicDir(context.artifactsDir); const appRootPath = capsule.path; const appTsconfigPath = join(appRootPath, this.options.angularBuildOptions.tsConfig); - const appOptions = this.options.angularBuildOptions as ApplicationOptions; - const entryServer = appOptions.ssr && Number(VERSION.major) >= 17 ? './entry.server.ts' : undefined; + const appOptions = this.options.angularBuildOptions as ApplicationBuilderOptions; + let entryServer: string | undefined; + if ((appOptions.ssr as SsrClass)?.entry) { + entryServer = (appOptions.ssr as SsrClass).entry; + } else if (appOptions.ssr && Number(VERSION.major) >= 17 && Number(VERSION.major) < 19) { + entryServer = './entry.server.ts'; + } const tempFolder = this.getTempFolder(); const tsconfigPath = this.getTsconfigPath(tempFolder); this.generateTsConfig([capsule.component], appRootPath, appTsconfigPath, tsconfigPath, depsResolver, undefined, entryServer); @@ -239,6 +240,7 @@ export class AngularApp implements Application { 'process.env': envVars } }); + console.log('build done'); } else { let bundler: Bundler; if (this.options.bundler) { @@ -260,7 +262,7 @@ export class AngularApp implements Application { metadata: { outputPath, publicDir: join(outputPath, 'browser'), - ssrPublicDir: appOptions.ssr ? join(outputPath, 'ssr') : undefined + ssrPublicDir: appOptions.ssr ? join(outputPath, Number(VERSION.major) >= 19 ? 'server' : 'ssr') : undefined } }; } diff --git a/angular/app-types/angular-app-type/application.bundler.ts b/angular/app-types/angular-app-type/application.bundler.ts index dc2d70d4..7ae238c0 100644 --- a/angular/app-types/angular-app-type/application.bundler.ts +++ b/angular/app-types/angular-app-type/application.bundler.ts @@ -1,16 +1,8 @@ /* eslint-disable no-param-reassign */ import { OutputHashing } from '@angular-devkit/build-angular'; import { VERSION } from '@angular/cli'; -import { - ApplicationOptions, - dedupPaths, - getLoggerApi, - normalizePath -} from '@bitdev/angular.dev-services.common'; -import { - type ApplicationBuilderOptions, - buildApplicationInternal -} from '@bitdev/angular.dev-services.ng-compat'; +import { dedupPaths, getLoggerApi, normalizePath } from '@bitdev/angular.dev-services.common'; +import { type ApplicationBuilderOptions, buildApplicationInternal } from '@bitdev/angular.dev-services.ng-compat'; import { Logger } from '@teambit/logger'; import assert from 'assert'; import fs from 'fs-extra'; @@ -22,7 +14,7 @@ import definePlugin from './plugins/define.plugin.js'; import { getIndexInputFile } from './utils.js'; export type BuildApplicationOptions = { - angularOptions: Partial; + angularOptions: Partial; outputPath: string; sourceRoot: string; workspaceRoot: string; @@ -36,10 +28,10 @@ export type BuildApplicationOptions = { const BUILDER_NAME = '@angular-devkit/build-angular:application'; export async function buildApplication(options: BuildApplicationOptions): Promise { - const { angularOptions: { tsConfig, ssr, define }, envVars } = options; + const { angularOptions: { tsConfig, server, define }, envVars } = options; assert(tsConfig, 'tsConfig option is required'); - const isSsr = !!ssr && Number(VERSION.major) >= 17; - if (isSsr) { + const isSsr = !!server && Number(VERSION.major) >= 17; + if (isSsr && Number(VERSION.major) < 19) { addEntryServer(options); } const appOptions = getAppOptions(options, isSsr); @@ -58,7 +50,8 @@ export async function buildApplication(options: BuildApplicationOptions): Promis } } - if (isSsr) { + // Versions of Angular <19 require a nitro middleware to support SSR API endpoints + if (isSsr && Number(VERSION.major) < 19) { await buildNitro(options); } } @@ -68,7 +61,7 @@ function addEntryServer(options: BuildApplicationOptions): void { if (ssr && entryServer) { const fileContent = `import type { ApplicationRef } from '@angular/core'; import { renderApplication, renderModule } from '@angular/platform-server'; -import bootstrap from '${ server?.replace(extname(server), '') }'; +import bootstrap from '${server?.replace(extname(server), '')}'; function isBootstrapFn(value: unknown): value is () => Promise { // We can differentiate between a module and a bootstrap function by reading compiler-generated "ɵmod" static property: @@ -95,19 +88,20 @@ export default async function render(url: string, document: string) { } } -function getAppOptions(options: BuildApplicationOptions, isSsr: boolean): any { +function getAppOptions(options: BuildApplicationOptions, isSsr: boolean): ApplicationBuilderOptions { const { entryServer, angularOptions, outputPath, sourceRoot, workspaceRoot } = options; // declare constants for all reusable values here - const normalizedIndex = `./${ join(sourceRoot, 'index.html') }`; - const normalizedBrowser = `./${ join(sourceRoot, 'main.ts') }`; + const normalizedIndex = `./${join(sourceRoot, 'index.html')}`; + const normalizedBrowser = `./${join(sourceRoot, 'main.ts')}`; + const serverPath = `./${join(sourceRoot, 'main.server.ts')}`; const dedupedAssets = dedupPaths([posix.join(sourceRoot, `assets/**/*`), ...(angularOptions.assets ?? [])]); - const dedupedStyles = dedupPaths([posix.join(sourceRoot, `styles.${ angularOptions.inlineStyleLanguage }`), ...(angularOptions.styles ?? [])]); + const dedupedStyles = dedupPaths([posix.join(sourceRoot, `styles.${angularOptions.inlineStyleLanguage}`), ...(angularOptions.styles ?? [])]); return { ...angularOptions, - baseHref: angularOptions.baseHref ?? './', + baseHref: angularOptions.baseHref ?? '/', preserveSymlinks: false, outputPath, index: angularOptions.index ?? normalizedIndex, @@ -117,13 +111,14 @@ function getAppOptions(options: BuildApplicationOptions, isSsr: boolean): any { styles: dedupedStyles, scripts: angularOptions.scripts, namedChunks: angularOptions.namedChunks ?? true, - optimization: angularOptions.optimization ?? true, + optimization: false,//angularOptions.optimization ?? true, aot: true, deleteOutputPath: true, sourceMap: angularOptions.sourceMap ?? true, - outputHashing: angularOptions.outputHashing ?? OutputHashing.All, + outputHashing: OutputHashing.None,//angularOptions.outputHashing ?? OutputHashing.All, watch: false, - server: isSsr ? angularOptions.server : undefined, + outputMode: angularOptions.outputMode ?? (isSsr ? 'server' : 'static'), + server: isSsr ? angularOptions.server ?? serverPath : undefined, prerender: isSsr ? (angularOptions.prerender ?? !!angularOptions.server) : undefined, ssr: isSsr ? { entry: entryServer @@ -149,14 +144,15 @@ function getBuilderContext(options: BuildApplicationOptions, appOptions: Applica project: 'bit-ng-app-builder', target: 'build' }, - getProjectMetadata: function(projectName: string): Promise { + getProjectMetadata: function (): Promise { return Promise.resolve({ root: '', sourceRoot, cli: { cache: { enabled: true, path: resolve(tempFolder, 'angular/cache') } } }); }, - addTeardown: () => {}, + addTeardown: () => { + }, getBuilderNameForTarget: () => Promise.resolve(BUILDER_NAME), getTargetOptions: () => Promise.resolve(appOptions as any), validateOptions: () => Promise.resolve(appOptions as any) @@ -177,18 +173,18 @@ async function getNitroConfig(options: BuildApplicationOptions): Promise= 17; const appOptions = getAppOptions(options, isSsr); const builderContext = getBuilderContext(options, appOptions); - const devServerOptions = isSsr ? { - buildPlugins: [definePlugin({ ...envVars, ...define })], - middleware: [await createNitroApiMiddleware(options)] - } : undefined; + const devServerOptions: any = { + buildPlugins: [], + middleware: [] + }; + if (isSsr) { + devServerOptions.buildPlugins = [definePlugin({ ...envVars, ...define })]; + + // Versions of Angular <19 require a nitro middleware to support SSR API endpoints + if (Number(VERSION.major) < 19) { + devServerOptions.middleware = [await createNitroApiMiddleware(options)]; + } + } // @ts-ignore only v17+ has 4 arguments, previous versions only have 3 await executeDevServerBuilder(appOptions, builderContext as any, undefined, devServerOptions).toPromise(); @@ -57,16 +58,16 @@ export async function serveApplication(options: ServeApplicationOptions): Promis function getAppOptions(options: ServeApplicationOptions, isSsr: boolean): ApplicationBuilderOptions & DevServerBuilderOptions { const { angularOptions, port, sourceRoot, workspaceRoot } = options; // declare constants for all reusable values here - const normalizedIndex = `./${ join(sourceRoot, 'index.html') }`; - const normalizedBrowser = `./${ join(sourceRoot, 'main.ts') }`; - const serverPath = `./${ join(sourceRoot, 'main.server.ts') }`; + const normalizedIndex = `./${join(sourceRoot, 'index.html')}`; + const normalizedBrowser = `./${join(sourceRoot, 'main.ts')}`; + const serverPath = `./${join(sourceRoot, 'main.server.ts')}`; const dedupedAssets = dedupPaths([posix.join(sourceRoot, `assets/**/*`), ...(angularOptions.assets ?? [])]); - const dedupedStyles = dedupPaths([posix.join(sourceRoot, `styles.${ angularOptions.inlineStyleLanguage }`), ...(angularOptions.styles ?? [])]); + const dedupedStyles = dedupPaths([posix.join(sourceRoot, `styles.${angularOptions.inlineStyleLanguage}`), ...(angularOptions.styles ?? [])]); return { ...angularOptions, - baseHref: angularOptions.baseHref, + baseHref: angularOptions.baseHref ?? '/', preserveSymlinks: false, outputPath: OUTPUT_PATH, index: angularOptions.index ?? normalizedIndex, @@ -82,7 +83,9 @@ function getAppOptions(options: ServeApplicationOptions, isSsr: boolean): Applic sourceMap: angularOptions.sourceMap ?? true, outputHashing: angularOptions.outputHashing ?? OutputHashing.All, watch: true, - liveReload: true, + liveReload: angularOptions.liveReload ?? true, + hmr: angularOptions.hmr ?? false, + outputMode: angularOptions.outputMode ?? (isSsr ? 'server' : 'static'), server: isSsr ? angularOptions.server ?? serverPath : undefined, prerender: isSsr ? angularOptions.prerender ?? !!angularOptions.server : false, ssr: isSsr ? (angularOptions.ssr ?? !!angularOptions.server) : false, @@ -115,7 +118,8 @@ function getBuilderContext(options: ServeApplicationOptions, appOptions: Applica target: 'development' }, getProjectMetadata: getProjectMetadata(options), - addTeardown: () => {}, + addTeardown: () => { + }, getBuilderNameForTarget: () => Promise.resolve(BUILDER_NAME), getTargetOptions: () => Promise.resolve(appOptions as any), validateOptions: () => Promise.resolve(appOptions as any) @@ -124,7 +128,7 @@ function getBuilderContext(options: ServeApplicationOptions, appOptions: Applica function getProjectMetadata(options: ServeApplicationOptions) { const { sourceRoot, tempFolder } = options; - return function(projectName: string): Promise { + return function (): Promise { return Promise.resolve({ root: '', sourceRoot, @@ -144,8 +148,8 @@ function getNitroConfig(options: ServeApplicationOptions): NitroConfig { return { rootDir, logLevel: 2, - srcDir: normalizePath(`${ rootDir }/src/server`), - scanDirs: [normalizePath(`${ rootDir }/src/server`)], + srcDir: normalizePath(`${rootDir}/src/server`), + scanDirs: [normalizePath(`${rootDir}/src/server`)], buildDir: resolve(tempFolder, 'nitro') }; } @@ -164,7 +168,7 @@ async function createNitroApiMiddleware(options: ServeApplicationOptions): Promi const server = createDevServer(nitro); await build(nitro); - return async( + return async ( req: any, res: any, next: any diff --git a/angular/app-types/angular-app-type/component.json b/angular/app-types/angular-app-type/component.json index 96268c37..2d867f2a 100644 --- a/angular/app-types/angular-app-type/component.json +++ b/angular/app-types/angular-app-type/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "app-types/angular-app-type", - "version": "6.0.11" + "version": "7.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/common/component.json b/angular/devkit/common/component.json index 276a3079..ba1521f4 100644 --- a/angular/devkit/common/component.json +++ b/angular/devkit/common/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/common", - "version": "6.0.8" + "version": "7.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/common/generic-angular-env.ts b/angular/devkit/common/generic-angular-env.ts index 2fe4918d..eff1a663 100644 --- a/angular/devkit/common/generic-angular-env.ts +++ b/angular/devkit/common/generic-angular-env.ts @@ -1,7 +1,8 @@ import type { ApplicationBuilderOptions, BrowserBuilderOptions, - DevServerBuilderOptions + DevServerBuilderOptions, + OutputMode } from '@bitdev/angular.dev-services.ng-compat'; import { AppsEnv } from '@teambit/application'; import { BuilderEnv } from '@teambit/builder'; @@ -11,7 +12,7 @@ import { AngularEnvOptions } from './env-options'; export type BrowserOptions = Omit & {inlineStyleLanguage?: "css" | "less" | "sass" | "scss"}; export type DevServerOptions = Omit; -export type ApplicationOptions = Omit +export type ApplicationOptions = Omit & {inlineStyleLanguage?: "css" | "less" | "sass" | "scss", outputMode?: "static" | "server" | OutputMode}; export interface GenericAngularEnv extends AppsEnv, diff --git a/angular/devkit/compiler/elements/component.json b/angular/devkit/compiler/elements/component.json index 85415816..5bc0edf8 100644 --- a/angular/devkit/compiler/elements/component.json +++ b/angular/devkit/compiler/elements/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/compiler/elements", - "version": "6.0.8" + "version": "7.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/compiler/multi-compiler/component.json b/angular/devkit/compiler/multi-compiler/component.json index ea4a2499..fa39597c 100644 --- a/angular/devkit/compiler/multi-compiler/component.json +++ b/angular/devkit/compiler/multi-compiler/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/compiler/multi-compiler", - "version": "6.0.9" + "version": "7.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/compiler/ng-packagr/component.json b/angular/devkit/compiler/ng-packagr/component.json index 386d37dd..851d5988 100644 --- a/angular/devkit/compiler/ng-packagr/component.json +++ b/angular/devkit/compiler/ng-packagr/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/compiler/ng-packagr", - "version": "6.0.9" + "version": "7.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/linter/eslint/component.json b/angular/devkit/linter/eslint/component.json index 0d744b5f..1f1625fc 100644 --- a/angular/devkit/linter/eslint/component.json +++ b/angular/devkit/linter/eslint/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/linter/eslint", - "version": "3.0.3" + "version": "4.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/ng-compat/build-angular/schemas/application.schema.ts b/angular/devkit/ng-compat/build-angular/schemas/application.schema.ts index 1ec89c9a..85a5f110 100644 --- a/angular/devkit/ng-compat/build-angular/schemas/application.schema.ts +++ b/angular/devkit/ng-compat/build-angular/schemas/application.schema.ts @@ -3,7 +3,8 @@ */ export interface ApplicationBuilderOptions { /** - * A list of CommonJS packages that are allowed to be used without a build time warning. + * A list of CommonJS or AMD packages that are allowed to be used without a build time + * warning. Use `'*'` to allow all. */ allowedCommonJsDependencies?: string[]; /** @@ -32,20 +33,33 @@ export interface ApplicationBuilderOptions { * set. */ budgets?: Budget[]; + /** + * Automatically clear the terminal screen during rebuilds. + */ + clearScreen?: boolean; /** * Define the crossorigin attribute setting of elements that provide CORS support. */ crossOrigin?: CrossOrigin; + /** + * Defines global identifiers that will be replaced with a specified constant value when + * found in any JavaScript or TypeScript code including libraries. The value will be used + * directly. String values must be put in quotes. Identifiers within Angular metadata such + * as Component Decorators will not be replaced. + */ + define?: { + [key: string]: string; + }; /** * Delete the output path before building. */ deleteOutputPath?: boolean; /** - * Defines global identifiers that will be replaced with a specified constant value when found in any JavaScript or TypeScript code including libraries. - * The value will be used directly. - * String values must be put in quotes. Identifiers within Angular metadata such as Component Decorators will not be replaced. + * Customize the base path for the URLs of resources in 'index.html' and component + * stylesheets. This option is only necessary for specific deployment scenarios, such as + * with Angular Elements or when utilizing different CDN locations. */ - define?: any; + deployUrl?: string; /** * Exclude the listed external dependencies from being bundled into the bundle. Instead, the * created bundle relies on these dependencies to be available during runtime. @@ -74,7 +88,16 @@ export interface ApplicationBuilderOptions { /** * The stylesheet language to use for the application's inline component styles. */ - inlineStyleLanguage?: "css" | "less" | "sass" | "scss"; + inlineStyleLanguage?: InlineStyleLanguage; + /** + * Defines the type of loader to use with a specified file extension when used with a + * JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content + * as a Uint8Array; `file` emits the file and provides the runtime location of the file; + * `empty` considers the content to be empty and not include it in bundles. + */ + loader?: { + [key: string]: any; + }; /** * Translate the bundles in one or more locales. */ @@ -87,7 +110,7 @@ export interface ApplicationBuilderOptions { * Enables optimization of the build output. Including minification of scripts and styles, * tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For * more information, see - * https://angular.io/guide/workspace-config#optimization-configuration. + * https://angular.dev/reference/configs/workspace-config#optimization-configuration. */ optimization?: OptimizationUnion; /** @@ -95,9 +118,15 @@ export interface ApplicationBuilderOptions { */ outputHashing?: OutputHashing; /** - * The full path for the new output directory, relative to the current workspace. + * Defines the build output target. 'static': Generates a static site for deployment on any + * static hosting service. 'server': Produces an application designed for deployment on a + * server that supports server-side rendering (SSR). + */ + outputMode?: OutputMode | 'static' | 'server'; + /** + * Specify the output path relative to workspace root. */ - outputPath: string; + outputPath: OutputPathUnion; /** * Enable and define the file watching poll time period in milliseconds. */ @@ -124,6 +153,10 @@ export interface ApplicationBuilderOptions { * Global scripts to be included in the build. */ scripts?: ScriptElement[]; + /** + * Security features to protect against XSS and other common attacks + */ + security?: Security; /** * The full path for the server entry point to the application, relative to the current * workspace. @@ -135,13 +168,13 @@ export interface ApplicationBuilderOptions { serviceWorker?: ServiceWorker; /** * Output source maps for scripts and styles. For more information, see - * https://angular.io/guide/workspace-config#source-map-configuration. + * https://angular.dev/reference/configs/workspace-config#source-map-configuration. */ sourceMap?: SourceMapUnion; /** * Server side render (SSR) pages of your application during runtime. */ - ssr?: boolean; + ssr?: SsrUnion; /** * Generates a 'stats.json' file which can be analyzed with * https://esbuild.github.io/analyze/. @@ -198,7 +231,7 @@ export interface AssetPatternClass { /** * Absolute path within the output. */ - output: string; + output?: string; } export interface Budget { /** @@ -286,8 +319,22 @@ export interface IndexObject { * will be used and will be considered relative to the application's configured output path. */ output?: string; + /** + * Generates 'preload', 'modulepreload', and 'preconnect' link elements for initial + * application files and resources. + */ + preloadInitial?: boolean; [property: string]: any; } +/** + * The stylesheet language to use for the application's inline component styles. + */ +export declare enum InlineStyleLanguage { + Css = "css", + Less = "less", + Sass = "sass", + Scss = "scss" +} /** * Translate the bundles in one or more locales. */ @@ -296,7 +343,7 @@ export type Localize = string[] | boolean; * Enables optimization of the build output. Including minification of scripts and styles, * tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For * more information, see - * https://angular.io/guide/workspace-config#optimization-configuration. + * https://angular.dev/reference/configs/workspace-config#optimization-configuration. */ export type OptimizationUnion = boolean | OptimizationClass; export interface OptimizationClass { @@ -341,6 +388,11 @@ export interface StylesClass { * identifiers and minimizing values. */ minify?: boolean; + /** + * Remove comments in global CSS that contains '@license' or '@preserve' or that starts with + * '//!' or '/*!'. + */ + removeSpecialComments?: boolean; } /** * Define the output filename cache-busting hashing mode. @@ -351,6 +403,40 @@ export declare enum OutputHashing { Media = "media", None = "none" } +/** + * Defines the build output target. 'static': Generates a static site for deployment on any + * static hosting service. 'server': Produces an application designed for deployment on a + * server that supports server-side rendering (SSR). + */ +export declare enum OutputMode { + Server = "server", + Static = "static" +} +/** + * Specify the output path relative to workspace root. + */ +export type OutputPathUnion = OutputPathClass | string; +export interface OutputPathClass { + /** + * Specify the output path relative to workspace root. + */ + base: string; + /** + * The output directory name of your browser build within the output path base. Defaults to + * 'browser'. + */ + browser?: string; + /** + * The output directory name of your media files within the output browser directory. + * Defaults to 'media'. + */ + media?: string; + /** + * The output directory name of your server build within the output path base. Defaults to + * 'server'. + */ + server?: string; +} /** * Prerender (SSG) pages of your application during build time. */ @@ -382,13 +468,38 @@ export interface ScriptClass { */ input: string; } +/** + * Security features to protect against XSS and other common attacks + */ +export interface Security { + /** + * Enables automatic generation of a hash-based Strict Content Security Policy + * (https://web.dev/articles/strict-csp#choose-hash) based on scripts in index.html. Will + * default to true once we are out of experimental/preview phases. + */ + autoCsp?: AutoCspUnion; +} +/** + * Enables automatic generation of a hash-based Strict Content Security Policy + * (https://web.dev/articles/strict-csp#choose-hash) based on scripts in index.html. Will + * default to true once we are out of experimental/preview phases. + */ +export type AutoCspUnion = boolean | AutoCspClass; +export interface AutoCspClass { + /** + * Include the `unsafe-eval` directive (https://web.dev/articles/strict-csp#remove-eval) in + * the auto-CSP. Please only enable this if you are absolutely sure that you need to, as + * allowing calls to eval will weaken the XSS defenses provided by the auto-CSP. + */ + unsafeEval?: boolean; +} /** * Generates a service worker configuration. */ export type ServiceWorker = boolean | string; /** * Output source maps for scripts and styles. For more information, see - * https://angular.io/guide/workspace-config#source-map-configuration. + * https://angular.dev/reference/configs/workspace-config#source-map-configuration. */ export type SourceMapUnion = boolean | SourceMapClass; export interface SourceMapClass { @@ -409,6 +520,47 @@ export interface SourceMapClass { */ vendor?: boolean; } +/** + * Server side render (SSR) pages of your application during runtime. + */ +export type SsrUnion = boolean | SsrClass; +export interface SsrClass { + /** + * The server entry-point that when executed will spawn the web server. + */ + entry?: string; + /** + * Specifies the platform for which the server bundle is generated. This affects the APIs + * and modules available in the server-side code. + * + * - `node`: (Default) Generates a bundle optimized for Node.js environments. + * - `neutral`: Generates a platform-neutral bundle suitable for environments like edge + * workers, and other serverless platforms. This option avoids using Node.js-specific APIs, + * making the bundle more portable. + * + * Please note that this feature does not provide polyfills for Node.js modules. + * Additionally, it is experimental, and the schematics may undergo changes in future + * versions. + */ + experimentalPlatform?: ExperimentalPlatform; +} +/** + * Specifies the platform for which the server bundle is generated. This affects the APIs + * and modules available in the server-side code. + * + * - `node`: (Default) Generates a bundle optimized for Node.js environments. + * - `neutral`: Generates a platform-neutral bundle suitable for environments like edge + * workers, and other serverless platforms. This option avoids using Node.js-specific APIs, + * making the bundle more portable. + * + * Please note that this feature does not provide polyfills for Node.js modules. + * Additionally, it is experimental, and the schematics may undergo changes in future + * versions. + */ +export declare enum ExperimentalPlatform { + Neutral = "neutral", + Node = "node" +} /** * Options to pass to style preprocessors. */ @@ -417,6 +569,32 @@ export interface StylePreprocessorOptions { * Paths to include. Paths will be resolved to workspace root. */ includePaths?: string[]; + /** + * Options to pass to the sass preprocessor. + */ + sass?: Sass; +} +/** + * Options to pass to the sass preprocessor. + */ +export interface Sass { + /** + * A set of deprecations to treat as fatal. If a deprecation warning of any provided type is + * encountered during compilation, the compiler will error instead. If a Version is + * provided, then all deprecations that were active in that compiler version will be treated + * as fatal. + */ + fatalDeprecations?: string[]; + /** + * A set of future deprecations to opt into early. Future deprecations passed here will be + * treated as active by the compiler, emitting warnings as necessary. + */ + futureDeprecations?: string[]; + /** + * A set of active deprecations to ignore. If a deprecation warning of any provided type is + * encountered during compilation, the compiler will ignore it instead. + */ + silenceDeprecations?: string[]; } export type StyleElement = StyleClass | string; export interface StyleClass { diff --git a/angular/devkit/ng-compat/component.json b/angular/devkit/ng-compat/component.json index 612b59c7..b59015b9 100644 --- a/angular/devkit/ng-compat/component.json +++ b/angular/devkit/ng-compat/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/ng-compat", - "version": "3.0.3" + "version": "4.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/preview/mounter/component.json b/angular/devkit/preview/mounter/component.json index 4a4815e1..ac223e0e 100644 --- a/angular/devkit/preview/mounter/component.json +++ b/angular/devkit/preview/mounter/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/preview/mounter", - "version": "3.0.3" + "version": "4.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/preview/preview-app/preview-app/src/app/app.component.ts b/angular/devkit/preview/preview-app/preview-app/src/app/app.component.ts index a9b5f21c..7c3812f8 100644 --- a/angular/devkit/preview/preview-app/preview-app/src/app/app.component.ts +++ b/angular/devkit/preview/preview-app/preview-app/src/app/app.component.ts @@ -3,6 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-root', + standalone: false, template: ``, styleUrls: ['./app.component.scss'], }) diff --git a/angular/devkit/preview/preview-app/preview-app/src/app/docs/docs.component.ts b/angular/devkit/preview/preview-app/preview-app/src/app/docs/docs.component.ts index 56d3ffe9..4ac6a467 100644 --- a/angular/devkit/preview/preview-app/preview-app/src/app/docs/docs.component.ts +++ b/angular/devkit/preview/preview-app/preview-app/src/app/docs/docs.component.ts @@ -3,6 +3,7 @@ import { Component, Input, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'app-docs', + standalone: false, template: `
`, styleUrls: ['./docs.style.scss'], }) diff --git a/angular/devkit/preview/preview-app/preview-app/src/app/docs/safe-html.pipe.ts b/angular/devkit/preview/preview-app/preview-app/src/app/docs/safe-html.pipe.ts index 28bb00c8..1b8259aa 100644 --- a/angular/devkit/preview/preview-app/preview-app/src/app/docs/safe-html.pipe.ts +++ b/angular/devkit/preview/preview-app/preview-app/src/app/docs/safe-html.pipe.ts @@ -4,6 +4,7 @@ import { DomSanitizer } from '@angular/platform-browser'; import dompurify from 'dompurify'; @Pipe({ + standalone: false, name: 'safeHtml' }) export class SafeHtmlPipe implements PipeTransform { diff --git a/angular/devkit/preview/preview-app/preview-app/src/app/lazy-load/lazy-load.component.ts b/angular/devkit/preview/preview-app/preview-app/src/app/lazy-load/lazy-load.component.ts index 9c9888fe..b43b182d 100644 --- a/angular/devkit/preview/preview-app/preview-app/src/app/lazy-load/lazy-load.component.ts +++ b/angular/devkit/preview/preview-app/preview-app/src/app/lazy-load/lazy-load.component.ts @@ -14,6 +14,7 @@ import { import { DocsComponent } from '../docs/docs.component'; @Component({ + standalone: false, selector: 'app-lazy-load', template: `` }) diff --git a/angular/devkit/preview/preview/component.json b/angular/devkit/preview/preview/component.json index b8450290..2f69f3d4 100644 --- a/angular/devkit/preview/preview/component.json +++ b/angular/devkit/preview/preview/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/preview/preview", - "version": "6.0.8" + "version": "7.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/preview/runtime/component.json b/angular/devkit/preview/runtime/component.json index 11569830..51a98bab 100644 --- a/angular/devkit/preview/runtime/component.json +++ b/angular/devkit/preview/runtime/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/preview/runtime", - "version": "3.0.3" + "version": "4.0.0" }, "propagate": false, "extensions": { diff --git a/angular/devkit/webpack/component.json b/angular/devkit/webpack/component.json index cce3c5a5..bb15d913 100644 --- a/angular/devkit/webpack/component.json +++ b/angular/devkit/webpack/component.json @@ -2,7 +2,7 @@ "componentId": { "scope": "bitdev.angular", "name": "dev-services/webpack", - "version": "6.0.8" + "version": "7.0.0" }, "propagate": false, "extensions": { diff --git a/angular/envs/angular-env/angular.bit-env.ts b/angular/envs/angular-env/angular.bit-env.ts index 231a71a4..6d0bbb5f 100644 --- a/angular/envs/angular-env/angular.bit-env.ts +++ b/angular/envs/angular-env/angular.bit-env.ts @@ -1,10 +1,10 @@ -import { AngularV18Env } from '@bitdev/angular.envs.angular-v18-env'; +import { AngularV19Env } from '@bitdev/angular.envs.angular-v19-env'; import { NativeCompileCache } from '@teambit/toolbox.performance.v8-cache'; // Disable v8-caching because it breaks ESM loaders NativeCompileCache.uninstall(); -export class AngularEnv extends AngularV18Env { +export class AngularEnv extends AngularV19Env { name = 'Angular'; } diff --git a/angular/envs/angular-env/angular.docs.mdx b/angular/envs/angular-env/angular.docs.mdx index 7987ca42..e882b7a2 100644 --- a/angular/envs/angular-env/angular.docs.mdx +++ b/angular/envs/angular-env/angular.docs.mdx @@ -19,7 +19,7 @@ import { EnvOverview } from '@teambit/envs.docs.env-overview-template'; { name: 'Jest', configFiles: [ - 'https://bit.cloud/bitdev/angular/envs/angular-v18/~code/jest/jest.config.ts', + 'https://bit.cloud/bitdev/angular/envs/angular-v19/~code/jest/jest.config.ts', ], }, { @@ -51,7 +51,7 @@ import { EnvOverview } from '@teambit/envs.docs.env-overview-template'; { name: 'Jest', configFiles: [ - 'https://bit.cloud/bitdev/angular/envs/angular-v18/~code/jest/jest.config.ts', + 'https://bit.cloud/bitdev/angular/envs/angular-v19/~code/jest/jest.config.ts', ], }, ], diff --git a/angular/envs/angular-env/component.json b/angular/envs/angular-env/component.json index d1196162..3898d73c 100644 --- a/angular/envs/angular-env/component.json +++ b/angular/envs/angular-env/component.json @@ -2,35 +2,35 @@ "componentId": { "scope": "bitdev.angular", "name": "angular-env", - "version": "6.0.13" + "version": "7.1.0" }, "propagate": false, "extensions": { "teambit.dependencies/dependency-resolver": { "policy": { "dependencies": { - "@angular-devkit/architect": "0.1800.0", - "@angular-devkit/build-angular": "^18.0.0", - "@angular-devkit/build-webpack": "0.1800.0", - "@angular-devkit/core": "^18.0.0", - "@angular-devkit/schematics": "^18.0.0", + "@angular-devkit/architect": "~0.1900.0", + "@angular-devkit/build-angular": "^19.0.0", + "@angular-devkit/build-webpack": "~0.1900.0", + "@angular-devkit/core": "^19.0.0", + "@angular-devkit/schematics": "^19.0.0", "@angular-eslint/eslint-plugin": "~17.4.1", "@angular-eslint/eslint-plugin-template": "~17.4.1", "@angular-eslint/template-parser": "~17.4.1", - "@angular/animations": "^18.0.0", - "@angular/build": "^18.0.0", - "@angular/cli": "^18.0.0", - "@angular/common": "^18.0.0", - "@angular/compiler": "^18.0.0", - "@angular/compiler-cli": "^18.0.0", - "@angular/core": "^18.0.0", - "@angular/elements": "^18.0.0", - "@angular/platform-browser": "^18.0.0", - "@angular/platform-browser-dynamic": "^18.0.0", - "@angular/platform-server": "^18.0.0", - "@angular/ssr": "^18.0.0", + "@angular/animations": "^19.0.0", + "@angular/build": "^19.0.0", + "@angular/cli": "^19.0.0", + "@angular/common": "^19.0.0", + "@angular/compiler": "^19.0.0", + "@angular/compiler-cli": "^19.0.0", + "@angular/core": "^19.0.0", + "@angular/elements": "^19.0.0", + "@angular/platform-browser": "^19.0.0", + "@angular/platform-browser-dynamic": "^19.0.0", + "@angular/platform-server": "^19.0.0", + "@angular/ssr": "^19.0.0", "@jest/globals": "^29.3.1", - "@ngtools/webpack": "^18.0.0", + "@ngtools/webpack": "^19.0.0", "@types/eslint": "^8.40.0", "@types/jest": "^29.5.0", "@types/react-dev-utils": "~9.0.8", @@ -44,12 +44,10 @@ "jest": "^29.5.0", "jest-environment-jsdom": "^29.0.3", "jest-environment-node": "^29.0.3", - "jest-preset-angular": "~14.1.0", - "ng-packagr": "^18.0.0", - "postcss": "8.4.38", - "postcss-flexbugs-fixes": "5.0.2", + "jest-preset-angular": "~14.4.0", + "ng-packagr": "^19.0.0", + "postcss": "8.4.47", "postcss-loader": "8.1.1", - "postcss-preset-env": "8.1.0", "remark": "~13.0.0", "remark-loader": "~4.0.0", "resolve-url-loader": "5.0.0", @@ -58,11 +56,11 @@ "style-loader": "^2.0.0", "ts-node": "^10.9.1", "tslib": "^2.6.2", - "typescript": "~5.4.5", - "webpack": "5.91.0", - "webpack-dev-middleware": "7.2.1", - "webpack-dev-server": "5.0.4", - "zone.js": "~0.14.0" + "typescript": "~5.6.2", + "webpack": "5.96.1", + "webpack-dev-middleware": "7.4.2", + "webpack-dev-server": "5.1.0", + "zone.js": "~0.15.0" }, "peerDependencies": { "rxjs": "~7.8.0" diff --git a/angular/envs/angular-env/env.jsonc b/angular/envs/angular-env/env.jsonc index 61377647..d345a517 100644 --- a/angular/envs/angular-env/env.jsonc +++ b/angular/envs/angular-env/env.jsonc @@ -31,10 +31,16 @@ "hidden": true, "force": true }, + { + "name": "@types/express", + "version": "^4.16.0", + "hidden": true, + "force": true + }, { "name": "jest-preset-angular", - "version": "~14.1.0", - "supportedRange": "~14.1.0", + "version": "~14.4.0", + "supportedRange": "~14.4.0", "hidden": true, "force": true } @@ -42,53 +48,73 @@ "peers": [ { "name": "@angular/animations", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "^19.0.0" + }, + { + "name": "@angular/build", + "version": "^19.0.0", + "supportedRange": "^19.0.0" }, { "name": "@angular/common", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "^19.0.0" }, { "name": "@angular/compiler", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "^19.0.0" }, { "name": "@angular/compiler-cli", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "^19.0.0" }, { "name": "@angular/core", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "^19.0.0" }, { "name": "@angular/forms", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "^19.0.0" }, { "name": "@angular/platform-browser", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "19.0.0" }, { "name": "@angular/platform-browser-dynamic", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "^19.0.0" }, { "name": "@angular/platform-server", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "^19.0.0" }, { "name": "@angular/router", - "version": "^18.0.0", - "supportedRange": "^18.0.0" + "version": "^19.0.0", + "supportedRange": "^19.0.0" + }, + { + "name": "@angular/ssr", + "version": "^19.0.0", + "supportedRange": "^19.0.0" + }, + { + "name": "@types/eslint", + "version": "^8.40.0", + "supportedRange": "^8.40.0" + }, + { + "name": "express", + "version": "~4.21.1", + "supportedRange": "^4.21.0" }, { "name": "jest", @@ -103,7 +129,7 @@ { "name": "rxjs", "version": "^7.8.1", - "supportedRange": "^6.5.3 || ^7.4.0" + "supportedRange": "^7.0.0" }, { "name": "tslib", @@ -112,13 +138,13 @@ }, { "name": "typescript", - "version": "~5.4.5", - "supportedRange": ">=5.4.0 <5.5.0" + "version": "~5.6.2", + "supportedRange": ">=5.5.0 <5.7.0" }, { "name": "zone.js", - "version": "~0.14.0", - "supportedRange": "~0.14.0" + "version": "~0.15.0", + "supportedRange": "~0.15.0" } ] }, diff --git a/angular/envs/angular-env/index.ts b/angular/envs/angular-env/index.ts index 0673a175..c54c49f0 100644 --- a/angular/envs/angular-env/index.ts +++ b/angular/envs/angular-env/index.ts @@ -1,4 +1,4 @@ export { AngularEnv } from './angular.bit-env.js'; -export { ngEnvOptions } from '@bitdev/angular.envs.angular-v18-env'; +export { ngEnvOptions } from '@bitdev/angular.envs.angular-v19-env'; // @ts-ignore export { default as jestConfig } from './jest/jest.config.cjs'; diff --git a/angular/envs/angular-env/jest/jest.config.cjs b/angular/envs/angular-env/jest/jest.config.cjs index e612ba7f..e925ae9a 100644 --- a/angular/envs/angular-env/jest/jest.config.cjs +++ b/angular/envs/angular-env/jest/jest.config.cjs @@ -1,3 +1,3 @@ -const jestConfig = require('@bitdev/angular.envs.angular-v18-env/jest/jest.config.cjs'); +const jestConfig = require('@bitdev/angular.envs.angular-v19-env/jest/jest.config.cjs'); module.exports = jestConfig; diff --git a/angular/envs/angular-v13-env/angular-v13-env.bit-env.ts b/angular/envs/angular-v13-env/angular-v13-env.bit-env.ts deleted file mode 100644 index 18b65405..00000000 --- a/angular/envs/angular-v13-env/angular-v13-env.bit-env.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { AngularEnvOptions } from '@bitdev/angular.dev-services.common'; -import { AngularBaseEnv } from '@bitdev/angular.envs.base-env'; -import { NativeCompileCache } from '@teambit/toolbox.performance.v8-cache'; -import { createRequire } from 'node:module'; -import { webpackConfigFactory } from './webpack-config.factory.js'; - -// Disable v8-caching because it breaks ESM loaders -NativeCompileCache.uninstall(); - -const require = createRequire(import.meta.url); - -export const ngEnvOptions: AngularEnvOptions = { - useAngularElementsPreview: false, - // angularElementsModulePath: require.resolve('@angular/elements'), - jestConfigPath: require.resolve('./jest/jest.config.cjs'), - jestModulePath: require.resolve('jest'), - ngPackagrModulePath: import.meta.resolve('ng-packagr'), - webpackConfigFactory, - webpackDevServerModulePath: require.resolve('webpack-dev-server'), - // resolving to the webpack used by angular devkit to avoid multiple instances of webpack - // otherwise, if we use a different version, it would break - webpackModulePath: require.resolve('webpack', { paths: [require.resolve('@angular-devkit/build-angular')] }) -} - -export class AngularV13Env extends AngularBaseEnv { - /** - * name of the environment. used for friendly mentions across bit. - */ - name = 'angular-v13-env'; - - angularVersion = 13; - - ngEnvOptions: AngularEnvOptions = ngEnvOptions; -} - -export default new AngularV13Env(); diff --git a/angular/envs/angular-v13-env/angular-v13-env.docs.mdx b/angular/envs/angular-v13-env/angular-v13-env.docs.mdx deleted file mode 100644 index df055655..00000000 --- a/angular/envs/angular-v13-env/angular-v13-env.docs.mdx +++ /dev/null @@ -1,85 +0,0 @@ ---- -description: A Bit development environment for Angular Components -labels: ['angular', 'environment', 'env', 'aspect', 'extension'] ---- - -import { EnvOverview } from '@teambit/envs.docs.env-overview-template'; - - diff --git a/angular/envs/angular-v13-env/component.json b/angular/envs/angular-v13-env/component.json deleted file mode 100644 index 12b98831..00000000 --- a/angular/envs/angular-v13-env/component.json +++ /dev/null @@ -1,68 +0,0 @@ -{ - "componentId": { - "scope": "bitdev.angular", - "name": "envs/angular-v13-env", - "version": "6.0.13" - }, - "propagate": false, - "extensions": { - "teambit.dependencies/dependency-resolver": { - "policy": { - "dependencies": { - "@angular-devkit/architect": "~0.1302.1", - "@angular-devkit/build-angular": "~13.2.1", - "@angular-devkit/build-optimizer": "~0.1302.1", - "@angular-devkit/build-webpack": "~0.1302.1", - "@angular-devkit/core": "~13.2.1", - "@angular-devkit/schematics": "~13.2.1", - "@angular-eslint/eslint-plugin": "~13.0.1", - "@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", - "@angular/core": "~13.2.0", - "@angular/elements": "~13.2.0", - "@angular/platform-browser": "~13.2.0", - "@angular/platform-browser-dynamic": "~13.2.0", - "@ngtools/webpack": "~13.2.1", - "@types/eslint": "^8.2.0", - "@types/jest": "^27.0.3", - "@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", - "events": "^3.2.0", - "html-loader": "~2.1.2", - "jest": "^27.4.4", - "jest-preset-angular": "~11.0.1", - "ng-packagr": "~13.2.1", - "remark": "~13.0.0", - "remark-loader": "~4.0.0", - "rxjs": "~7.4.0", - "ts-node": "^9.1.1", - "tslib": "^2.3.0", - "typescript": "~4.5.2", - "webpack": "5.60.0", - "webpack-dev-middleware": "5.2.1", - "webpack-dev-server": "4.4.0", - "zone.js": "~0.14.0" - } - } - }, - "bitdev.general/envs/bit-env@1.0.1": {}, - "teambit.envs/envs": {}, - "teambit.component/renaming": { - "renamedFrom": { - "scope": "bitdev.angular", - "name": "envs/v13", - "version": "6b894fe169bc5c2ac795be3338da8b321063f0c3" - } - } - } -} diff --git a/angular/envs/angular-v13-env/env.jsonc b/angular/envs/angular-v13-env/env.jsonc deleted file mode 100644 index 7e80be8e..00000000 --- a/angular/envs/angular-v13-env/env.jsonc +++ /dev/null @@ -1,126 +0,0 @@ -/** - * define the peer dependencies for your environment. - * these components would be resolved once for all components in - * in the dependency graph of your component. - **/ - { - "policy": { - "runtime": [ - { - "name": "tslib", - "version": "^2.3.0", - "supportedRange": "^2.3.0" - } - ], - /** - * dev dependencies resolved in the workspace - * for components using this env. these dependencies would not be defined - * as a direct component dependencies. they are used for component development only. - **/ - "dev": [ - { - "name": "@types/jest", - "version": "^27.0.3", - "supportedRange": "^27.0.0", - "hidden": true, - "force": true - }, - { - "name": "@types/node", - "version": "^12.11.1", - "hidden": true, - "force": true - }, - { - "name": "jest-preset-angular", - "version": "~11.0.1", - "supportedRange": "~11.0.1", - "hidden": true, - "force": true - } - ], - "peers": [ - { - "name": "@angular/animations", - "version": "~13.2.0", - "supportedRange": "^13.0.0" - }, - { - "name": "@angular/common", - "version": "~13.2.0", - "supportedRange": "^13.0.0" - }, - { - "name": "@angular/compiler", - "version": "~13.2.0", - "supportedRange": "^13.0.0" - }, - { - "name": "@angular/compiler-cli", - "version": "~13.2.0", - "supportedRange": "^13.0.0" - }, - { - "name": "@angular/core", - "version": "~13.2.0", - "supportedRange": "^13.0.0" - }, - { - "name": "@angular/forms", - "version": "~13.2.0", - "supportedRange": "^13.0.0" - }, - { - "name": "@angular/platform-browser", - "version": "~13.2.0", - "supportedRange": "^13.0.0" - }, - { - "name": "@angular/platform-browser-dynamic", - "version": "~13.2.0", - "supportedRange": "^13.0.0" - }, - { - "name": "@angular/router", - "version": "~13.2.0", - "supportedRange": "^13.0.0" - }, - { - "name": "jest", - "version": "^27.4.4", - "supportedRange": "^27.4.0" - }, - { - "name": "rxjs", - "version": "~7.4.0", - "supportedRange": "^6.5.5 || ^7.4.0" - }, - { - "name": "tslib", - "version": "^2.3.0", - "supportedRange": "^2.3.0" - }, - { - "name": "typescript", - "version": "~4.5.2", - "supportedRange": ">=4.4.4 <4.6.0" - }, - { - "name": "zone.js", - "version": "~0.14.0", - "supportedRange": "~0.14.0" - } - ] - }, - - /** - * used to define patterns to different - * files in your component and associate them with - * bit aspects. - **/ - "patterns": { - "compositions": ["**/*.composition.*", "**/*.preview.*"], - "docs": ["**/*.docs.*"], - "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"] - } -} diff --git a/angular/envs/angular-v13-env/jest/jest.config.cjs b/angular/envs/angular-v13-env/jest/jest.config.cjs deleted file mode 100644 index 49e64845..00000000 --- a/angular/envs/angular-v13-env/jest/jest.config.cjs +++ /dev/null @@ -1,27 +0,0 @@ -const { generateNodeModulesPattern } = require('@teambit/dependencies.modules.packages-excluder'); - -const packagesToExclude = ['@angular', '@ngrx', 'apollo-angular']; - -module.exports = { - preset: 'jest-preset-angular', - reporters: ['default'], - setupFilesAfterEnv: [require.resolve('./setup-jest.cjs')], - testPathIgnorePatterns: ['/.*/e2e/'], - globals: { - 'ts-jest': { - tsconfig: require.resolve('./tsconfig.spec.json'), - }, - }, - moduleNameMapper: { - // map angular modules to avoid duplicated modules - /* eslint-disable-next-line no-useless-escape */ - "(@angular\/.*)$": ["/node_modules/$1", "$1"] - }, - transformIgnorePatterns: [ - '^.+.module.(css|sass|scss)$', - generateNodeModulesPattern({ - packages: packagesToExclude, - excludeComponents: true, - }), - ], -}; diff --git a/angular/envs/angular-v13-env/jest/setup-jest.cjs b/angular/envs/angular-v13-env/jest/setup-jest.cjs deleted file mode 100644 index 7eacc2fd..00000000 --- a/angular/envs/angular-v13-env/jest/setup-jest.cjs +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable */ -require('jest-preset-angular/build/utils/reflect-metadata'); -require('zone.js'); -require('zone.js/bundles/zone-testing.umd'); -const getTestBed = require('@angular/core/testing').getTestBed; -const BrowserDynamicTestingModule = require('@angular/platform-browser-dynamic/testing').BrowserDynamicTestingModule; -const platformBrowserDynamicTesting = require('@angular/platform-browser-dynamic/testing') - .platformBrowserDynamicTesting; -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); diff --git a/angular/envs/angular-v13-env/tsconfig.json b/angular/envs/angular-v13-env/tsconfig.json deleted file mode 100644 index ee229f3a..00000000 --- a/angular/envs/angular-v13-env/tsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -// bit-generated-typescript-config - -{ - "extends": "./../../../node_modules/.cache/tsconfig.bit.f3b87b1c18fb9e87952d48c4888ed71964a4999d.json" -} \ No newline at end of file diff --git a/angular/envs/angular-v13-env/webpack-config.factory.ts b/angular/envs/angular-v13-env/webpack-config.factory.ts deleted file mode 100644 index 5528c8a3..00000000 --- a/angular/envs/angular-v13-env/webpack-config.factory.ts +++ /dev/null @@ -1,261 +0,0 @@ -/* eslint-disable no-param-reassign */ -import { OutputHashing } from '@angular-devkit/build-angular'; -import { getSystemPath, normalize, tags } from '@angular-devkit/core'; -import { BundlerSetup, dedupPaths, getLoggerApi } from '@bitdev/angular.dev-services.common'; -import type { BrowserBuilderOptions } from '@bitdev/angular.dev-services.ng-compat'; -import { - generateEntryPoints, - generateWebpackConfig, - getCommonConfig, - getDevServerConfig, - getIndexOutputFile, - getStylesConfig, - IndexHtmlWebpackPlugin, - normalizeBrowserSchema, - normalizeCacheOptions, - normalizeOptimization -} from '@bitdev/angular.dev-services.ng-compat'; -import { - WebpackBuildConfigFactoryOpts, - WebpackConfig, - WebpackConfigFactoryOpts, - WebpackServeConfigFactoryOpts -} from '@bitdev/angular.dev-services.webpack'; -import { BundlerContext, DevServerContext } from '@teambit/bundler'; -import { Logger } from '@teambit/logger'; -import { - runTransformersWithContext, - WebpackConfigMutator, - WebpackConfigTransformer, - WebpackConfigWithDevServer -} from '@teambit/webpack'; -import assert from 'assert'; -import { join, posix, resolve } from 'path'; -import { Configuration } from 'webpack'; -import { webpack5BuildConfigFactory } from './webpack/webpack5.build.config.js'; -import { webpack5ServeConfigFactory } from './webpack/webpack5.serve.config.js'; - -/** - * Migrate options from webpack-dev-server 3 to 4 - */ -function migrateConfiguration(webpackConfig: any): WebpackConfigWithDevServer | Configuration { - /** - * Removed logLevel in favor of built-in logger - * see https://webpack.js.org/configuration/other-options/#infrastructurelogginglevel - */ - delete webpackConfig.devServer.logLevel; - - // Removed contentBase in favor of the static option - delete webpackConfig.devServer.contentBase; - - // Removed publicPath in favor of the dev option - delete webpackConfig.devServer.publicPath; - - // Moved overlay to client option - webpackConfig.devServer.client = webpackConfig.devServer.client || {}; - webpackConfig.devServer.client.overlay = webpackConfig.devServer.overlay; - delete webpackConfig.devServer.overlay; - - // Removed in favor of the static option - delete webpackConfig.devServer.watchOptions; - - // Moved sockPath to client.webSocketURL.pathname option - // We let webpack handle that now - delete webpackConfig.devServer.sockPath; - - // Removed stats in favor of the stats options from webpack - delete webpackConfig.devServer.stats; - - // Removed in favor client.webSocketURL options - delete webpackConfig.devServer.public; - - // Removed watch to avoid "DEP_WEBPACK_WATCH_WITHOUT_CALLBACK" warning - delete webpackConfig.watch; - - // Removed in favor of manual setup entries. - delete webpackConfig.devServer.injectClient; - - // Cleaning up undefined values - Object.keys(webpackConfig.devServer).forEach((option) => { - if (typeof webpackConfig.devServer[option] === 'undefined') { - delete webpackConfig.devServer[option]; - } - }); - - delete webpackConfig.devServer.devMiddleware.publicPath; - delete webpackConfig.devServer.webSocketServer; - delete webpackConfig.devServer.client; - - return webpackConfig; -} - -async function getWebpackConfig( - _context: DevServerContext | BundlerContext, - entryFiles: string[], - tsconfigPath: string, - workspaceRoot: string, - logger: Logger, - setup: BundlerSetup, - angularOptions: Partial = {}, - sourceRoot = 'src' -): Promise { - assert(!(angularOptions as any).server, "SSR is only available for Angular v16+"); - - // Options from angular.json - const browserOptions: BrowserBuilderOptions = { - ...angularOptions, - baseHref: angularOptions.baseHref ?? './', - preserveSymlinks: false, - outputPath: 'public', // doesn't matter because it will be deleted from the config - index: angularOptions.index ?? join(sourceRoot, `index.html`), - main: angularOptions.main ?? join(sourceRoot, `main.ts`), - polyfills: angularOptions.polyfills ?? join(sourceRoot, `polyfills.ts`), - tsConfig: angularOptions.tsConfig ?? tsconfigPath, - assets: dedupPaths([posix.join(sourceRoot, `favicon.ico`), posix.join(sourceRoot, `assets`), ...(angularOptions.assets ?? [])]), - styles: dedupPaths([posix.join(sourceRoot, `styles.${ angularOptions.inlineStyleLanguage ?? 'scss' }`), ...(angularOptions.styles ?? [])]), - scripts: angularOptions.scripts, - vendorChunk: angularOptions.vendorChunk ?? true, - namedChunks: angularOptions.namedChunks ?? true, - optimization: angularOptions.optimization ?? setup === BundlerSetup.Build, - buildOptimizer: angularOptions.buildOptimizer ?? setup === BundlerSetup.Build, - aot: angularOptions.aot ?? true, - deleteOutputPath: angularOptions.deleteOutputPath ?? true, - sourceMap: angularOptions.sourceMap ?? true, - outputHashing: angularOptions.outputHashing ?? (setup === BundlerSetup.Build ? OutputHashing.All : OutputHashing.None), - watch: setup === BundlerSetup.Serve, - allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', '@teambit/preview', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])], - }; - - const normalizedWorkspaceRoot = normalize(workspaceRoot); - // used to load component config files, such as tailwind config, ... - const projectRoot = normalize(workspaceRoot); - const normalizedSourceRoot = normalize(sourceRoot); - - const normalizedOptions = normalizeBrowserSchema( - normalizedWorkspaceRoot, - projectRoot, - normalizedSourceRoot, - { - ...browserOptions - }, - { - cli: { - cache: { - // disable webpack cache for now because it seems to cause an infinite loop - // TODO(ocombe): investigate this, maybe change the path? - enabled: false - } - } - } - ); - - const loggerApi = getLoggerApi(logger); - - let webpackConfig: any = await generateWebpackConfig( - getSystemPath(normalizedWorkspaceRoot), - getSystemPath(projectRoot), - getSystemPath(normalizedSourceRoot), - 'bit-angular-v13-env', // projectName - normalizedOptions, - (wco: any) => [ - setup === BundlerSetup.Serve ? getDevServerConfig(wco) : {}, - getCommonConfig(wco), - getStylesConfig(wco), - ], - loggerApi, - {} - ); - - // @ts-ignore - if (angularOptions.hmr) { - logger.warn(tags.stripIndents`NOTICE: Hot Module Replacement (HMR) is enabled for the dev server. - See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`); - } - - // Add bit generated files to the list of entries - webpackConfig.entry.main.unshift(...entryFiles); - - const { scripts = [], styles = [] } = browserOptions; - const entrypoints = generateEntryPoints({ scripts, styles }); - const normalizedIndex = normalize(browserOptions.index as string); - const normalizedOptimization = normalizeOptimization(browserOptions.optimization); - if (!webpackConfig.plugins) { - webpackConfig.plugins = []; - } - const cacheOptions = normalizeCacheOptions({}, workspaceRoot); - webpackConfig.plugins.push( - new IndexHtmlWebpackPlugin({ - indexPath: resolve(workspaceRoot, browserOptions.index as string), - outputPath: getIndexOutputFile(normalizedIndex), - baseHref: browserOptions.baseHref || '/', - entrypoints, - deployUrl: browserOptions.deployUrl, - sri: browserOptions.subresourceIntegrity, - cache: cacheOptions, - postTransform: undefined, // IndexHtmlTransform - optimization: normalizedOptimization, - crossOrigin: browserOptions.crossOrigin, - lang: 'en-US', // TODO(ocombe) support locale - }) - ); - - // don't use the output path from angular - delete webpackConfig?.output?.path; - delete webpackConfig?.resolve?.modules; - webpackConfig.stats = 'errors-only'; - // uniqueName should not be an empty string - webpackConfig.output.uniqueName = 'angular-v13-env'; - - if (setup === BundlerSetup.Serve) { - webpackConfig = migrateConfiguration(webpackConfig); - } - - return webpackConfig; -} - -export async function webpackConfigFactory(opts: WebpackConfigFactoryOpts & WebpackServeConfigFactoryOpts & WebpackBuildConfigFactoryOpts): Promise { - const baseConfig = await getWebpackConfig( - opts.context, - opts.entryFiles, - opts.tsConfigPath, - opts.rootPath, - opts.logger, - opts.setup, - opts.angularOptions, - opts.sourceRoot - ) as WebpackConfigWithDevServer; - - let overwriteConfig: WebpackConfigWithDevServer; - if (opts.setup === BundlerSetup.Serve) { - overwriteConfig = webpack5ServeConfigFactory( - opts.devServerID, - opts.workspaceDir, - opts.entryFiles, - opts.publicRoot, - opts.publicPath, - opts.pubsub, - opts.nodeModulesPaths, - opts.tempFolder, - opts.plugins, - opts.isApp, - ); - } else { - overwriteConfig = webpack5BuildConfigFactory( - opts.entryFiles, - opts.outputPath, - opts.nodeModulesPaths, - opts.workspaceDir, - opts.tempFolder, - opts.plugins, - ) as any; - } - - const transformer: WebpackConfigTransformer = configMutator => configMutator.merge([baseConfig]); - const configMutator = new WebpackConfigMutator(overwriteConfig); - const afterMutation = runTransformersWithContext( - configMutator.clone(), - [transformer], - { mode: 'dev' } - ); - return afterMutation.raw as WebpackConfigWithDevServer; -} diff --git a/angular/envs/angular-v13-env/webpack/webpack5.build.config.ts b/angular/envs/angular-v13-env/webpack/webpack5.build.config.ts deleted file mode 100644 index 70372916..00000000 --- a/angular/envs/angular-v13-env/webpack/webpack5.build.config.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { BitDedupeModuleResolvePlugin, WebpackConfig } from '@bitdev/angular.dev-services.webpack'; -import { fallbacks, fallbacksAliases, fallbacksProvidePluginConfig } from '@teambit/webpack'; -import { sep } from 'path'; -import webpack from 'webpack'; -import { getWebpackAngularAliases } from '@bitdev/angular.dev-services.common'; -import { getModuleRulesConfig } from './module-rules.config.js'; - -export function webpack5BuildConfigFactory( - entryFiles: string[], - outputPath: string, - nodeModulesPaths: string[], - workspaceDir: string, - tempFolder: string, - plugins: any[] = [], -): WebpackConfig { - const config = { - mode: 'production', - // Stop compilation early in production - bail: true, - // These are the "entry points" to our application. - // This means they will be the "root" imports that are included in JS bundle. - entry: entryFiles, - - output: { - // The build folder. - path: `${outputPath}${sep}public`, - - filename: 'static/js/[name].[contenthash:8].js', - // There are also additional JS chunk files if you use code splitting. - chunkFilename: 'static/js/[name].[contenthash:8].chunk.js', - // webpack uses `publicPath` to determine where the app is being served from. - // It requires a trailing slash, or the file assets will get an incorrect path. - // We inferred the "public path" (such as / or /my-project) from homepage. - publicPath: ``, - // this defaults to 'window', but by setting it to 'this' then - // module chunks which are built will work in web workers as well. - // Commented out to use the default (self) as according to tobias with webpack5 self is working with workers as well - // globalObject: 'this', - }, - - resolve: { - alias: { - ...fallbacksAliases, - ...getWebpackAngularAliases(nodeModulesPaths) - }, - fallback: fallbacks - }, - - module: { - rules: getModuleRulesConfig(true), - }, - - plugins: [ - new BitDedupeModuleResolvePlugin(nodeModulesPaths, workspaceDir, tempFolder), - new webpack.ProvidePlugin(fallbacksProvidePluginConfig), - ...plugins - ], - }; - - return config as WebpackConfig; -} diff --git a/angular/envs/angular-v13-env/webpack/webpack5.serve.config.ts b/angular/envs/angular-v13-env/webpack/webpack5.serve.config.ts deleted file mode 100644 index b7b44c45..00000000 --- a/angular/envs/angular-v13-env/webpack/webpack5.serve.config.ts +++ /dev/null @@ -1,190 +0,0 @@ -import { getWebpackAngularAliases, normalizePath } from '@bitdev/angular.dev-services.common'; -import { - BitDedupeModuleResolvePlugin, - StatsLoggerPlugin -} from '@bitdev/angular.dev-services.webpack'; -import { PubsubMain } from '@teambit/pubsub'; -import { - fallbacks, - fallbacksAliases, - fallbacksProvidePluginConfig, - WebpackBitReporterPlugin -} from '@teambit/webpack'; -import { fileURLToPath } from 'node:url'; -import { join, posix, resolve } from 'path'; -// @ts-ignore -import errorOverlayMiddleware from 'react-dev-utils-esm/errorOverlayMiddleware.js'; -// @ts-ignore -import evalSourceMapMiddleware from 'react-dev-utils-esm/evalSourceMapMiddleware.js'; -// @ts-ignore -import getPublicUrlOrPath from 'react-dev-utils-esm/getPublicUrlOrPath.js'; -// @ts-ignore -import noopServiceWorkerMiddleware from 'react-dev-utils-esm/noopServiceWorkerMiddleware.js'; -// @ts-ignore -import redirectServedPath from 'react-dev-utils-esm/redirectServedPathMiddleware.js'; -import webpack from 'webpack'; -import { getModuleRulesConfig } from './module-rules.config.js'; - -const publicUrlOrPath = getPublicUrlOrPath(process.env.NODE_ENV === 'development', '/', '/public'); - -export function webpack5ServeConfigFactory( - devServerID: string, - workspaceDir: string, - entryFiles: string[], - publicRoot: string, - publicPath: string, - pubsub: PubsubMain, - nodeModulesPaths: string[], - tempFolder: string, - plugins: any[] = [], - isApp = false, -): any { - const resolveWorkspacePath = (relativePath: string) => resolve(workspaceDir, relativePath); - - // Host - const host = process.env.HOST || 'localhost'; - - // Required for babel-preset-react-app - process.env.NODE_ENV = 'development'; - - const publicDirectory = posix.join(publicRoot, publicPath); - - if(isApp) { - plugins.push(new StatsLoggerPlugin() as any) - } - - const config = { - // Environment mode - mode: 'development', - - devtool: 'inline-source-map', - - // Entry point of app - entry: entryFiles.map((filePath) => resolveWorkspacePath(filePath)), - - output: { - // Development filename output - filename: 'static/js/[name].bundle.js', - - pathinfo: true, - - path: resolveWorkspacePath(publicDirectory), - - chunkFilename: 'static/js/[name].chunk.js', - - // point sourcemap entries to original disk locations (format as URL on windows) - devtoolModuleFilenameTemplate: (info: any) => normalizePath(resolve(info.absoluteResourcePath)), - - // this defaults to 'window', but by setting it to 'this' then - // module chunks which are built will work in web workers as well. - // Commented out to use the default (self) as according to tobias with webpack5 self is working with workers as well - // globalObject: 'this', - }, - - infrastructureLogging: { - level: 'error', - }, - - stats: 'errors-only', - - // @ts-ignore until types are updated with new options from webpack-dev-server v4 - devServer: { - // support for bit.cloud workspaces - allowedHosts: ['.bit.cloud', 'localhost'], - static: [ - { - directory: resolveWorkspacePath(publicDirectory), - staticOptions: {}, - // Don't be confused with `dev.publicPath`, it is `publicPath` for static directory - // Can be: - // publicPath: ['/static-public-path-one/', '/static-public-path-two/'], - publicPath: publicDirectory, - // Can be: - // serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index) - serveIndex: true, - // Can be: - // watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar) - watch: false, - }, - ], - - // Enable compression - compress: true, - - // Enable hot reloading - hot: false, - - liveReload: true, - - host, - - historyApiFallback: { - disableDotRule: true, - index: resolveWorkspacePath(publicDirectory), - }, - - client: { - webSocketURL: 'ws://0.0.0.0:0/ws', - overlay: false - }, - - webSocketServer: { - options: { - path: `/_hmr/${devServerID}`, - // port automatically matches WDS - }, - }, - - onBeforeSetupMiddleware(devServer: any) { - // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware` - // middlewares before `redirectServedPath` otherwise will not have any effect - // This lets us fetch source contents from webpack for the error overlay - devServer.app.use(evalSourceMapMiddleware(devServer)); - // This lets us open files from the runtime error overlay. - devServer.app.use(errorOverlayMiddleware()); - }, - - onAfterSetupMiddleware(devServer: any) { - // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match - devServer.app.use(redirectServedPath(publicUrlOrPath)); - - // This service worker file is effectively a 'no-op' that will reset any - // previous service worker registered for the same host:port combination. - // We do this in development to avoid hitting the production cache if - // it used the same host and port. - // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432 - devServer.app.use(noopServiceWorkerMiddleware(publicUrlOrPath)); - }, - - devMiddleware: { - // Public path is root of content base - publicPath: join('/', publicRoot), - }, - }, - - resolve: { - extensions: ['.ts', '.tsx', '.js', '.mdx', '.md'], - alias: { - ...fallbacksAliases, - ...getWebpackAngularAliases(nodeModulesPaths) - }, - fallback: { ...fallbacks, events: fileURLToPath(import.meta.resolve('events/')) } as any, - modules: nodeModulesPaths - }, - - module: { - rules: getModuleRulesConfig(false) - }, - - plugins: [ - new BitDedupeModuleResolvePlugin(nodeModulesPaths, workspaceDir, tempFolder), - new webpack.ProvidePlugin(fallbacksProvidePluginConfig), - new WebpackBitReporterPlugin({ - options: { pubsub, devServerID }, - }), - ...plugins - ], - }; - - return config; -} diff --git a/angular/envs/angular-v14-env/component.json b/angular/envs/angular-v14-env/component.json deleted file mode 100644 index c1a57cbc..00000000 --- a/angular/envs/angular-v14-env/component.json +++ /dev/null @@ -1,76 +0,0 @@ -{ - "componentId": { - "scope": "bitdev.angular", - "name": "envs/angular-v14-env", - "version": "6.0.13" - }, - "propagate": false, - "extensions": { - "teambit.dependencies/dependency-resolver": { - "policy": { - "dependencies": { - "@angular-devkit/architect": "~0.1402.10", - "@angular-devkit/build-angular": "~14.2.10", - "@angular-devkit/build-webpack": "~0.1402.10", - "@angular-devkit/core": "~14.2.10", - "@angular-devkit/schematics": "~14.2.10", - "@angular-eslint/eslint-plugin": "~14.0.0", - "@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", - "@angular/core": "~14.2.12", - "@angular/elements": "~14.2.12", - "@angular/platform-browser": "~14.2.12", - "@angular/platform-browser-dynamic": "~14.2.12", - "@jest/globals": "^28.0.0", - "@ngtools/webpack": "~14.2.10", - "@types/eslint": "^8.21.0", - "@types/jest": "^28.0.0", - "@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", - "eslint": "^8.18.0", - "events": "^3.2.0", - "html-loader": "~2.1.2", - "jest": "^28.0.0", - "jest-preset-angular": "~12.1.0", - "ng-packagr": "~14.2.1", - "postcss": "8.4.18", - "postcss-flexbugs-fixes": "5.0.2", - "postcss-loader": "7.0.1", - "postcss-preset-env": "7.8.2", - "remark": "~13.0.0", - "remark-loader": "~4.0.0", - "resolve-url-loader": "5.0.0", - "rxjs": "~7.4.0", - "sass-loader": "12.6.0", - "style-loader": "^2.0.0", - "ts-node": "^9.1.1", - "tslib": "^2.3.0", - "typescript": "~4.7.2", - "webpack": "5.72.1", - "webpack-dev-middleware": "5.2.1", - "webpack-dev-server": "4.4.0", - "zone.js": "~0.14.0" - } - } - }, - "bitdev.general/envs/bit-env@1.0.1": {}, - "teambit.envs/envs": {}, - "teambit.component/renaming": { - "renamedFrom": { - "scope": "bitdev.angular", - "name": "envs/v14", - "version": "4c9e03bfe020a8cdaa512cada9844fc84ac222d1" - } - } - } -} diff --git a/angular/envs/angular-v14-env/env.jsonc b/angular/envs/angular-v14-env/env.jsonc deleted file mode 100644 index adeb6ac2..00000000 --- a/angular/envs/angular-v14-env/env.jsonc +++ /dev/null @@ -1,126 +0,0 @@ -/** - * define the peer dependencies for your environment. - * these components would be resolved once for all components in - * in the dependency graph of your component. - **/ - { - "policy": { - "runtime": [ - { - "name": "tslib", - "version": "^2.3.0", - "supportedRange": "^2.3.0" - } - ], - /** - * dev dependencies resolved in the workspace - * for components using this env. these dependencies would not be defined - * as a direct component dependencies. they are used for component development only. - **/ - "dev": [ - { - "name": "@types/jest", - "version": "^28.0.0", - "supportedRange": "^28.0.0", - "hidden": true, - "force": true - }, - { - "name": "@types/node", - "version": "^14.15.0", - "hidden": true, - "force": true - }, - { - "name": "jest-preset-angular", - "version": "~12.1.0", - "supportedRange": "~12.1.0", - "hidden": true, - "force": true - } - ], - "peers": [ - { - "name": "@angular/animations", - "version": "~14.0.2", - "supportedRange": "^14.0.0" - }, - { - "name": "@angular/common", - "version": "~14.0.2", - "supportedRange": "^14.0.0" - }, - { - "name": "@angular/compiler", - "version": "~14.0.2", - "supportedRange": "^14.0.0" - }, - { - "name": "@angular/compiler-cli", - "version": "~14.0.2", - "supportedRange": "^14.0.0" - }, - { - "name": "@angular/core", - "version": "~14.0.2", - "supportedRange": "^14.0.0" - }, - { - "name": "@angular/forms", - "version": "~14.0.2", - "supportedRange": "^14.0.0" - }, - { - "name": "@angular/platform-browser", - "version": "~14.0.2", - "supportedRange": "^14.0.0" - }, - { - "name": "@angular/platform-browser-dynamic", - "version": "~14.0.2", - "supportedRange": "^14.0.0" - }, - { - "name": "@angular/router", - "version": "~14.0.2", - "supportedRange": "^14.0.0" - }, - { - "name": "jest", - "version": "^28.0.0", - "supportedRange": "^28.0.0" - }, - { - "name": "rxjs", - "version": "~7.4.0", - "supportedRange": "^6.5.5 || ^7.4.0" - }, - { - "name": "tslib", - "version": "^2.3.0", - "supportedRange": "^2.3.0" - }, - { - "name": "typescript", - "version": "~4.7.2", - "supportedRange": ">=4.6.4 <4.8.0" - }, - { - "name": "zone.js", - "version": "~0.14.0", - "supportedRange": "~0.14.0" - } - ] - }, - - /** - * used to define patterns to different - * files in your component and associate them with - * bit aspects. - **/ - "patterns": { - "compositions": ["**/*.composition.*", "**/*.preview.*"], - "docs": ["**/*.docs.*"], - "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"] - } -} diff --git a/angular/envs/angular-v14-env/index.ts b/angular/envs/angular-v14-env/index.ts deleted file mode 100644 index e4020983..00000000 --- a/angular/envs/angular-v14-env/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { AngularV14Env, ngEnvOptions } from './angular-v14-env.bit-env.js'; -// @ts-ignore -export { default as jestConfig } from './jest/jest.config.cjs'; diff --git a/angular/envs/angular-v14-env/jest/jest.config.cjs b/angular/envs/angular-v14-env/jest/jest.config.cjs deleted file mode 100644 index dc60f6fa..00000000 --- a/angular/envs/angular-v14-env/jest/jest.config.cjs +++ /dev/null @@ -1,28 +0,0 @@ -const { generateNodeModulesPattern } = require('@teambit/dependencies.modules.packages-excluder'); - -const packagesToExclude = ['@angular', '@ngrx', 'apollo-angular']; - -module.exports = { - preset: 'jest-preset-angular', - globalSetup: 'jest-preset-angular/global-setup', - reporters: ['default'], - setupFilesAfterEnv: [require.resolve('./setup-jest.cjs')], - testPathIgnorePatterns: ['/.*/e2e/'], - globals: { - ngJest: { - skipNgcc: true - }, - 'ts-jest': { - tsconfig: require.resolve('./tsconfig.spec.json') - } - }, - resolver: require.resolve('./jest.resolver.cjs'), - moduleDirectories: ['/node_modules', 'node_modules'], - transformIgnorePatterns: [ - '^.+.module.(css|sass|scss)$', - generateNodeModulesPattern({ - packages: packagesToExclude, - excludeComponents: true, - }), - ], -}; diff --git a/angular/envs/angular-v14-env/jest/jest.config.d.ts b/angular/envs/angular-v14-env/jest/jest.config.d.ts deleted file mode 100644 index 52228a47..00000000 --- a/angular/envs/angular-v14-env/jest/jest.config.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Config } from 'jest'; - -declare const config: Config; -export default config; \ No newline at end of file diff --git a/angular/envs/angular-v14-env/jest/setup-jest.cjs b/angular/envs/angular-v14-env/jest/setup-jest.cjs deleted file mode 100644 index a39549fe..00000000 --- a/angular/envs/angular-v14-env/jest/setup-jest.cjs +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable */ -require('zone.js'); -require('zone.js/testing'); -const { getTestBed } = require('@angular/core/testing'); -const { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, -} = require('@angular/platform-browser-dynamic/testing'); - -let teardown = globalThis.ngJest?.teardown; -const configuredDestroyAfterEach = globalThis.ngJest?.destroyAfterEach; -if (configuredDestroyAfterEach) { - console.warn( - 'Passing destroyAfterEach for configuring the test environment has been deprecated.' + - ' Please pass a `teardown` object with ModuleTeardownOptions interface instead,' + - ' see https://github.com/angular/angular/blob/6952a0a3e68481564b2bc4955afb3ac186df6e34/packages/core/testing/src/test_bed_common.ts#L98' - ); - teardown = { - destroyAfterEach: true, - }; -} - -if (teardown !== undefined) { - getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { - teardown, - }); -} else { - getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); -} diff --git a/angular/envs/angular-v14-env/jest/tsconfig.spec.json b/angular/envs/angular-v14-env/jest/tsconfig.spec.json deleted file mode 100644 index ded6b39e..00000000 --- a/angular/envs/angular-v14-env/jest/tsconfig.spec.json +++ /dev/null @@ -1,5 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "@bitdev/angular.envs.base-env/config/tsconfig.json", - "include": ["**/*.spec.+(js|ts)", "**/*.test.+(js|ts)", "**/*.d.ts"] -} diff --git a/angular/envs/angular-v14-env/webpack-config.factory.ts b/angular/envs/angular-v14-env/webpack-config.factory.ts deleted file mode 100644 index 10c9fd91..00000000 --- a/angular/envs/angular-v14-env/webpack-config.factory.ts +++ /dev/null @@ -1,261 +0,0 @@ -/* eslint-disable no-param-reassign */ -import { OutputHashing } from '@angular-devkit/build-angular'; -import { getSystemPath, normalize, tags } from '@angular-devkit/core'; -import { BundlerSetup, dedupPaths, getLoggerApi } from '@bitdev/angular.dev-services.common'; -import type { BrowserBuilderOptions } from '@bitdev/angular.dev-services.ng-compat'; -import { - generateEntryPoints, - generateWebpackConfig, - getCommonConfig, - getDevServerConfig, - getIndexOutputFile, - getStylesConfig, - IndexHtmlWebpackPlugin, - normalizeBrowserSchema, - normalizeCacheOptions, - normalizeOptimization -} from '@bitdev/angular.dev-services.ng-compat'; -import { - WebpackBuildConfigFactoryOpts, - WebpackConfig, - WebpackConfigFactoryOpts, - WebpackServeConfigFactoryOpts -} from '@bitdev/angular.dev-services.webpack'; -import { BundlerContext, DevServerContext } from '@teambit/bundler'; -import { Logger } from '@teambit/logger'; -import { - runTransformersWithContext, - WebpackConfigMutator, - WebpackConfigTransformer, - WebpackConfigWithDevServer -} from '@teambit/webpack'; -import assert from 'assert'; -import { join, posix, resolve } from 'path'; -import { Configuration } from 'webpack'; -import { webpack5BuildConfigFactory } from './webpack/webpack5.build.config.js'; -import { webpack5ServeConfigFactory } from './webpack/webpack5.serve.config.js'; - -/** - * Migrate options from webpack-dev-server 3 to 4 - */ -function migrateConfiguration(webpackConfig: any): WebpackConfigWithDevServer | Configuration { - /** - * Removed logLevel in favor of built-in logger - * see https://webpack.js.org/configuration/other-options/#infrastructurelogginglevel - */ - delete webpackConfig.devServer.logLevel; - - // Removed contentBase in favor of the static option - delete webpackConfig.devServer.contentBase; - - // Removed publicPath in favor of the dev option - delete webpackConfig.devServer.publicPath; - - // Moved overlay to client option - webpackConfig.devServer.client = webpackConfig.devServer.client || {}; - webpackConfig.devServer.client.overlay = webpackConfig.devServer.overlay; - delete webpackConfig.devServer.overlay; - - // Removed in favor of the static option - delete webpackConfig.devServer.watchOptions; - - // Moved sockPath to client.webSocketURL.pathname option - // We let webpack handle that now - delete webpackConfig.devServer.sockPath; - - // Removed stats in favor of the stats options from webpack - delete webpackConfig.devServer.stats; - - // Removed in favor client.webSocketURL options - delete webpackConfig.devServer.public; - - // Removed watch to avoid "DEP_WEBPACK_WATCH_WITHOUT_CALLBACK" warning - delete webpackConfig.watch; - - // Removed in favor of manual setup entries. - delete webpackConfig.devServer.injectClient; - - // Cleaning up undefined values - Object.keys(webpackConfig.devServer).forEach((option) => { - if (typeof webpackConfig.devServer[option] === 'undefined') { - delete webpackConfig.devServer[option]; - } - }); - - delete webpackConfig.devServer.devMiddleware.publicPath; - delete webpackConfig.devServer.webSocketServer; - delete webpackConfig.devServer.client; - - return webpackConfig; -} - -async function getWebpackConfig( - _context: DevServerContext | BundlerContext, - entryFiles: string[], - tsconfigPath: string, - workspaceRoot: string, - logger: Logger, - setup: BundlerSetup, - angularOptions: Partial = {}, - sourceRoot = 'src' -): Promise { - assert(!(angularOptions as any).server, "SSR is only available for Angular v16+"); - - // Options from angular.json - const browserOptions: BrowserBuilderOptions = { - ...angularOptions, - baseHref: angularOptions.baseHref ?? './', - preserveSymlinks: false, - outputPath: 'public', // doesn't matter because it will be deleted from the config - index: angularOptions.index ?? `./${join(sourceRoot, `index.html`)}`, - main: angularOptions.main ?? `./${join(sourceRoot, `main.ts`)}`, - polyfills: angularOptions.polyfills ?? `./${join(sourceRoot, `polyfills.ts`)}`, - tsConfig: angularOptions.tsConfig ?? tsconfigPath, - assets: dedupPaths([posix.join(sourceRoot, `assets/**/*`), ...(angularOptions.assets ?? [])]), - styles: dedupPaths([posix.join(sourceRoot, `styles.${ angularOptions.inlineStyleLanguage ?? 'scss' }`), ...(angularOptions.styles ?? [])]), - scripts: angularOptions.scripts, - vendorChunk: angularOptions.vendorChunk ?? true, - namedChunks: angularOptions.namedChunks ?? true, - optimization: angularOptions.optimization ?? setup === BundlerSetup.Build, - buildOptimizer: angularOptions.buildOptimizer ?? setup === BundlerSetup.Build, - aot: angularOptions.aot ?? true, - deleteOutputPath: angularOptions.deleteOutputPath ?? true, - sourceMap: angularOptions.sourceMap ?? true, - outputHashing: angularOptions.outputHashing ?? (setup === BundlerSetup.Build ? OutputHashing.All : OutputHashing.None), - watch: setup === BundlerSetup.Serve, - allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', '@teambit/preview', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])] - }; - - const normalizedWorkspaceRoot = normalize(workspaceRoot); - // used to load component config files, such as tailwind config, ... - const projectRoot = normalize(workspaceRoot); - const normalizedSourceRoot = normalize(sourceRoot); - const loggerApi = getLoggerApi(logger); - - const normalizedOptions = normalizeBrowserSchema( - normalizedWorkspaceRoot, - projectRoot, - normalizedSourceRoot, - { - ...browserOptions, - }, - { - cli: { - cache: { - // disable webpack cache for now because it seems to cause an infinite loop - // TODO(ocombe): investigate this, maybe change the path? - enabled: false - } - } - } - ); - - let webpackConfig: any = await generateWebpackConfig( - getSystemPath(normalizedWorkspaceRoot), - getSystemPath(projectRoot), - getSystemPath(normalizedSourceRoot), - 'bit-angular-v14-env', // projectName - normalizedOptions, - (wco: any) => [ - setup === BundlerSetup.Serve ? getDevServerConfig(wco) : {}, - getCommonConfig(wco), - getStylesConfig(wco) - ], - loggerApi, - {} - ); - - // @ts-ignore - if (angularOptions.hmr) { - logger.warn(tags.stripIndents`NOTICE: Hot Module Replacement (HMR) is enabled for the dev server. - See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`); - } - - // Add bit generated files to the list of entries - webpackConfig.entry.main.unshift(...entryFiles); - // webpackConfig.entry.main = entryFiles; - - const { scripts = [], styles = [] } = browserOptions; - const entrypoints = generateEntryPoints({ scripts, styles }); - const normalizedIndex = normalize(browserOptions.index as string); - const normalizedOptimization = normalizeOptimization(browserOptions.optimization); - if (!webpackConfig.plugins) { - webpackConfig.plugins = []; - } - const cacheOptions = normalizeCacheOptions({}, workspaceRoot); - webpackConfig.plugins.push( - new IndexHtmlWebpackPlugin({ - indexPath: resolve(workspaceRoot, browserOptions.index as string), - outputPath: getIndexOutputFile(normalizedIndex), - baseHref: browserOptions.baseHref || '/', - entrypoints, - deployUrl: browserOptions.deployUrl, - sri: browserOptions.subresourceIntegrity, - cache: cacheOptions, - postTransform: undefined, // IndexHtmlTransform - optimization: normalizedOptimization, - crossOrigin: browserOptions.crossOrigin, - lang: 'en-US' // TODO(ocombe) support locale - }) - ); - - // don't use the output path from angular - delete webpackConfig?.output?.path; - delete webpackConfig?.resolve?.modules; - webpackConfig.stats = 'errors-only'; - // uniqueName should not be an empty string - webpackConfig.output.uniqueName = 'angular-v14-env'; - - if (setup === BundlerSetup.Serve) { - webpackConfig = migrateConfiguration(webpackConfig); - } - - return webpackConfig; -} - -export async function webpackConfigFactory(opts: WebpackConfigFactoryOpts & WebpackServeConfigFactoryOpts & WebpackBuildConfigFactoryOpts): Promise { - const baseConfig = await getWebpackConfig( - opts.context, - opts.entryFiles, - opts.tsConfigPath, - opts.rootPath, - opts.logger, - opts.setup, - opts.angularOptions, - opts.sourceRoot - ) as WebpackConfigWithDevServer; - - let overwriteConfig: WebpackConfigWithDevServer; - if (opts.setup === BundlerSetup.Serve) { - overwriteConfig = webpack5ServeConfigFactory( - opts.devServerID, - opts.workspaceDir, - opts.entryFiles, - opts.publicRoot, - opts.publicPath, - opts.pubsub, - opts.nodeModulesPaths, - opts.tempFolder, - opts.plugins, - opts.isApp, - ); - } else { - overwriteConfig = webpack5BuildConfigFactory( - opts.entryFiles, - opts.outputPath, - opts.nodeModulesPaths, - opts.workspaceDir, - opts.tempFolder, - opts.plugins, - ) as WebpackConfigWithDevServer; - } - - const transformer: WebpackConfigTransformer = configMutator => configMutator.merge([baseConfig]); - const configMutator = new WebpackConfigMutator(overwriteConfig); - const afterMutation = runTransformersWithContext( - configMutator.clone(), - [transformer], - { mode: 'dev' } - ); - return afterMutation.raw as WebpackConfigWithDevServer; -} diff --git a/angular/envs/angular-v14-env/webpack/module-rules.config.ts b/angular/envs/angular-v14-env/webpack/module-rules.config.ts deleted file mode 100644 index bfdf9b8c..00000000 --- a/angular/envs/angular-v14-env/webpack/module-rules.config.ts +++ /dev/null @@ -1,142 +0,0 @@ -import { generateStyleLoaders } from '@teambit/webpack.modules.generate-style-loaders'; -import * as stylesRegexps from '@teambit/webpack.modules.style-regexps'; -import { merge } from 'lodash-es'; -import { createRequire } from 'node:module'; -// @ts-ignore -import getLocalIdent from 'react-dev-utils-esm/getCSSModuleLocalIdent.js'; -import RemarkFrontmatter from 'remark-frontmatter'; -import RemarkHTML from 'remark-html'; -import RemarkPrism from 'remark-prism'; -import { RuleSetRule } from 'webpack'; - -const require = createRequire(import.meta.url); - -const postCssConfig = { - // Necessary for external CSS imports to work - // https://github.com/facebook/create-react-app/issues/2677 - ident: 'postcss', - plugins: [ - // eslint-disable-next-line global-require - require.resolve('postcss-flexbugs-fixes'), - // eslint-disable-next-line global-require - require('postcss-preset-env')({ - autoprefixer: { - flexbox: 'no-2009', - }, - stage: 3, - }), - // Adds PostCSS Normalize as the reset css with default options, - // so that it honors browserslist config in package.json - // which in turn lets users customize the target behavior as per their needs. - // require.resolve('postcss-normalize'), - ], -}; - -const styleLoaderPath = require.resolve('style-loader'); - -// Source maps are resource heavy and can cause out of memory issue for large source files. -const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; - -export function getModuleRulesConfig(isEnvProduction: boolean): RuleSetRule[] { - const baseStyleLoadersOptions = { - injectingLoader: styleLoaderPath, - cssLoaderPath: require.resolve('css-loader'), - postCssLoaderPath: require.resolve('postcss-loader'), - postCssConfig - }; - - return [ - { - test: /\.m?js/, - resolve: { - fullySpecified: false - } - }, - { - // "oneOf" will traverse all following loaders until one will - // match the requirements. When no loader matches it will fall - // back to the "file" loader at the end of the loader list. - oneOf: [ - // MDX support - { - test: /\.md$/, - use: [ - { - loader: 'html-loader' - }, - { - loader: 'remark-loader', - options: { - removeFrontMatter: false, - remarkOptions: { - plugins: [RemarkPrism, RemarkHTML, RemarkFrontmatter] - } - } - } - ] - }, - // "postcss" loader applies autoprefixer to our CSS. - // "css" loader resolves paths in CSS and adds assets as dependencies. - // "style" loader turns CSS into JS modules that inject - - - -
- - -
- - - - - - - Rocket Ship - - - - - +
+
+
+ - - {{ title }} app is running! - - - Rocket Ship Smoke - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - Learn Angular - - - - - Bit Documentation - - - - - - Angular Material - - - - - - Angular Blog - - - - - - Angular DevTools - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
- - - - - - - - - - - -
- - -
- 
bit create ng-module ui/my-button
- 
bit install @angular/material
- 
bit install _____
- 
bit test
- 
bit build
-
- - -
- - - Meetup Logo - - - - - - - Discord Logo - - + + + + + + + + + + + + + + - -
- - - - - - Gray Clouds Background - - - -
+ +
+
+ - - - - - - - + + + + + + + - + diff --git a/angular/integration/demo-app/src/app/app.component.spec.ts b/angular/integration/demo-app/src/app/app.component.spec.ts index 051ec289..65a8ad32 100644 --- a/angular/integration/demo-app/src/app/app.component.spec.ts +++ b/angular/integration/demo-app/src/app/app.component.spec.ts @@ -24,6 +24,6 @@ describe('AppComponent', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('demo-app app is running!'); + expect(compiled.querySelector('.content h1')?.textContent).toContain('Hello, demo-app'); }); }); diff --git a/angular/integration/demo-app/src/app/app.config.server.ts b/angular/integration/demo-app/src/app/app.config.server.ts index b4d57c94..8bdd9f9b 100644 --- a/angular/integration/demo-app/src/app/app.config.server.ts +++ b/angular/integration/demo-app/src/app/app.config.server.ts @@ -1,10 +1,13 @@ import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; import { provideServerRendering } from '@angular/platform-server'; +import { provideServerRoutesConfig } from '@angular/ssr'; import { appConfig } from './app.config'; +import { serverRoutes } from './app.routes.server'; const serverConfig: ApplicationConfig = { providers: [ - provideServerRendering() + provideServerRendering(), + provideServerRoutesConfig(serverRoutes), ] }; diff --git a/angular/integration/demo-app/src/app/app.config.ts b/angular/integration/demo-app/src/app/app.config.ts index e5a3cf10..a9af5184 100644 --- a/angular/integration/demo-app/src/app/app.config.ts +++ b/angular/integration/demo-app/src/app/app.config.ts @@ -1,9 +1,9 @@ -import { ApplicationConfig } from '@angular/core'; +import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; -import { provideClientHydration } from '@angular/platform-browser'; +import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes), provideClientHydration()] + providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())] }; diff --git a/angular/integration/demo-app/src/app/app.routes.server.ts b/angular/integration/demo-app/src/app/app.routes.server.ts new file mode 100644 index 00000000..ffd37b1f --- /dev/null +++ b/angular/integration/demo-app/src/app/app.routes.server.ts @@ -0,0 +1,8 @@ +import { RenderMode, ServerRoute } from '@angular/ssr'; + +export const serverRoutes: ServerRoute[] = [ + { + path: '**', + renderMode: RenderMode.Prerender + } +]; diff --git a/angular/integration/demo-app/src/index.html b/angular/integration/demo-app/src/index.html index 3fae5142..058b5ded 100644 --- a/angular/integration/demo-app/src/index.html +++ b/angular/integration/demo-app/src/index.html @@ -3,7 +3,7 @@ DemoApp - + diff --git a/angular/integration/demo-app/src/server.ts b/angular/integration/demo-app/src/server.ts new file mode 100644 index 00000000..bbeed293 --- /dev/null +++ b/angular/integration/demo-app/src/server.ts @@ -0,0 +1,67 @@ +import { + AngularNodeAppEngine, + createNodeRequestHandler, + isMainModule, + writeResponseToNodeResponse, +} from '@angular/ssr/node'; +import express from 'express'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const serverDistFolder = dirname(fileURLToPath(import.meta.url)); +const browserDistFolder = resolve(serverDistFolder, '../browser'); + +const app = express(); +const angularApp = new AngularNodeAppEngine(); + +/** + * Example Express Rest API endpoints can be defined here. + * Uncomment and define endpoints as necessary. + * + * Example: + * ```ts + * app.get('/api/**', (req, res) => { + * // Handle API request + * }); + * ``` + */ + +/** + * Serve static files from /browser + */ +app.use( + express.static(browserDistFolder, { + maxAge: '1y', + index: false, + redirect: false, + }), +); + +/** + * Handle all other requests by rendering the Angular application. + */ +app.use('/**', (req, res, next) => { + angularApp + .handle(req) + .then((response) => { + return response ? writeResponseToNodeResponse(response, res) : next() + } + ) + .catch(next); +}); + +/** + * Start the server if this module is the main entry point. + * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000. + */ +if (isMainModule(import.meta.url)) { + const port = process.env['PORT'] || 4000; + app.listen(port, () => { + console.log(`Node Express server listening on http://localhost:${port}`); + }); +} + +/** + * The request handler used by the Angular CLI (dev-server and during build). + */ +export const reqHandler = createNodeRequestHandler(app); diff --git a/angular/integration/demo-app/src/server/api/v1/hello.ts b/angular/integration/demo-app/src/server/api/v1/hello.ts deleted file mode 100644 index 594c5d71..00000000 --- a/angular/integration/demo-app/src/server/api/v1/hello.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { defineEventHandler } from 'h3'; - -export default defineEventHandler(() => ({ message: 'Hello World' })); diff --git a/angular/integration/demo-app/tsconfig.app.json b/angular/integration/demo-app/tsconfig.app.json index 68d14bea..8b83f686 100644 --- a/angular/integration/demo-app/tsconfig.app.json +++ b/angular/integration/demo-app/tsconfig.app.json @@ -2,45 +2,49 @@ { "compileOnSave": false, "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc/app", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "sourceMap": true, + "allowJs": true, + "allowSyntheticDefaultImports": true, "declaration": false, "downlevelIteration": true, + "esModuleInterop": true, "experimentalDecorators": true, - "moduleResolution": "node", - "allowSyntheticDefaultImports": true, + "forceConsistentCasingInFileNames": true, "importHelpers": true, - "allowJs": true, - "useDefineForClassFields": true, - "target": "ES2022", - "module": "ES2022", - "preserveSymlinks": false, + "isolatedModules": true, "lib": [ - "es2018", + "es2022", "dom" ], - "types": [] + "module": "ES2022", + "moduleResolution": "bundler", + "noFallthroughCasesInSwitch": true, + "noImplicitOverride": true, + "noImplicitReturns": true, + "noPropertyAccessFromIndexSignature": true, + "outDir": "./dist/out-tsc", + "preserveSymlinks": false, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "target": "ES2022", + "types": [], + "useDefineForClassFields": true }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true, - "enableIvy": true }, "files": [ "./src/main.ts", - "./src/main.server.ts" + "./src/main.server.ts", + "./src/server.ts" ], "include": [ "./src/**/*.d.ts" ], - "exclude":[ + "exclude": [ "./src/**/*.spec.ts" ] } diff --git a/angular/integration/demo-lib-v15/src/compositions/cmp1.composition.ts b/angular/integration/demo-lib-v15/src/compositions/cmp1.composition.ts deleted file mode 100644 index eacc7b3d..00000000 --- a/angular/integration/demo-lib-v15/src/compositions/cmp1.composition.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component } from '@angular/core'; -import { BitTestModule } from '../bit-test.module'; - -@Component({ - selector: 'bit-composition', - standalone: true, - imports: [BitTestModule], - template: ` -

- Composition component 1 - -

- `, - styles: [ - ] -}) -export class StandaloneCompositionComponent { -} diff --git a/angular/integration/demo-lib-v16/src/bit-test.component.ts b/angular/integration/demo-lib-v16/src/bit-test.component.ts index e3c71891..7512ab2b 100644 --- a/angular/integration/demo-lib-v16/src/bit-test.component.ts +++ b/angular/integration/demo-lib-v16/src/bit-test.component.ts @@ -2,7 +2,7 @@ import { Component } from "@angular/core"; import { BitTestService } from './bit-test.service'; @Component({ - selector: 'bit-test', + selector: 'bit-test-v16', template: `

bit-test component works!

{{ service.content }} diff --git a/angular/integration/demo-lib-v16/src/bit-test2.component.ts b/angular/integration/demo-lib-v16/src/bit-test2.component.ts index 629586b0..b332d0fa 100644 --- a/angular/integration/demo-lib-v16/src/bit-test2.component.ts +++ b/angular/integration/demo-lib-v16/src/bit-test2.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - selector: 'bit-test2', + selector: 'bit-test2-v16', template: `

bit-test 2 works as well! diff --git a/angular/integration/demo-lib-v16/src/compositions/bit-test.composition.ts b/angular/integration/demo-lib-v16/src/compositions/bit-test.composition.ts index 5359c53f..a045d570 100644 --- a/angular/integration/demo-lib-v16/src/compositions/bit-test.composition.ts +++ b/angular/integration/demo-lib-v16/src/compositions/bit-test.composition.ts @@ -2,8 +2,8 @@ import { Component, NgModule } from '@angular/core'; import { BitTestModule } from '../bit-test.module'; @Component({ - selector: 'composition-cmp', - template: `Composition: ` + selector: 'composition-cmp-v16', + template: `Composition: ` }) class CompositionComponent {} diff --git a/angular/integration/demo-lib-v16/src/compositions/cmp1.composition.ts b/angular/integration/demo-lib-v16/src/compositions/cmp1.composition.ts index eacc7b3d..8e585875 100644 --- a/angular/integration/demo-lib-v16/src/compositions/cmp1.composition.ts +++ b/angular/integration/demo-lib-v16/src/compositions/cmp1.composition.ts @@ -2,13 +2,13 @@ import { Component } from '@angular/core'; import { BitTestModule } from '../bit-test.module'; @Component({ - selector: 'bit-composition', + selector: 'bit-composition-v16', standalone: true, imports: [BitTestModule], template: `

Composition component 1 - +

`, styles: [ diff --git a/angular/integration/demo-lib-v17/src/bit-test.component.ts b/angular/integration/demo-lib-v17/src/bit-test.component.ts index e3c71891..da32fd26 100644 --- a/angular/integration/demo-lib-v17/src/bit-test.component.ts +++ b/angular/integration/demo-lib-v17/src/bit-test.component.ts @@ -2,7 +2,7 @@ import { Component } from "@angular/core"; import { BitTestService } from './bit-test.service'; @Component({ - selector: 'bit-test', + selector: 'bit-test-v17', template: `

bit-test component works!

{{ service.content }} diff --git a/angular/integration/demo-lib-v17/src/bit-test2.component.ts b/angular/integration/demo-lib-v17/src/bit-test2.component.ts index 629586b0..cd863658 100644 --- a/angular/integration/demo-lib-v17/src/bit-test2.component.ts +++ b/angular/integration/demo-lib-v17/src/bit-test2.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - selector: 'bit-test2', + selector: 'bit-test2-v17', template: `

bit-test 2 works as well! diff --git a/angular/integration/demo-lib-v17/src/compositions/bit-test.composition.ts b/angular/integration/demo-lib-v17/src/compositions/bit-test.composition.ts index 5359c53f..bf585642 100644 --- a/angular/integration/demo-lib-v17/src/compositions/bit-test.composition.ts +++ b/angular/integration/demo-lib-v17/src/compositions/bit-test.composition.ts @@ -2,8 +2,8 @@ import { Component, NgModule } from '@angular/core'; import { BitTestModule } from '../bit-test.module'; @Component({ - selector: 'composition-cmp', - template: `Composition: ` + selector: 'composition-cmp-v17', + template: `Composition: ` }) class CompositionComponent {} diff --git a/angular/integration/demo-lib-v17/src/compositions/cmp1.composition.ts b/angular/integration/demo-lib-v17/src/compositions/cmp1.composition.ts index eacc7b3d..fed24f79 100644 --- a/angular/integration/demo-lib-v17/src/compositions/cmp1.composition.ts +++ b/angular/integration/demo-lib-v17/src/compositions/cmp1.composition.ts @@ -2,13 +2,13 @@ import { Component } from '@angular/core'; import { BitTestModule } from '../bit-test.module'; @Component({ - selector: 'bit-composition', + selector: 'bit-composition-v17', standalone: true, imports: [BitTestModule], template: `

Composition component 1 - +

`, styles: [ diff --git a/angular/integration/demo-lib-v18/src/bit-test.component.ts b/angular/integration/demo-lib-v18/src/bit-test.component.ts index e3c71891..36185b96 100644 --- a/angular/integration/demo-lib-v18/src/bit-test.component.ts +++ b/angular/integration/demo-lib-v18/src/bit-test.component.ts @@ -2,7 +2,7 @@ import { Component } from "@angular/core"; import { BitTestService } from './bit-test.service'; @Component({ - selector: 'bit-test', + selector: 'bit-test-v18', template: `

bit-test component works!

{{ service.content }} diff --git a/angular/integration/demo-lib-v18/src/bit-test2.component.ts b/angular/integration/demo-lib-v18/src/bit-test2.component.ts index 629586b0..233b7b6f 100644 --- a/angular/integration/demo-lib-v18/src/bit-test2.component.ts +++ b/angular/integration/demo-lib-v18/src/bit-test2.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - selector: 'bit-test2', + selector: 'bit-test2-v18', template: `

bit-test 2 works as well! diff --git a/angular/integration/demo-lib-v18/src/compositions/bit-test.composition.ts b/angular/integration/demo-lib-v18/src/compositions/bit-test.composition.ts index 5359c53f..9468a6c6 100644 --- a/angular/integration/demo-lib-v18/src/compositions/bit-test.composition.ts +++ b/angular/integration/demo-lib-v18/src/compositions/bit-test.composition.ts @@ -2,8 +2,8 @@ import { Component, NgModule } from '@angular/core'; import { BitTestModule } from '../bit-test.module'; @Component({ - selector: 'composition-cmp', - template: `Composition: ` + selector: 'composition-cmp-v18', + template: `Composition: ` }) class CompositionComponent {} diff --git a/angular/integration/demo-lib-v18/src/compositions/cmp1.composition.ts b/angular/integration/demo-lib-v18/src/compositions/cmp1.composition.ts index eacc7b3d..bc9f2a04 100644 --- a/angular/integration/demo-lib-v18/src/compositions/cmp1.composition.ts +++ b/angular/integration/demo-lib-v18/src/compositions/cmp1.composition.ts @@ -2,13 +2,13 @@ import { Component } from '@angular/core'; import { BitTestModule } from '../bit-test.module'; @Component({ - selector: 'bit-composition', + selector: 'bit-composition-v18', standalone: true, imports: [BitTestModule], template: `

Composition component 1 - +

`, styles: [ diff --git a/angular/integration/demo-lib-v15/public-api.ts b/angular/integration/demo-lib-v19/public-api.ts similarity index 82% rename from angular/integration/demo-lib-v15/public-api.ts rename to angular/integration/demo-lib-v19/public-api.ts index b0c87230..08d067e3 100644 --- a/angular/integration/demo-lib-v15/public-api.ts +++ b/angular/integration/demo-lib-v19/public-api.ts @@ -3,4 +3,5 @@ */ export * from './src/bit-test.component'; export * from './src/bit-test2.component'; +export * from './src/bit-test3.component'; export * from './src/bit-test.module'; diff --git a/angular/integration/demo-lib-v19/src/bit-test.component.scss b/angular/integration/demo-lib-v19/src/bit-test.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/angular/integration/demo-lib-v15/src/bit-test.component.ts b/angular/integration/demo-lib-v19/src/bit-test.component.ts similarity index 86% rename from angular/integration/demo-lib-v15/src/bit-test.component.ts rename to angular/integration/demo-lib-v19/src/bit-test.component.ts index e3c71891..f84084e3 100644 --- a/angular/integration/demo-lib-v15/src/bit-test.component.ts +++ b/angular/integration/demo-lib-v19/src/bit-test.component.ts @@ -2,7 +2,8 @@ import { Component } from "@angular/core"; import { BitTestService } from './bit-test.service'; @Component({ - selector: 'bit-test', + selector: 'bit-test-v19', + standalone: false, template: `

bit-test component works!

{{ service.content }} diff --git a/angular/integration/demo-lib-v15/src/bit-test.docs.md b/angular/integration/demo-lib-v19/src/bit-test.docs.md similarity index 100% rename from angular/integration/demo-lib-v15/src/bit-test.docs.md rename to angular/integration/demo-lib-v19/src/bit-test.docs.md diff --git a/angular/integration/demo-lib-v15/src/bit-test.module.ts b/angular/integration/demo-lib-v19/src/bit-test.module.ts similarity index 100% rename from angular/integration/demo-lib-v15/src/bit-test.module.ts rename to angular/integration/demo-lib-v19/src/bit-test.module.ts diff --git a/angular/integration/demo-lib-v15/src/bit-test.service.ts b/angular/integration/demo-lib-v19/src/bit-test.service.ts similarity index 100% rename from angular/integration/demo-lib-v15/src/bit-test.service.ts rename to angular/integration/demo-lib-v19/src/bit-test.service.ts diff --git a/angular/integration/demo-lib-v15/src/bit-test.spec.ts b/angular/integration/demo-lib-v19/src/bit-test.spec.ts similarity index 100% rename from angular/integration/demo-lib-v15/src/bit-test.spec.ts rename to angular/integration/demo-lib-v19/src/bit-test.spec.ts diff --git a/angular/integration/demo-lib-v15/src/bit-test2.component.ts b/angular/integration/demo-lib-v19/src/bit-test2.component.ts similarity index 77% rename from angular/integration/demo-lib-v15/src/bit-test2.component.ts rename to angular/integration/demo-lib-v19/src/bit-test2.component.ts index 629586b0..0f6f8a91 100644 --- a/angular/integration/demo-lib-v15/src/bit-test2.component.ts +++ b/angular/integration/demo-lib-v19/src/bit-test2.component.ts @@ -1,7 +1,8 @@ import { Component } from '@angular/core'; @Component({ - selector: 'bit-test2', + selector: 'bit-test2-v19', + standalone: false, template: `

bit-test 2 works as well! diff --git a/angular/integration/demo-lib-v19/src/bit-test3.component.ts b/angular/integration/demo-lib-v19/src/bit-test3.component.ts new file mode 100644 index 00000000..d61e53ae --- /dev/null +++ b/angular/integration/demo-lib-v19/src/bit-test3.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'bit-test3-v19', + standalone: true, + template: ` +

+ bit-test 3 standalone works! +

+ ` +}) +export class BitTest3Component {} diff --git a/angular/integration/demo-lib-v15/src/compositions/bit-test.composition.ts b/angular/integration/demo-lib-v19/src/compositions/bit-test.composition.ts similarity index 73% rename from angular/integration/demo-lib-v15/src/compositions/bit-test.composition.ts rename to angular/integration/demo-lib-v19/src/compositions/bit-test.composition.ts index 5359c53f..d6285b42 100644 --- a/angular/integration/demo-lib-v15/src/compositions/bit-test.composition.ts +++ b/angular/integration/demo-lib-v19/src/compositions/bit-test.composition.ts @@ -2,8 +2,9 @@ import { Component, NgModule } from '@angular/core'; import { BitTestModule } from '../bit-test.module'; @Component({ - selector: 'composition-cmp', - template: `Composition: ` + selector: 'composition-cmp-v19', + standalone: false, + template: `Composition: ` }) class CompositionComponent {} diff --git a/angular/integration/demo-lib-v19/src/compositions/cmp1.composition.ts b/angular/integration/demo-lib-v19/src/compositions/cmp1.composition.ts new file mode 100644 index 00000000..f7569dbc --- /dev/null +++ b/angular/integration/demo-lib-v19/src/compositions/cmp1.composition.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; +import { BitTestModule } from '../bit-test.module'; +import { BitTest3Component } from "../bit-test3.component"; + +@Component({ + selector: 'bit-composition-v18', + standalone: true, + imports: [BitTestModule, BitTest3Component], + template: ` +

+ Composition component 1 + +

+

+ Composition component 2 + +

+

+ Composition component 3 + +

+ `, + styles: [ + ] +}) +export class StandaloneCompositionComponent { +} diff --git a/angular/integration/demo-lib/public-api.ts b/angular/integration/demo-lib/public-api.ts index b0c87230..08d067e3 100644 --- a/angular/integration/demo-lib/public-api.ts +++ b/angular/integration/demo-lib/public-api.ts @@ -3,4 +3,5 @@ */ export * from './src/bit-test.component'; export * from './src/bit-test2.component'; +export * from './src/bit-test3.component'; export * from './src/bit-test.module'; diff --git a/angular/integration/demo-lib/src/bit-test.component.scss b/angular/integration/demo-lib/src/bit-test.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/angular/integration/demo-lib/src/bit-test.component.ts b/angular/integration/demo-lib/src/bit-test.component.ts index e3c71891..16ee5901 100644 --- a/angular/integration/demo-lib/src/bit-test.component.ts +++ b/angular/integration/demo-lib/src/bit-test.component.ts @@ -3,6 +3,7 @@ import { BitTestService } from './bit-test.service'; @Component({ selector: 'bit-test', + standalone: false, template: `

bit-test component works!

{{ service.content }} diff --git a/angular/integration/demo-lib/src/bit-test2.component.ts b/angular/integration/demo-lib/src/bit-test2.component.ts index 629586b0..9f97df28 100644 --- a/angular/integration/demo-lib/src/bit-test2.component.ts +++ b/angular/integration/demo-lib/src/bit-test2.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'bit-test2', + standalone: false, template: `

bit-test 2 works as well! diff --git a/angular/integration/demo-lib/src/bit-test3.component.ts b/angular/integration/demo-lib/src/bit-test3.component.ts new file mode 100644 index 00000000..9f5b75ce --- /dev/null +++ b/angular/integration/demo-lib/src/bit-test3.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'bit-test3', + standalone: true, + template: ` +

+ bit-test 3 standalone works! +

+ ` +}) +export class BitTest3Component {} diff --git a/angular/integration/demo-lib/src/compositions/bit-test.composition.ts b/angular/integration/demo-lib/src/compositions/bit-test.composition.ts index 5359c53f..6cf2f85f 100644 --- a/angular/integration/demo-lib/src/compositions/bit-test.composition.ts +++ b/angular/integration/demo-lib/src/compositions/bit-test.composition.ts @@ -3,6 +3,7 @@ import { BitTestModule } from '../bit-test.module'; @Component({ selector: 'composition-cmp', + standalone: false, template: `Composition: ` }) class CompositionComponent {} diff --git a/angular/integration/demo-lib/src/compositions/cmp1.composition.ts b/angular/integration/demo-lib/src/compositions/cmp1.composition.ts index 9eccc4af..62a9f35c 100644 --- a/angular/integration/demo-lib/src/compositions/cmp1.composition.ts +++ b/angular/integration/demo-lib/src/compositions/cmp1.composition.ts @@ -1,10 +1,23 @@ import { Component } from '@angular/core'; +import { BitTestModule } from '../bit-test.module'; +import { BitTest3Component } from "../bit-test3.component"; @Component({ selector: 'bit-composition', + standalone: true, + imports: [BitTestModule, BitTest3Component], template: `

Composition component 1 + +

+

+ Composition component 2 + +

+

+ Composition component 3 +

`, styles: [ diff --git a/angular/readme/readme.mdx b/angular/readme/readme.mdx index 8a89a2b7..d315826f 100644 --- a/angular/readme/readme.mdx +++ b/angular/readme/readme.mdx @@ -15,15 +15,14 @@ You can list all available templates with the following command: bit templates ``` -Generate a component using the ng-module template with the bit create command: +Generate a component using the ng-standalone template with the bit create command: ``` -bit create ng-module ui/my-button +bit create ng-standalone ui/my-button ``` -Run the following commands to create and set up an application using the ng-app template: +Run the following command to create and set up an application using the ng-app template: ``` bit create ng-app apps/my-angular-app -bit use apps/my-angular-app ``` @@ -43,6 +42,7 @@ The following dev services are supported by default: - ESLint - Prettier - Webpack dev server & bundler +- ESBuild / Vite dev server for apps, with SSR support - Ng-packagr for libraries - Angular elements @@ -53,9 +53,11 @@ The [default Angular env](https://bit.cloud/bitdev/angular/angular-env) always u Bit will still support old versions of Angular when possible, if you want to use a specific version, you can use one of those env versions instead: -- v17: bitdev.angular/envs/angular-v17-env (latest) +- v19: bitdev.angular/envs/angular-v19-env (latest) +- v18: bitdev.angular/envs/angular-v18-env (LTS) +- v17: bitdev.angular/envs/angular-v17-env (LTS) - v16: bitdev.angular/envs/angular-v16-env (LTS) -- v15: bitdev.angular/envs/angular-v15-env (LTS) +- v15: bitdev.angular/envs/angular-v15-env (deprecated) - v14: bitdev.angular/envs/angular-v14-env (deprecated) - v13: bitdev.angular/envs/angular-v13-env (deprecated) diff --git a/angular/templates/generators/ng-app/index.ts b/angular/templates/generators/ng-app/index.ts index 60a449ad..86527d0e 100644 --- a/angular/templates/generators/ng-app/index.ts +++ b/angular/templates/generators/ng-app/index.ts @@ -18,6 +18,7 @@ import { gitKeepFile } from './template-files/src/assets/gitkeep'; import { indexHtmlFile } from './template-files/src/index-html'; import { mainNgAppFile } from './template-files/src/main'; import { mainServerFile } from './template-files/src/main.server'; +import { serverFile } from './template-files/src/server'; import { polyfillsFile } from './template-files/src/polyfills'; import { helloApiFile } from './template-files/src/server/api/hello'; import { stylesFile } from './template-files/src/styles'; @@ -94,12 +95,12 @@ export class NgAppTemplate implements ComponentTemplate { if (envId === 'bitdev.angular/angular-env') { envPkgName = '@bitdev/angular.angular-env'; } else { - envPkgName = `@bitdev/angular.envs.angular-v${ this.angularVersion }-env`; + envPkgName = `@bitdev/angular.envs.angular-v${this.angularVersion}-env`; } const files = [ docsFile(context), - ngAppFile(context, params.styleSheet, params.ssr, envPkgName), + ngAppFile(context, params.styleSheet, params.ssr, envPkgName, this.angularVersion), tsconfigFile(this.angularVersion, params.ssr), indexHtmlFile(context), mainNgAppFile(params.standalone), @@ -118,6 +119,10 @@ export class NgAppTemplate implements ComponentTemplate { helloApiFile() ); + if (this.angularVersion >= 19) { + files.push(serverFile()); + } + if (params.standalone) { files.push(serverConfigFile()); } diff --git a/angular/templates/generators/ng-app/template-files/bit-app.ts b/angular/templates/generators/ng-app/template-files/bit-app.ts index 6a7c0f5b..a1e68732 100644 --- a/angular/templates/generators/ng-app/template-files/bit-app.ts +++ b/angular/templates/generators/ng-app/template-files/bit-app.ts @@ -1,6 +1,6 @@ import { ComponentContext, ComponentFile } from '@teambit/generator'; -export const ngAppFile = (context: ComponentContext, styleSheet: string, ssr: boolean, envPkgName: string): ComponentFile => { +export const ngAppFile = (context: ComponentContext, styleSheet: string, ssr: boolean, envPkgName: string, angularVersion: number): ComponentFile => { const { name, namePascalCase: Name } = context; return { relativePath: `${name}.bit-app.ts`, @@ -13,7 +13,8 @@ const angularOptions: ${ssr ? `ApplicationOptions`: `BrowserOptions` } & DevServ ${ssr ? `browser: './src/main.ts', server: './src/main.server.ts', prerender: true, - ssr: true,` : `main: './src/main.ts',`} + ${angularVersion >= 19 ? `outputMode: "static", + ssr: {"entry": "./src/server.ts"}` : 'ssr: true'}` : `main: './src/main.ts'`}, index: './src/index.html', tsConfig: './tsconfig.app.json', inlineStyleLanguage: '${styleSheet}', diff --git a/angular/templates/generators/ng-app/template-files/src/app/app.component-html.ts b/angular/templates/generators/ng-app/template-files/src/app/app.component-html.ts index 1f76e94b..812ecfff 100644 --- a/angular/templates/generators/ng-app/template-files/src/app/app.component-html.ts +++ b/angular/templates/generators/ng-app/template-files/src/app/app.component-html.ts @@ -6,183 +6,338 @@ export const appComponentHtmlFile = (): ComponentFile => { content: ` - + - - + + - - - -
- - -
- - - - - - - Rocket Ship - - - - - - - - + + +
+
+
+ +

Hello, {{ title }}

+

Congratulations! Your app is running. 🎉

+
+ +
+
+ @for (item of [ + { title: 'Explore the Angular Docs', link: 'https://angular.dev' }, + { title: 'Bit Documentation', link: 'https://bit.dev/docs/' }, + { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, + { title: 'Angular CLI Docs', link: 'https://angular.dev/tools/cli' }, + { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, + { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, + ]; track item.title) { + + {{ item.title }} + + + + + } +
+ +
+
+
+ + + + + + + + - - - - - - - `, diff --git a/angular/templates/generators/ng-app/template-files/src/server.ts b/angular/templates/generators/ng-app/template-files/src/server.ts new file mode 100644 index 00000000..5b2e7b02 --- /dev/null +++ b/angular/templates/generators/ng-app/template-files/src/server.ts @@ -0,0 +1,75 @@ +import { ComponentFile } from '@teambit/generator'; + +export const serverFile = (): ComponentFile => { + return { + relativePath: `src/main.server.ts`, + content: `import { + AngularNodeAppEngine, + createNodeRequestHandler, + isMainModule, + writeResponseToNodeResponse, +} from '@angular/ssr/node'; +import express from 'express'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const serverDistFolder = dirname(fileURLToPath(import.meta.url)); +const browserDistFolder = resolve(serverDistFolder, '../browser'); + +const app = express(); +const angularApp = new AngularNodeAppEngine(); + +/** + * Example Express Rest API endpoints can be defined here. + * Uncomment and define endpoints as necessary. + * + * Example: + * \`\`\`ts + * app.get('/api/**', (req, res) => { + * // Handle API request + * }); + * \`\`\` + */ + +/** + * Serve static files from /browser + */ +app.use( + express.static(browserDistFolder, { + maxAge: '1y', + index: false, + redirect: false, + }), +); + +/** + * Handle all other requests by rendering the Angular application. + */ +app.use('/**', (req, res, next) => { + angularApp + .handle(req) + .then((response) => { + return response ? writeResponseToNodeResponse(response, res) : next() + } + ) + .catch(next); +}); + +/** + * Start the server if this module is the main entry point. + * The server listens on the port defined by the \`PORT\` environment variable, or defaults to 4000. + */ +if (isMainModule(import.meta.url)) { + const port = process.env['PORT'] || 4000; + app.listen(port, () => { + console.log(\`Node Express server listening on http://localhost:\${port}\`); +}); +} + +/** + * The request handler used by the Angular CLI (dev-server and during build). + */ +export const reqHandler = createNodeRequestHandler(app); +`, + }; +}; diff --git a/angular/templates/generators/ng-app/template-files/tsconfig.app.ts b/angular/templates/generators/ng-app/template-files/tsconfig.app.ts index 00e0e8cb..9e3073f6 100644 --- a/angular/templates/generators/ng-app/template-files/tsconfig.app.ts +++ b/angular/templates/generators/ng-app/template-files/tsconfig.app.ts @@ -7,39 +7,45 @@ export const tsconfigFile = (angularVersion: number, ssr: boolean): ComponentFil { "compileOnSave": false, "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc/app", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, + "allowJs": true, "allowSyntheticDefaultImports": true, - "sourceMap": true, "declaration": false, "downlevelIteration": true, + "esModuleInterop": true, "experimentalDecorators": true, - "moduleResolution": "node", + "forceConsistentCasingInFileNames": true, "importHelpers": true, - "allowJs": true, + "isolatedModules": true, + "lib": [ + "${angularVersion >= 17 ? `ES2022` : `ES2018`}", + "dom" + ], + "moduleResolution": "${angularVersion >= 19 ? `bundler` : `node`}", + "noFallthroughCasesInSwitch": true, + "noImplicitOverride": true, + "noImplicitReturns": true, + "noPropertyAccessFromIndexSignature": true, + "outDir": "./dist/out-tsc", + "preserveSymlinks": false, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "types": [], ${angularVersion >= 17 ? `"target": "ES2022", "module": "ES2022"` : `"target": "es2017", "module": "es2020"`},${angularVersion >= 15 ? ` "useDefineForClassFields": false,` : ``} - "preserveSymlinks": false, - "lib": [ - "${angularVersion >= 17 ? `ES2022` : `ES2018`}", - "dom" - ], - "types": [] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, - "strictInputAccessModifiers": true + "strictInputAccessModifiers": true, + "strictTemplates": true, }, "files": [ "./src/main.ts",${ssr ? ` - "./src/main.server.ts",` : ``}${angularVersion >= 15 ? `` : ` + "./src/main.server.ts",` : ``}${angularVersion < 19 ? `` : ` + "./src/server.ts"`}${angularVersion >= 15 ? `` : ` "./src/polyfills.ts"`} ], "include": [ diff --git a/angular/templates/generators/ng-env/files/config/jest.config.ts b/angular/templates/generators/ng-env/files/config/jest.config.ts index 1596c9e1..7ceaeb24 100644 --- a/angular/templates/generators/ng-env/files/config/jest.config.ts +++ b/angular/templates/generators/ng-env/files/config/jest.config.ts @@ -6,15 +6,16 @@ export const jestConfigFile = (angularVersion: number, envPkgName: string) => { */ const jestConfig = require('${envPkgName}/jest/jest.config.cjs'); const { generateNodeModulesPattern } = require('@teambit/dependencies.modules.packages-excluder'); -${angularVersion >= 16 ? ` -const { defaultTransformerOptions } = require('jest-preset-angular/presets'); -` : ''} +const { ${angularVersion >= 19 ? `createCjsPreset` : `defaultTransformerOptions`} } = require('jest-preset-angular/presets'); const packagesToExclude = ['@angular', '@ngrx', 'apollo-angular']; - +${angularVersion >= 19 ? `const presetConfig = createCjsPreset({ + tsconfig: require.resolve('./tsconfig.spec.json') +}); +` : ''} module.exports = { ...jestConfig, - ${angularVersion >= 16 ? `transform: { + ${angularVersion >= 19 ? `...presetConfig,`: `transform: { '^.+\\.(ts|js|mjs|html|svg)$': [ 'jest-preset-angular', { @@ -22,13 +23,6 @@ module.exports = { tsconfig: require.resolve('./tsconfig.spec.json') } ] - },` : `globals: { - ${angularVersion > 13 ? `ngJest: { - skipNgcc: true - }, - ` : ''}'ts-jest': { - tsconfig: require.resolve('./tsconfig.spec.json') - } },`} transformIgnorePatterns: [ '^.+.module.(css|sass|scss)$', diff --git a/angular/templates/generators/ng-module/files/component.ts b/angular/templates/generators/ng-module/files/component.ts index 1b6e9973..66ec2cf8 100644 --- a/angular/templates/generators/ng-module/files/component.ts +++ b/angular/templates/generators/ng-module/files/component.ts @@ -8,6 +8,7 @@ export const componentFile = (context: ComponentContext): ComponentFile => { @Component({ selector: '${name}', + standalone: false, template: \`

${name} works! diff --git a/angular/templates/generators/ng-module/files/composition.ts b/angular/templates/generators/ng-module/files/composition.ts index 195087ad..c27aea3b 100644 --- a/angular/templates/generators/ng-module/files/composition.ts +++ b/angular/templates/generators/ng-module/files/composition.ts @@ -8,6 +8,7 @@ import { ${Name}Module } from './${name}.module'; @Component({ selector: '${name}-composition-cmp', + standalone: false, template: \`${Name} composition: <${name}>\` }) class ${Name}CompositionComponent {} diff --git a/workspace.jsonc b/workspace.jsonc index 35a55fae..f4b4d597 100644 --- a/workspace.jsonc +++ b/workspace.jsonc @@ -54,6 +54,8 @@ "@teambit/harmony.content.cli-reference": "2.0.285", "@teambit/react.ui.docs-app": "1.0.21", "@teambit/typescript.typescript-compiler": "2.0.44", + "@teambit/webpack.modules.generate-style-loaders": "^1.0.11", + "@teambit/webpack.modules.style-regexps": "^1.0.6", "@teambit/workspace.root-components": "^1.0.0", "@types/fs-extra": "~9.0.7", "@types/lodash-es": "^4.17.12", @@ -64,8 +66,11 @@ "json5": "^2.2.3", "lodash-es": "^4.17.21", "object-hash": "~2.1.1", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-preset-env": "^10.1.0", "prettier": "2.3.2", "react-dev-utils": "10.2.1", + "react-dev-utils-esm": "^11.0.3", "remark-frontmatter": "~3.0.0", "remark-html": "13.0.1", "remark-prism": "~1.3.6", @@ -87,22 +92,18 @@ }, "teambit.generator/generator": { "envs": [ -// "bitdev.angular/angular-env", - "bitdev.angular/envs/angular-v18-env" -// "bitdev.angular/envs/angular-v17-env" -// "bitdev.angular/envs/angular-v16-env", - // "bitdev.angular/envs/angular-v15-env", - // "bitdev.angular/envs/angular-v14-env", - // "bitdev.angular/envs/angular-v13-env" +// "bitdev.angular/angular-env", + "bitdev.angular/envs/angular-v19-env" + // "bitdev.angular/envs/angular-v18-env" + // "bitdev.angular/envs/angular-v17-env" + // "bitdev.angular/envs/angular-v16-env", ] }, - "bitdev.angular/angular-env": {}, - "bitdev.angular/envs/angular-v18-env": {}, - "bitdev.angular/envs/angular-v17-env": {}, - "bitdev.angular/envs/angular-v16-env": {}, -// "bitdev.angular/envs/angular-v15-env": {}, -// "bitdev.angular/envs/angular-v14-env": {}, -// "bitdev.angular/envs/angular-v13-env": {}, +// "bitdev.angular/angular-env": {}, + "bitdev.angular/envs/angular-v19-env": {}, + // "bitdev.angular/envs/angular-v18-env": {}, + // "bitdev.angular/envs/angular-v17-env": {}, + // "bitdev.angular/envs/angular-v16-env": {}, // Add angular apps (until this is no longer necessary) // "integration.examples/demo-app": {}, /** @@ -129,12 +130,15 @@ "teambit.envs/env": {} }, "angular/integration/demo-app": { - // "bitdev.angular/angular-env": {} - "bitdev.angular/envs/angular-v18-env": {} + // "bitdev.angular/angular-env": {} + "bitdev.angular/envs/angular-v19-env": {} }, "angular/integration/demo-lib": { "bitdev.angular/angular-env": {} }, + "angular/integration/demo-lib-v19": { + "bitdev.angular/envs/angular-v19-env": {} + }, "angular/integration/demo-lib-v18": { "bitdev.angular/envs/angular-v18-env": {} }, @@ -144,6 +148,6 @@ "angular/integration/demo-lib-v16": { "bitdev.angular/envs/angular-v16-env": {} } + // "integration.examples/demo-app": {} } - // "integration.examples/demo-app": {} }