diff --git a/apps/mfe1-e2e/project.json b/apps/mfe1-e2e/project.json index c82d3982..1587ced1 100644 --- a/apps/mfe1-e2e/project.json +++ b/apps/mfe1-e2e/project.json @@ -19,10 +19,7 @@ }, "lint": { "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["apps/mfe1-e2e/**/*.{js,ts}"] - } + "outputs": ["{options.outputFile}"] } }, "tags": [], diff --git a/apps/mfe1/.eslintrc.json b/apps/mfe1/.eslintrc.json index fcdf2f4c..5c3186ca 100644 --- a/apps/mfe1/.eslintrc.json +++ b/apps/mfe1/.eslintrc.json @@ -1,5 +1,5 @@ { - "extends": ["../../.eslintrc.json"], + "extends": ["../../.eslintrc.json", "../../.eslintrc.base.json"], "ignorePatterns": ["!**/*"], "overrides": [ { @@ -13,7 +13,7 @@ "error", { "type": "attribute", - "prefix": "angularArchitects", + "prefix": "mfe1", "style": "camelCase" } ], @@ -21,7 +21,7 @@ "error", { "type": "element", - "prefix": "angular-architects", + "prefix": "mfe1", "style": "kebab-case" } ] diff --git a/apps/mfe1/federation.config.js b/apps/mfe1/federation.config.js index a41439e7..a5b90fed 100644 --- a/apps/mfe1/federation.config.js +++ b/apps/mfe1/federation.config.js @@ -19,4 +19,12 @@ module.exports = withNativeFederation({ }, sharedMappings: ['@angular-architects/playground-lib'], + + skip: [ + 'rxjs/ajax', + 'rxjs/fetch', + 'rxjs/testing', + 'rxjs/webSocket', + // Add further packages you don't need at runtime + ], }); diff --git a/apps/mfe1/jest.config.ts b/apps/mfe1/jest.config.ts index c9c97684..1d4b624d 100644 --- a/apps/mfe1/jest.config.ts +++ b/apps/mfe1/jest.config.ts @@ -3,7 +3,6 @@ export default { displayName: 'mfe1', preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: {}, coverageDirectory: '../../coverage/apps/mfe1', transform: { '^.+\\.(ts|mjs|js|html)$': [ diff --git a/apps/mfe1/project.json b/apps/mfe1/project.json index 3fa19b1f..3c76bd02 100644 --- a/apps/mfe1/project.json +++ b/apps/mfe1/project.json @@ -2,17 +2,47 @@ "name": "mfe1", "$schema": "../../node_modules/nx/schemas/project-schema.json", "projectType": "application", + "prefix": "mfe1", "sourceRoot": "apps/mfe1/src", - "prefix": "angular-architects", + "tags": [], "targets": { "build": { "executor": "@angular-architects/native-federation:build", + "options": {}, + "configurations": { + "production": { + "target": "mfe1:esbuild:production" + }, + "development": { + "target": "mfe1:esbuild:development", + "dev": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "executor": "@angular-architects/native-federation:build", + "options": { + "target": "mfe1:serve-original:development", + "rebuildDelay": 0, + "dev": true, + "port": 0 + } + }, + "extract-i18n": { + "executor": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "mfe1:build" + } + }, + "esbuild": { + "executor": "@angular-devkit/build-angular:application", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/apps/mfe1", "index": "apps/mfe1/src/index.html", - "main": "apps/mfe1/src/main.ts", - "polyfills": "apps/mfe1/src/polyfills.ts", + "browser": "apps/mfe1/src/main.ts", + "polyfills": ["zone.js", "es-module-shims"], "tsConfig": "apps/mfe1/tsconfig.app.json", "assets": ["apps/mfe1/src/favicon.ico", "apps/mfe1/src/assets"], "styles": ["apps/mfe1/src/styles.css"], @@ -32,56 +62,30 @@ "maximumError": "4kb" } ], - "fileReplacements": [ - { - "replace": "apps/mfe1/src/environments/environment.ts", - "with": "apps/mfe1/src/environments/environment.prod.ts" - } - ], "outputHashing": "all" }, "development": { - "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, - "sourceMap": true, - "namedChunks": true + "sourceMap": true } }, "defaultConfiguration": "production" }, - "serve": { + "serve-original": { "executor": "@angular-devkit/build-angular:dev-server", + "options": { + "port": 4201 + }, "configurations": { "production": { - "buildTarget": "mfe1:build:production" + "buildTarget": "mfe1:esbuild:production" }, "development": { - "buildTarget": "mfe1:build:development" + "buildTarget": "mfe1:esbuild:development" } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "executor": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "mfe1:build" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "options": { - "lintFilePatterns": ["apps/mfe1/**/*.ts", "apps/mfe1/**/*.html"] - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/apps/mfe1"], - "options": { - "jestConfig": "apps/mfe1/jest.config.ts" - } } - }, - "tags": [] + } } diff --git a/apps/mfe1/src/app/app.component.html b/apps/mfe1/src/app/app.component.html index e4516dc9..70ebd510 100644 --- a/apps/mfe1/src/app/app.component.html +++ b/apps/mfe1/src/app/app.component.html @@ -1 +1,2 @@ - + + diff --git a/apps/mfe1/src/app/app.component.spec.ts b/apps/mfe1/src/app/app.component.spec.ts deleted file mode 100644 index 7534e3f8..00000000 --- a/apps/mfe1/src/app/app.component.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; -import { NxWelcomeComponent } from './nx-welcome.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [AppComponent, NxWelcomeComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'mfe1'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('mfe1'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Welcome mfe1'); - }); -}); diff --git a/apps/mfe1/src/app/app.component.ts b/apps/mfe1/src/app/app.component.ts index 0105768b..e975d52a 100644 --- a/apps/mfe1/src/app/app.component.ts +++ b/apps/mfe1/src/app/app.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { NxWelcomeComponent } from './nx-welcome.component'; @Component({ - selector: 'angular-architects-root', + standalone: true, + imports: [NxWelcomeComponent, RouterModule], + selector: 'mfe1-app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + styleUrl: './app.component.css', }) export class AppComponent { title = 'mfe1'; diff --git a/apps/mfe1/src/app/app.config.ts b/apps/mfe1/src/app/app.config.ts new file mode 100644 index 00000000..ed404941 --- /dev/null +++ b/apps/mfe1/src/app/app.config.ts @@ -0,0 +1,7 @@ +import { ApplicationConfig } from '@angular/core'; +import { provideRouter } from '@angular/router'; +import { appRoutes } from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [provideRouter(appRoutes)], +}; diff --git a/apps/mfe1/src/app/app.module.ts b/apps/mfe1/src/app/app.module.ts deleted file mode 100644 index 7f240f85..00000000 --- a/apps/mfe1/src/app/app.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { DemoComponent } from './demo/demo.component'; -import { NxWelcomeComponent } from './nx-welcome.component'; - -@NgModule({ - declarations: [AppComponent, NxWelcomeComponent], - imports: [BrowserModule, DemoComponent], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/apps/mfe1/src/app/app.routes.ts b/apps/mfe1/src/app/app.routes.ts new file mode 100644 index 00000000..8762dfe2 --- /dev/null +++ b/apps/mfe1/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Route } from '@angular/router'; + +export const appRoutes: Route[] = []; diff --git a/apps/mfe1/src/app/demo/demo.component.ts b/apps/mfe1/src/app/demo/demo.component.ts index 10082799..4a616ca4 100644 --- a/apps/mfe1/src/app/demo/demo.component.ts +++ b/apps/mfe1/src/app/demo/demo.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; @Component({ standalone: true, - selector: 'angular-architects-demo', + selector: 'mfe1-demo', templateUrl: './demo.component.html', styleUrls: ['./demo.component.css'], imports: [CommonModule, PlaygroundLibModule], diff --git a/apps/mfe1/src/app/nx-welcome.component.ts b/apps/mfe1/src/app/nx-welcome.component.ts index 6d7ebbcd..f6897725 100644 --- a/apps/mfe1/src/app/nx-welcome.component.ts +++ b/apps/mfe1/src/app/nx-welcome.component.ts @@ -1,9 +1,10 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; - -/* eslint-disable */ +import { Component, ViewEncapsulation } from '@angular/core'; +import { CommonModule } from '@angular/common'; @Component({ - selector: 'angular-architects-nx-welcome', + selector: 'mfe1-nx-welcome', + standalone: true, + imports: [CommonModule], template: `
@@ -471,7 +469,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-
@@ -551,7 +548,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -

Next steps

@@ -770,9 +816,27 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 
# Generate UI lib
 nx g @nx/angular:lib ui
-
 # Add a component
-nx g @nx/angular:component button --project ui
+nx g @nx/angular:component ui/src/lib/button + +
+ + + + + View project details + + 
nx show project mfe1 --web
@@ -812,15 +876,12 @@ nx g @nx/angular:component button --project ui 
# see what's been affected by changes
 nx affected:graph
-
 # run tests for current changes
 nx affected:test
-
 # run e2e tests for current changes
 nx affected:e2e
-

Carefully crafted with styles: [], encapsulation: ViewEncapsulation.None, }) -export class NxWelcomeComponent implements OnInit { - constructor() {} - - ngOnInit(): void {} -} +export class NxWelcomeComponent {} diff --git a/apps/mfe1/src/bootstrap.ts b/apps/mfe1/src/bootstrap.ts index d9a2e7e4..514c89a0 100644 --- a/apps/mfe1/src/bootstrap.ts +++ b/apps/mfe1/src/bootstrap.ts @@ -1,13 +1,7 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +bootstrapApplication(AppComponent, appConfig).catch((err) => + console.error(err) +); diff --git a/apps/mfe1/src/environments/environment.prod.ts b/apps/mfe1/src/environments/environment.prod.ts deleted file mode 100644 index c9669790..00000000 --- a/apps/mfe1/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true, -}; diff --git a/apps/mfe1/src/environments/environment.ts b/apps/mfe1/src/environments/environment.ts deleted file mode 100644 index 66998ae9..00000000 --- a/apps/mfe1/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/apps/mfe1/src/index.html b/apps/mfe1/src/index.html index 88a67909..4d217478 100644 --- a/apps/mfe1/src/index.html +++ b/apps/mfe1/src/index.html @@ -8,6 +8,6 @@ - + diff --git a/apps/mfe1/src/main.ts b/apps/mfe1/src/main.ts index 4d31b464..bff4b2af 100644 --- a/apps/mfe1/src/main.ts +++ b/apps/mfe1/src/main.ts @@ -1,5 +1,6 @@ import { initFederation } from '@angular-architects/native-federation'; initFederation() + .catch((err) => console.error(err)) .then(() => import('./bootstrap')) .catch((err) => console.error(err)); diff --git a/apps/mfe1/src/polyfills.ts b/apps/mfe1/src/polyfills.ts deleted file mode 100644 index 1685a007..00000000 --- a/apps/mfe1/src/polyfills.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes recent versions of Safari, Chrome (including - * Opera), Edge on the desktop, and iOS and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ -import 'es-module-shims'; diff --git a/apps/mfe1/src/test-setup.ts b/apps/mfe1/src/test-setup.ts index 1100b3e8..ab1eeeb3 100644 --- a/apps/mfe1/src/test-setup.ts +++ b/apps/mfe1/src/test-setup.ts @@ -1 +1,8 @@ +// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment +globalThis.ngJest = { + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, +}; import 'jest-preset-angular/setup-jest'; diff --git a/apps/mfe1/tsconfig.app.json b/apps/mfe1/tsconfig.app.json index 7d7a8070..fff4a41d 100644 --- a/apps/mfe1/tsconfig.app.json +++ b/apps/mfe1/tsconfig.app.json @@ -4,7 +4,7 @@ "outDir": "../../dist/out-tsc", "types": [] }, - "files": ["src/main.ts", "src/polyfills.ts"], + "files": ["src/main.ts"], "include": ["src/**/*.d.ts"], - "exclude": ["**/*.test.ts", "**/*.spec.ts", "jest.config.ts"] + "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"] } diff --git a/apps/mfe1/tsconfig.editor.json b/apps/mfe1/tsconfig.editor.json index 20c4afdb..a8ac182c 100644 --- a/apps/mfe1/tsconfig.editor.json +++ b/apps/mfe1/tsconfig.editor.json @@ -1,7 +1,6 @@ { "extends": "./tsconfig.json", - "include": ["**/*.ts"], - "compilerOptions": { - "types": ["jest", "node"] - } + "include": ["src/**/*.ts"], + "compilerOptions": {}, + "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"] } diff --git a/apps/mfe1/tsconfig.json b/apps/mfe1/tsconfig.json index c756d846..a28fec9a 100644 --- a/apps/mfe1/tsconfig.json +++ b/apps/mfe1/tsconfig.json @@ -1,27 +1,29 @@ { - "extends": "../../tsconfig.base.json", + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, "files": [], "include": [], "references": [ { - "path": "./tsconfig.app.json" + "path": "./tsconfig.editor.json" }, { - "path": "./tsconfig.spec.json" + "path": "./tsconfig.app.json" }, { - "path": "./tsconfig.editor.json" + "path": "./tsconfig.spec.json" } ], - "compilerOptions": { - "target": "es2020", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, + "extends": "../../tsconfig.base.json", "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, diff --git a/apps/mfe1/tsconfig.spec.json b/apps/mfe1/tsconfig.spec.json index c5db0277..53fbfcdc 100644 --- a/apps/mfe1/tsconfig.spec.json +++ b/apps/mfe1/tsconfig.spec.json @@ -3,8 +3,14 @@ "compilerOptions": { "outDir": "../../dist/out-tsc", "module": "commonjs", + "target": "es2016", "types": ["jest", "node"] }, "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] } diff --git a/apps/mfe2-e2e/project.json b/apps/mfe2-e2e/project.json index c93236dc..13dc40da 100644 --- a/apps/mfe2-e2e/project.json +++ b/apps/mfe2-e2e/project.json @@ -16,13 +16,6 @@ "devServerTarget": "mfe2:serve:production" } } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["apps/mfe2-e2e/**/*.{js,ts}"] - } } }, "tags": [], diff --git a/apps/mfe2/.eslintrc.json b/apps/mfe2/.eslintrc.json index fcdf2f4c..1010589e 100644 --- a/apps/mfe2/.eslintrc.json +++ b/apps/mfe2/.eslintrc.json @@ -1,5 +1,5 @@ { - "extends": ["../../.eslintrc.json"], + "extends": ["../../.eslintrc.json", "../../.eslintrc.base.json"], "ignorePatterns": ["!**/*"], "overrides": [ { @@ -13,7 +13,7 @@ "error", { "type": "attribute", - "prefix": "angularArchitects", + "prefix": "mfe2", "style": "camelCase" } ], @@ -21,7 +21,7 @@ "error", { "type": "element", - "prefix": "angular-architects", + "prefix": "mfe2", "style": "kebab-case" } ] diff --git a/apps/mfe2/federation.config.js b/apps/mfe2/federation.config.js index 14976e92..952b0243 100644 --- a/apps/mfe2/federation.config.js +++ b/apps/mfe2/federation.config.js @@ -4,6 +4,8 @@ const { } = require('@angular-architects/native-federation/config'); module.exports = withNativeFederation({ + name: 'mfe2', + shared: { ...shareAll({ singleton: true, @@ -11,4 +13,12 @@ module.exports = withNativeFederation({ requiredVersion: 'auto', }), }, + + skip: [ + 'rxjs/ajax', + 'rxjs/fetch', + 'rxjs/testing', + 'rxjs/webSocket', + // Add further packages you don't need at runtime + ], }); diff --git a/apps/mfe2/jest.config.ts b/apps/mfe2/jest.config.ts index 21106286..b8de19e0 100644 --- a/apps/mfe2/jest.config.ts +++ b/apps/mfe2/jest.config.ts @@ -3,7 +3,6 @@ export default { displayName: 'mfe2', preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: {}, coverageDirectory: '../../coverage/apps/mfe2', transform: { '^.+\\.(ts|mjs|js|html)$': [ diff --git a/apps/mfe2/project.json b/apps/mfe2/project.json index 69a3879d..75d46d89 100644 --- a/apps/mfe2/project.json +++ b/apps/mfe2/project.json @@ -2,17 +2,47 @@ "name": "mfe2", "$schema": "../../node_modules/nx/schemas/project-schema.json", "projectType": "application", + "prefix": "mfe2", "sourceRoot": "apps/mfe2/src", - "prefix": "angular-architects", + "tags": [], "targets": { "build": { "executor": "@angular-architects/native-federation:build", + "options": {}, + "configurations": { + "production": { + "target": "mfe2:esbuild:production" + }, + "development": { + "target": "mfe2:esbuild:development", + "dev": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "executor": "@angular-architects/native-federation:build", + "options": { + "target": "mfe2:serve-original:development", + "rebuildDelay": 0, + "dev": true, + "port": 0 + } + }, + "extract-i18n": { + "executor": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "mfe2:build" + } + }, + "esbuild": { + "executor": "@angular-devkit/build-angular:application", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/apps/mfe2", "index": "apps/mfe2/src/index.html", - "main": "apps/mfe2/src/main.ts", - "polyfills": "apps/mfe2/src/polyfills.ts", + "browser": "apps/mfe2/src/main.ts", + "polyfills": ["zone.js", "es-module-shims"], "tsConfig": "apps/mfe2/tsconfig.app.json", "assets": ["apps/mfe2/src/favicon.ico", "apps/mfe2/src/assets"], "styles": ["apps/mfe2/src/styles.css"], @@ -32,57 +62,30 @@ "maximumError": "4kb" } ], - "fileReplacements": [ - { - "replace": "apps/mfe2/src/environments/environment.ts", - "with": "apps/mfe2/src/environments/environment.prod.ts" - } - ], "outputHashing": "all" }, "development": { - "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, - "sourceMap": true, - "namedChunks": true + "sourceMap": true } }, "defaultConfiguration": "production" }, - "serve": { + "serve-original": { "executor": "@angular-devkit/build-angular:dev-server", + "options": { + "port": 4202 + }, "configurations": { "production": { - "buildTarget": "mfe2:build:production" + "buildTarget": "mfe2:esbuild:production" }, "development": { - "buildTarget": "mfe2:build:development" + "buildTarget": "mfe2:esbuild:development" } }, - "defaultConfiguration": "development", - "options": {} - }, - "extract-i18n": { - "executor": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "mfe2:build" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "options": { - "lintFilePatterns": ["apps/mfe2/**/*.ts", "apps/mfe2/**/*.html"] - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/apps/mfe2"], - "options": { - "jestConfig": "apps/mfe2/jest.config.ts" - } + "defaultConfiguration": "development" } - }, - "tags": [] + } } diff --git a/apps/mfe2/src/app/app.component.html b/apps/mfe2/src/app/app.component.html index e4516dc9..e05df5a4 100644 --- a/apps/mfe2/src/app/app.component.html +++ b/apps/mfe2/src/app/app.component.html @@ -1 +1,2 @@ - + + diff --git a/apps/mfe2/src/app/app.component.spec.ts b/apps/mfe2/src/app/app.component.spec.ts deleted file mode 100644 index 339ae4d1..00000000 --- a/apps/mfe2/src/app/app.component.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; -import { NxWelcomeComponent } from './nx-welcome.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [AppComponent, NxWelcomeComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'mfe2'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('mfe2'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Welcome mfe2'); - }); -}); diff --git a/apps/mfe2/src/app/app.component.ts b/apps/mfe2/src/app/app.component.ts index 4e815404..d93d2622 100644 --- a/apps/mfe2/src/app/app.component.ts +++ b/apps/mfe2/src/app/app.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { NxWelcomeComponent } from './nx-welcome.component'; @Component({ - selector: 'angular-architects-root', + standalone: true, + imports: [NxWelcomeComponent, RouterModule], + selector: 'mfe2-app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + styleUrl: './app.component.css', }) export class AppComponent { title = 'mfe2'; diff --git a/apps/mfe2/src/app/app.config.ts b/apps/mfe2/src/app/app.config.ts new file mode 100644 index 00000000..ed404941 --- /dev/null +++ b/apps/mfe2/src/app/app.config.ts @@ -0,0 +1,7 @@ +import { ApplicationConfig } from '@angular/core'; +import { provideRouter } from '@angular/router'; +import { appRoutes } from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [provideRouter(appRoutes)], +}; diff --git a/apps/mfe2/src/app/app.module.ts b/apps/mfe2/src/app/app.module.ts deleted file mode 100644 index ca4cff2f..00000000 --- a/apps/mfe2/src/app/app.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { NxWelcomeComponent } from './nx-welcome.component'; - -@NgModule({ - declarations: [AppComponent, NxWelcomeComponent], - imports: [BrowserModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/apps/mfe2/src/app/app.routes.ts b/apps/mfe2/src/app/app.routes.ts new file mode 100644 index 00000000..8762dfe2 --- /dev/null +++ b/apps/mfe2/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Route } from '@angular/router'; + +export const appRoutes: Route[] = []; diff --git a/apps/mfe2/src/app/nx-welcome.component.ts b/apps/mfe2/src/app/nx-welcome.component.ts index 2bc2fc99..1e95bc72 100644 --- a/apps/mfe2/src/app/nx-welcome.component.ts +++ b/apps/mfe2/src/app/nx-welcome.component.ts @@ -1,9 +1,10 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; - -/* eslint-disable */ +import { Component, ViewEncapsulation } from '@angular/core'; +import { CommonModule } from '@angular/common'; @Component({ - selector: 'angular-architects-nx-welcome', + selector: 'mfe2-nx-welcome', + standalone: true, + imports: [CommonModule], template: `

@@ -471,7 +469,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-
@@ -551,7 +548,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -

Next steps

@@ -770,9 +816,27 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 
# Generate UI lib
 nx g @nx/angular:lib ui
-
 # Add a component
-nx g @nx/angular:component button --project ui
+nx g @nx/angular:component ui/src/lib/button + +
+ + + + + View project details + + 
nx show project mfe2 --web
@@ -812,15 +876,12 @@ nx g @nx/angular:component button --project ui 
# see what's been affected by changes
 nx affected:graph
-
 # run tests for current changes
 nx affected:test
-
 # run e2e tests for current changes
 nx affected:e2e
-

Carefully crafted with styles: [], encapsulation: ViewEncapsulation.None, }) -export class NxWelcomeComponent implements OnInit { - constructor() {} - - ngOnInit(): void {} -} +export class NxWelcomeComponent {} diff --git a/apps/mfe2/src/bootstrap.ts b/apps/mfe2/src/bootstrap.ts index d9a2e7e4..514c89a0 100644 --- a/apps/mfe2/src/bootstrap.ts +++ b/apps/mfe2/src/bootstrap.ts @@ -1,13 +1,7 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +bootstrapApplication(AppComponent, appConfig).catch((err) => + console.error(err) +); diff --git a/apps/mfe2/src/environments/environment.prod.ts b/apps/mfe2/src/environments/environment.prod.ts deleted file mode 100644 index c9669790..00000000 --- a/apps/mfe2/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true, -}; diff --git a/apps/mfe2/src/environments/environment.ts b/apps/mfe2/src/environments/environment.ts deleted file mode 100644 index 66998ae9..00000000 --- a/apps/mfe2/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/apps/mfe2/src/index.html b/apps/mfe2/src/index.html index 0d39e932..eaccd005 100644 --- a/apps/mfe2/src/index.html +++ b/apps/mfe2/src/index.html @@ -8,6 +8,6 @@ - + diff --git a/apps/mfe2/src/polyfills.ts b/apps/mfe2/src/polyfills.ts deleted file mode 100644 index ccd8b2f4..00000000 --- a/apps/mfe2/src/polyfills.ts +++ /dev/null @@ -1,54 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes recent versions of Safari, Chrome (including - * Opera), Edge on the desktop, and iOS and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ - -import 'es-module-shims'; diff --git a/apps/mfe2/src/test-setup.ts b/apps/mfe2/src/test-setup.ts index 1100b3e8..ab1eeeb3 100644 --- a/apps/mfe2/src/test-setup.ts +++ b/apps/mfe2/src/test-setup.ts @@ -1 +1,8 @@ +// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment +globalThis.ngJest = { + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, +}; import 'jest-preset-angular/setup-jest'; diff --git a/apps/mfe2/tsconfig.app.json b/apps/mfe2/tsconfig.app.json index 7d7a8070..fff4a41d 100644 --- a/apps/mfe2/tsconfig.app.json +++ b/apps/mfe2/tsconfig.app.json @@ -4,7 +4,7 @@ "outDir": "../../dist/out-tsc", "types": [] }, - "files": ["src/main.ts", "src/polyfills.ts"], + "files": ["src/main.ts"], "include": ["src/**/*.d.ts"], - "exclude": ["**/*.test.ts", "**/*.spec.ts", "jest.config.ts"] + "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"] } diff --git a/apps/mfe2/tsconfig.editor.json b/apps/mfe2/tsconfig.editor.json index 20c4afdb..a8ac182c 100644 --- a/apps/mfe2/tsconfig.editor.json +++ b/apps/mfe2/tsconfig.editor.json @@ -1,7 +1,6 @@ { "extends": "./tsconfig.json", - "include": ["**/*.ts"], - "compilerOptions": { - "types": ["jest", "node"] - } + "include": ["src/**/*.ts"], + "compilerOptions": {}, + "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"] } diff --git a/apps/mfe2/tsconfig.json b/apps/mfe2/tsconfig.json index c756d846..a28fec9a 100644 --- a/apps/mfe2/tsconfig.json +++ b/apps/mfe2/tsconfig.json @@ -1,27 +1,29 @@ { - "extends": "../../tsconfig.base.json", + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, "files": [], "include": [], "references": [ { - "path": "./tsconfig.app.json" + "path": "./tsconfig.editor.json" }, { - "path": "./tsconfig.spec.json" + "path": "./tsconfig.app.json" }, { - "path": "./tsconfig.editor.json" + "path": "./tsconfig.spec.json" } ], - "compilerOptions": { - "target": "es2020", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, + "extends": "../../tsconfig.base.json", "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, diff --git a/apps/mfe2/tsconfig.spec.json b/apps/mfe2/tsconfig.spec.json index c5db0277..53fbfcdc 100644 --- a/apps/mfe2/tsconfig.spec.json +++ b/apps/mfe2/tsconfig.spec.json @@ -3,8 +3,14 @@ "compilerOptions": { "outDir": "../../dist/out-tsc", "module": "commonjs", + "target": "es2016", "types": ["jest", "node"] }, "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] } diff --git a/apps/native-federation-e2e/.eslintrc.json b/apps/native-federation-e2e/.eslintrc.json new file mode 100644 index 00000000..8d4e2111 --- /dev/null +++ b/apps/native-federation-e2e/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["../../.eslintrc.base.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/apps/native-federation-e2e/jest.config.ts b/apps/native-federation-e2e/jest.config.ts index e763e3dc..e521ba42 100644 --- a/apps/native-federation-e2e/jest.config.ts +++ b/apps/native-federation-e2e/jest.config.ts @@ -2,14 +2,8 @@ export default { displayName: 'native-federation-e2e', preset: '../../jest.preset.js', - globals: {}, transform: { - '^.+\\.[tj]s$': [ - 'ts-jest', - { - tsconfig: '/tsconfig.spec.json', - }, - ], + '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '/tsconfig.spec.json' }], }, moduleFileExtensions: ['ts', 'js', 'html'], coverageDirectory: '../../coverage/apps/native-federation-e2e', diff --git a/apps/native-federation-e2e/project.json b/apps/native-federation-e2e/project.json index 5beb924e..52ad3b4c 100644 --- a/apps/native-federation-e2e/project.json +++ b/apps/native-federation-e2e/project.json @@ -12,6 +12,9 @@ "passWithNoTests": false }, "dependsOn": ["native-federation:build"] + }, + "test": { + "command": "echo Noop" } }, "tags": [], diff --git a/apps/native-federation-e2e/tsconfig.spec.json b/apps/native-federation-e2e/tsconfig.spec.json index 546f1287..9b2a121d 100644 --- a/apps/native-federation-e2e/tsconfig.spec.json +++ b/apps/native-federation-e2e/tsconfig.spec.json @@ -5,5 +5,10 @@ "module": "commonjs", "types": ["jest", "node"] }, - "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] } diff --git a/apps/playground-e2e/project.json b/apps/playground-e2e/project.json index b6f6aa16..d7c93e1c 100644 --- a/apps/playground-e2e/project.json +++ b/apps/playground-e2e/project.json @@ -19,9 +19,6 @@ }, "lint": { "executor": "@nx/eslint:lint", - "options": { - "lintFilePatterns": ["apps/playground-e2e/**/*.{js,ts}"] - }, "outputs": ["{options.outputFile}"] } }, diff --git a/apps/playground/.eslintrc.json b/apps/playground/.eslintrc.json index fcdf2f4c..51b552fa 100644 --- a/apps/playground/.eslintrc.json +++ b/apps/playground/.eslintrc.json @@ -1,5 +1,5 @@ { - "extends": ["../../.eslintrc.json"], + "extends": ["../../.eslintrc.json", "../../.eslintrc.base.json"], "ignorePatterns": ["!**/*"], "overrides": [ { @@ -13,7 +13,7 @@ "error", { "type": "attribute", - "prefix": "angularArchitects", + "prefix": "playground", "style": "camelCase" } ], @@ -21,7 +21,7 @@ "error", { "type": "element", - "prefix": "angular-architects", + "prefix": "playground", "style": "kebab-case" } ] diff --git a/apps/playground/federation.config.js b/apps/playground/federation.config.js index 721547f5..5eb4b5d8 100644 --- a/apps/playground/federation.config.js +++ b/apps/playground/federation.config.js @@ -12,5 +12,11 @@ module.exports = withNativeFederation({ }), }, - sharedMappings: ['@angular-architects/playground-lib'], + skip: [ + 'rxjs/ajax', + 'rxjs/fetch', + 'rxjs/testing', + 'rxjs/webSocket', + // Add further packages you don't need at runtime + ], }); diff --git a/apps/playground/jest.config.ts b/apps/playground/jest.config.ts index 1ce534fd..787ce24c 100644 --- a/apps/playground/jest.config.ts +++ b/apps/playground/jest.config.ts @@ -3,15 +3,9 @@ export default { displayName: 'playground', preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: {}, coverageDirectory: '../../coverage/apps/playground', - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], transform: { - '^.+.(ts|mjs|js|html)$': [ + '^.+\\.(ts|mjs|js|html)$': [ 'jest-preset-angular', { tsconfig: '/tsconfig.spec.json', @@ -19,5 +13,10 @@ export default { }, ], }, - transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'], + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/apps/playground/project.json b/apps/playground/project.json index 1eb4bb0d..4f8aae08 100644 --- a/apps/playground/project.json +++ b/apps/playground/project.json @@ -2,8 +2,9 @@ "name": "playground", "$schema": "../../node_modules/nx/schemas/project-schema.json", "projectType": "application", + "prefix": "playground", "sourceRoot": "apps/playground/src", - "prefix": "angular-architects", + "tags": [], "targets": { "demo": { "executor": "@angular-architects/native-federation:build", @@ -12,11 +13,41 @@ }, "build": { "executor": "@angular-architects/native-federation:build", + "options": {}, + "configurations": { + "production": { + "target": "playground:esbuild:production" + }, + "development": { + "target": "playground:esbuild:development", + "dev": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "executor": "@angular-architects/native-federation:build", + "options": { + "target": "playground:serve-original:development", + "rebuildDelay": 0, + "dev": true, + "port": 0 + } + }, + "extract-i18n": { + "executor": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "playground:build" + } + }, + "esbuild": { + "executor": "@angular-devkit/build-angular:application", + "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/apps/playground", "index": "apps/playground/src/index.html", - "main": "apps/playground/src/main.ts", - "polyfills": "apps/playground/src/polyfills.ts", + "browser": "apps/playground/src/main.ts", + "polyfills": ["zone.js", "es-module-shims"], "tsConfig": "apps/playground/tsconfig.app.json", "assets": [ "apps/playground/src/favicon.ico", @@ -39,60 +70,30 @@ "maximumError": "4kb" } ], - "fileReplacements": [ - { - "replace": "apps/playground/src/environments/environment.ts", - "with": "apps/playground/src/environments/environment.prod.ts" - } - ], "outputHashing": "all" }, "development": { - "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, - "sourceMap": true, - "namedChunks": true + "sourceMap": true } }, "defaultConfiguration": "production" }, - "serve": { + "serve-original": { "executor": "@angular-devkit/build-angular:dev-server", + "options": { + "port": 4200 + }, "configurations": { "production": { - "buildTarget": "playground:build:production" + "buildTarget": "playground:esbuild:production" }, "development": { - "buildTarget": "playground:build:development" + "buildTarget": "playground:esbuild:development" } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "executor": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "playground:build" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "options": { - "lintFilePatterns": [ - "apps/playground/src/**/*.ts", - "apps/playground/src/**/*.html" - ] - }, - "outputs": ["{options.outputFile}"] - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/apps/playground"], - "options": { - "jestConfig": "apps/playground/jest.config.ts" - } } - }, - "tags": [] + } } diff --git a/apps/playground/src/app/app.component.css b/apps/playground/src/app/app.component.css index f222adff..e69de29b 100644 --- a/apps/playground/src/app/app.component.css +++ b/apps/playground/src/app/app.component.css @@ -1,133 +0,0 @@ -/* - * Remove template code below - */ -:host { - display: block; - font-family: sans-serif; - min-width: 300px; - max-width: 600px; - margin: 50px auto; -} - -.gutter-left { - margin-left: 9px; -} - -.col-span-2 { - grid-column: span 2; -} - -.flex { - display: flex; - align-items: center; - justify-content: center; -} - -header { - background-color: #143055; - color: white; - padding: 5px; - border-radius: 3px; -} - -main { - padding: 0 36px; -} - -p { - text-align: center; -} - -h1 { - text-align: center; - margin-left: 18px; - font-size: 24px; -} - -h2 { - text-align: center; - font-size: 20px; - margin: 40px 0 10px 0; -} - -.resources { - text-align: center; - list-style: none; - padding: 0; - display: grid; - grid-gap: 9px; - grid-template-columns: 1fr 1fr; -} - -.resource { - color: #0094ba; - height: 36px; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 3px 9px; - text-decoration: none; -} - -.resource:hover { - background-color: rgba(68, 138, 255, 0.04); -} - -pre { - padding: 9px; - border-radius: 4px; - background-color: black; - color: #eee; -} - -details { - border-radius: 4px; - color: #333; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - padding: 3px 9px; - margin-bottom: 9px; -} - -summary { - cursor: pointer; - outline: none; - height: 36px; - line-height: 36px; -} - -.github-star-container { - margin-top: 12px; - line-height: 20px; -} - -.github-star-container a { - display: flex; - align-items: center; - text-decoration: none; - color: #333; -} - -.github-star-badge { - color: #24292e; - display: flex; - align-items: center; - font-size: 12px; - padding: 3px 10px; - border: 1px solid rgba(27, 31, 35, 0.2); - border-radius: 3px; - background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%); - margin-left: 4px; - font-weight: 600; -} - -.github-star-badge:hover { - background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%); - border-color: rgba(27, 31, 35, 0.35); - background-position: -0.5em; -} -.github-star-badge .material-icons { - height: 16px; - width: 16px; - margin-right: 4px; -} diff --git a/apps/playground/src/app/app.component.spec.ts b/apps/playground/src/app/app.component.spec.ts deleted file mode 100644 index 0324f336..00000000 --- a/apps/playground/src/app/app.component.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [AppComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'playground'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('playground'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain( - 'Hello Native Federation!' - ); - }); -}); diff --git a/apps/playground/src/app/app.component.ts b/apps/playground/src/app/app.component.ts index b5d1d6f1..d9c92177 100644 --- a/apps/playground/src/app/app.component.ts +++ b/apps/playground/src/app/app.component.ts @@ -1,15 +1,19 @@ +import { RouterModule } from '@angular/router'; import { loadRemoteModule } from '@angular-architects/native-federation'; import { AuthService } from '@angular-architects/playground-lib'; import { Component, Type } from '@angular/core'; +import { NgComponentOutlet, NgIf } from '@angular/common'; @Component({ - selector: 'angular-architects-root', + standalone: true, + imports: [RouterModule, NgComponentOutlet, NgIf], + selector: 'playground-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + styleUrl: './app.component.css', }) export class AppComponent { title = 'playground'; - Cmp: Type; + Cmp: Type | undefined = undefined; constructor(authService: AuthService) { authService.userName = 'Jane Doe'; diff --git a/apps/playground/src/app/app.config.ts b/apps/playground/src/app/app.config.ts new file mode 100644 index 00000000..ed404941 --- /dev/null +++ b/apps/playground/src/app/app.config.ts @@ -0,0 +1,7 @@ +import { ApplicationConfig } from '@angular/core'; +import { provideRouter } from '@angular/router'; +import { appRoutes } from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [provideRouter(appRoutes)], +}; diff --git a/apps/playground/src/app/app.module.ts b/apps/playground/src/app/app.module.ts deleted file mode 100644 index 7bcb9e9a..00000000 --- a/apps/playground/src/app/app.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/apps/playground/src/app/app.routes.ts b/apps/playground/src/app/app.routes.ts new file mode 100644 index 00000000..8762dfe2 --- /dev/null +++ b/apps/playground/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Route } from '@angular/router'; + +export const appRoutes: Route[] = []; diff --git a/apps/playground/src/bootstrap.ts b/apps/playground/src/bootstrap.ts index d9a2e7e4..514c89a0 100644 --- a/apps/playground/src/bootstrap.ts +++ b/apps/playground/src/bootstrap.ts @@ -1,13 +1,7 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +bootstrapApplication(AppComponent, appConfig).catch((err) => + console.error(err) +); diff --git a/apps/playground/src/environments/environment.prod.ts b/apps/playground/src/environments/environment.prod.ts deleted file mode 100644 index c9669790..00000000 --- a/apps/playground/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true, -}; diff --git a/apps/playground/src/environments/environment.ts b/apps/playground/src/environments/environment.ts deleted file mode 100644 index 66998ae9..00000000 --- a/apps/playground/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/apps/playground/src/index.html b/apps/playground/src/index.html index 58846e0b..92ef570a 100644 --- a/apps/playground/src/index.html +++ b/apps/playground/src/index.html @@ -8,6 +8,6 @@ - + diff --git a/apps/playground/src/main.ts b/apps/playground/src/main.ts index 1e485abf..bad372b8 100644 --- a/apps/playground/src/main.ts +++ b/apps/playground/src/main.ts @@ -3,5 +3,6 @@ import { initFederation } from '@angular-architects/native-federation'; initFederation({ //'mfe1': 'http://localhost:3001/remoteEntry.json' }) + .catch((err) => console.error(err)) .then(() => import('./bootstrap')) - .catch((e) => console.error('err', e)); + .catch((err) => console.error(err)); diff --git a/apps/playground/src/polyfills.ts b/apps/playground/src/polyfills.ts deleted file mode 100644 index afab4cd4..00000000 --- a/apps/playground/src/polyfills.ts +++ /dev/null @@ -1,54 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ - -import 'es-module-shims'; diff --git a/apps/playground/src/test-setup.ts b/apps/playground/src/test-setup.ts index 2d05e039..ab1eeeb3 100644 --- a/apps/playground/src/test-setup.ts +++ b/apps/playground/src/test-setup.ts @@ -1,14 +1,8 @@ +// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment +globalThis.ngJest = { + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, +}; import 'jest-preset-angular/setup-jest'; - -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, -} from '@angular/platform-browser-dynamic/testing'; - -getTestBed().resetTestEnvironment(); -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), - { teardown: { destroyAfterEach: false } } -); diff --git a/apps/playground/tsconfig.app.json b/apps/playground/tsconfig.app.json index feaf147e..fff4a41d 100644 --- a/apps/playground/tsconfig.app.json +++ b/apps/playground/tsconfig.app.json @@ -4,7 +4,7 @@ "outDir": "../../dist/out-tsc", "types": [] }, - "files": ["src/main.ts", "src/polyfills.ts"], + "files": ["src/main.ts"], "include": ["src/**/*.d.ts"], - "exclude": ["jest.config.ts"] + "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"] } diff --git a/apps/playground/tsconfig.editor.json b/apps/playground/tsconfig.editor.json index 1bf3c0a7..a8ac182c 100644 --- a/apps/playground/tsconfig.editor.json +++ b/apps/playground/tsconfig.editor.json @@ -1,8 +1,6 @@ { "extends": "./tsconfig.json", - "include": ["**/*.ts"], - "compilerOptions": { - "types": ["jest", "node"] - }, - "exclude": ["jest.config.ts"] + "include": ["src/**/*.ts"], + "compilerOptions": {}, + "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"] } diff --git a/apps/playground/tsconfig.json b/apps/playground/tsconfig.json index 7dcba407..775c571f 100644 --- a/apps/playground/tsconfig.json +++ b/apps/playground/tsconfig.json @@ -1,19 +1,33 @@ { - "extends": "../../tsconfig.base.json", + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + // "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, "files": [], "include": [], "references": [ { - "path": "./tsconfig.app.json" + "path": "./tsconfig.editor.json" }, { - "path": "./tsconfig.spec.json" + "path": "./tsconfig.app.json" }, { - "path": "./tsconfig.editor.json" + "path": "./tsconfig.spec.json" } ], - "compilerOptions": { - "target": "es2020" + "extends": "../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true } } diff --git a/apps/playground/tsconfig.spec.json b/apps/playground/tsconfig.spec.json index b6347c6f..53fbfcdc 100644 --- a/apps/playground/tsconfig.spec.json +++ b/apps/playground/tsconfig.spec.json @@ -3,8 +3,14 @@ "compilerOptions": { "outDir": "../../dist/out-tsc", "module": "commonjs", + "target": "es2016", "types": ["jest", "node"] }, "files": ["src/test-setup.ts"], - "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts", "jest.config.ts"] + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] }