P0080 | Upgrade angular from 14 to 21#481
Closed
dvCodeWorld wants to merge 101 commits intodevelopmentfrom
Closed
Conversation
P0079::Proxy-auth script bugs and improvements
- Replace all lodash imports with lodash-es for tree-shaking - Remove duplicate MatMenuModule (logs.module.ts), FormsModule (register.module.ts) - Fix duplicate createCustomElement in element.module.ts, remove dead commented code - Remove console.log in layout.component.ts and otp.effects.ts - Remove empty tap/finalize in http-wrapper and error-interceptor - Fix typo swtichClientSuccess → switchClientSuccess (reducer/selector/component) - Fix bug: getAllProjectsError not dispatched + all 4 effects hasError pattern - Fix wrong property name projects → allProjects in getAllProjectsError reducer - Remove enableIvy flags from tsconfigs (removed in v15) - Remove ngcc postinstall script (removed in v15) - Update @angular-builders/custom-webpack 14 → 15 - Update ngx-build-plus 14 → 15 - Add node types to tsconfig.app.json for process.env compilation - Add local build configuration to proxy project.json - Update proxy-auth production budget to 3mb - Run nx migrations, workspace.json split to project.json files - Both proxy and proxy-auth apps build successfully on Angular 15.2.9
- Upgrade Angular core/CDK/Material: 14.2.x → 17.3.9 - Upgrade @ngrx/*: 14.x → 17.2.0 - Upgrade @angular/fire: 7.5.0 → 17.1.0 (firebase: 9.16.0 → 10.12.0) - Upgrade Nx/nrwl: 15.9.7 → 17.3.2 - Upgrade TypeScript: 4.9.5 → 5.2.2 - Upgrade zone.js: 0.12.0 → 0.14.8 - Upgrade @angular-devkit/build-angular: 15.2.9 → 17.3.9 - Upgrade @angular-eslint/*: 15.0.0 → 17.5.2 Material MDC Migration (zero MatLegacy* remaining): - Replace all MatLegacy* imports with MDC equivalents across all apps and libs - Migrate SCSS theme: legacy-core/all-legacy-component-themes → MDC core/all-component-themes - Use all-component-colors() for dark theme to avoid duplicate style emissions - Update MAT_LEGACY_*_DEFAULT_OPTIONS tokens to MDC equivalents in app.module.ts Nx/tooling fixes: - Remove @nrwl/cli (deprecated at v16+), update all build scripts to ./node_modules/.bin/nx - Switch nx.json runner from @nrwl/nx-cloud to nx/tasks-runners/default - Run Nx guard migration: remove deprecated CanActivate/Resolve interface implements clauses Zone.js fix: - Fix deep import zone.js/dist/webapis-shadydom.js → zone.js/bundles/webapis-shadydom.umd.js Docs: - Add docs/angular-v14-to-v17-migration-report.md with full compliance checklist
Deleted unused UI components: - angular-mentions (kept - used), removed: browser-recording, calendly-dialog, cmd-enter-preference, color-picker, color-functions, code-snippet-dialog, compose-wrapper, days-autocomplete-chip-list, drag-resizable, editor, file-upload, ivr-dialer, mat-autocomplete-wrapper, multi-select, no-network, no-permission, object-viewer, phone-number-material, phone-recording, qr-code, reject-reason, route-loader, sorting-bottom-sheet, template-preview, time-picker, tts-recording, variable-input Deleted unused pipes: - currency-formatter, custom-date-pipe, duration-pipe, filename-pipe, filter-control-pipe, get-hash-code-pipe, get-short-name-pipe, greeting-pipe, linkify-pipe, mobile-number-pipe, number-format-pipe, sanitize-html-pipe, seconds-to-hms, time-conversion-pipe, tooltip-list-pipe, user-setting-pipe, utc-to-local-date-pipe, country-currency-symbol, floor, flow, join, relative-time-pipe, repeater-condition, show-days-format, split, string-masking, timer Deleted unused directives: - auto-focus-directive, custom-tooltip-directive, highlight-directive, open-datepicker-on-focus-directive, timeago-directive Deleted unused services/other: - services/admin, services/shared, shared/, chart-ui/ Updated tsconfig.base.json: removed all 63 deleted path aliases (95 → 50 paths) Both proxy and proxy-auth apps verified building successfully after cleanup.
- Upgraded Angular core/material/cdk to v19.2.x - Upgraded NgRx to v19.2.1 (added @ngrx/operators for tapResponse) - Upgraded Nx to v19.8.14, replaced @nrwl/* with @nx/* across workspace - TypeScript upgraded to 5.5.4 - Material v18: updated all M2 SCSS APIs to mat.m2-* prefix - Angular v19: added standalone: false to 46 non-standalone components/directives/pipes - Fixed @angular-devkit/build-webpack version for v18/v19 - Updated zone.js to 0.14.10 - Both proxy and proxy-auth apps build successfully
…gs (Angular CLI v17+)
…ation, build-elements dynamic main.js
…ntained proxy-auth.js bundle
…oxy-root exists in DOM
…emove disableOptionCentering, remove custom-webpack
…2, NgRx 21.0.1, @angular/fire 21.0.0-rc.0, Nx 21.6.10, TS 5.9.3)
|
PR review rate limit exceeded |
…eb-Solution/proxy-ui into P0080-development
… is always generated
… is always generated
…1 best practices) - Replace all [ngClass] with [class.x] or [class] bindings across apps and libs - Replace all [ngStyle] with [style.x] bindings across apps and libs - Covers: proxy layout, feature, create-feature, log, register, user - Covers: proxy-auth login, user-management, user-profile, organization-details, send-otp, send-otp-center, register, subscription-center - Covers: libs date-range-picker, confirm-dialog, mat-paginator-goto, search - Complex multi-property ngStyle (buttonColor) replaced with individual [style.*]
…ed palette imports, use CSS custom properties - Replace mat.m2-define-*-theme with Material v3 theme system in _default-theme.scss - Create custom-palette.scss with $light-theme and $dark-theme using mat.define-theme() - Remove deprecated _theme-colors.scss (custom-blue, custom-teal, m2-define-palette) - Remove _typography.scss (m2-define-typography-config, m2-define-typography-level) - Replace mat.m2-get-color-from-palette() calls
…v21-migration Divyanshu | M3 Theming setup
- Add @tailwindcss/postcss plugin configuration in .postcssrc.json - Import tailwindcss in proxy and proxy-auth global styles - Add @tailwindcss/postcss and tailwindcss v4.2.1 dependencies - Update postcss to ^8.5.8 for compatibility
…ts across proxy-auth and proxy apps - Replace d-flex with flex, flex-column with flex-col, flex-row with flex-row - Replace justify-content-* with justify-*, align-items-* with items-* - Replace position-* with absolute/relative, w-100 with w-full, w-50 with w-1/2, w-75 with w-3/4 - Replace gap-3/gap-4 with gap-4/gap-6, mb-3/mb-4 with mb-6, my-3/my-4 with my-6, pl-4 with pl-6 - Add shadow-dom-theme.scss to inject Material theme
…h modular GoogleAuthProvider - Update firebase dependency from ^10.12.0 to ^12.10.0 - Replace firebase/compat/app and firebase/compat/auth imports with firebase/auth - Replace firebase.auth.GoogleAuthProvider with modular GoogleAuthProvider - Simplify loginViaGoogle() return type from firebase.auth.UserCredential to any - Remove unnecessary map operator, return signInWithPopup result directly
…v21-migration Divyanshu | Tailwind CSS implemented and fix firebase auth issue
…aterial, Shadow DOM, and Tailwind - Add emit-design-tokens() mixin to _custom-palette.scss exposing --proxy-* CSS vars for all palette tones - Include emit-design-tokens() in _default-theme.scss (html) and shadow-dom-theme.scss (:host) - Create tailwind.config.js with theme.extend.colors referencing var(--proxy-*) tokens - Define semantic aliases (--proxy-color-accent, --proxy-color-surface, etc.) in emit-design-tokens() - Add
…xy-auth login and register components - Replace all *ngIf with @if/@else blocks across login.component.html and register.component.html - Replace *ngFor with @for track syntax in register error message rendering - Migrate nested *ngIf conditions to @if blocks in mat-error elements - Convert *ngIf with async pipe to @if (observable | async; as variable) pattern - Replace ng-container/ng-template *ngIf toggles with @if/@else for
…and create standalone add-user dialog component - Remove proxyContainer fallback logic and body append in element module - Add polling mechanism to wait up to 5s for userProxyContainer before giving up - Create standalone AddUserDialogComponent that mounts directly to document.body - Update UserManagementBridgeService to open standalone dialog when component not mounted - Add ensureAddUserDialogStyles helper function in widget
…iner and update quote style in env-variables - Change element module to mount widget to element matching config.referenceId - Remove userProxyContainer fallback logic from polling mechanism - Update warning message when target container not found - Uncomment referenceId div in app component template - Comment out host div height styling in app component - Update referenceId value in app component - Increase content div width from
…n-based configuration - Revert app component template to use userProxyContainer instead of referenceId - Restore authToken-based widget configuration in app component - Remove referenceId-based mounting logic from element module - Remove polling mechanism for container resolution - Remove unused imports (PublicScriptType, interval, distinctUntilChanged, map) - Update quote style in env-variables from single to double quotes - Update compiled
- Create WidgetThemeService with isDark signal, resolvedTheme, system dark mode tracking via MediaQueryList, setInputTheme() and setThemeOverride() - Replace all per-component isDark computed + _systemDark signals with service injection across: widget, send-otp-center, register, login, user-management, user-profile, organization-details, toast - Register WidgetThemeService in element.module.ts providers - Fix viewMode() computed: Authorization no longer requires authToken, fixing 'Create an account' link opening user-profile instead of register
…v21-migration Divyanshu | All widget design improvement and fix unit testing issue
…eb-Solution/proxy-ui into improvment-saurabh-21
design and dark theme
…g WidgetThemeService - Replace direct WidgetTheme.Dark comparisons with isDarkTheme getter in app component template - Add WidgetThemeService injection and isDarkTheme computed property in app component - Extract configuration constants (REFERENCE_ID, THEME, TYPE, AUTH_TOKEN) to top-level - Update component properties to readonly and add explicit types - Add theme configuration to widget initialization - Comment out unused hCaptcha styles
fix design and console error and dark theme
…ith backdrop - Create WidgetPortalService to teleport dialog content to document.body - Add w-dialog-backdrop, w-dialog-panel, w-dialog-body styles with dark theme support - Add overflow:hidden to w-dialog-panel to prevent content overflow - Update widget component template to render register/login in overlay portal instead of inline - Add dialogPortal ViewChild and dialogPortalRef to manage portal lifecycle - Add closeOverlayDialog
…eb-Solution/proxy-ui into divyanshu-angular-v21-migration
…v21-migration Divyanshu angular v21 migration
…Walkover-Web-Solution/proxy-ui into divyanshu-angular-v21-migration
…Windsurf rules, improve build script - Upgrade GitHub Actions Node.js from 16 to 20 - Add CI step to fail if proxy-auth.js exceeds 3 MB - Remove .windsurf/rules/36-blocks.md and widget-design.md documentation files - Replace concat dependency with native fs concatenation in build-elements.js - Add priority-based dynamic JS file discovery for future-proof Angular output handling - Add error handling for missing dist directory and
…d portal styles - Add shared assets path to stylePreprocessorOptions includePaths - Copy intl-tel-input-custom.css to assets/utils in build output - Add development configuration with index.html and main.dev.ts file replacement - Remove browser option from dev-server, use fileReplacements instead - Add autocomplete="off" to tel input in register component - Add dark mode styles for intl-tel-input dropdown using :host-context(.
…ption code, update dev config - Switch app component template from referenceId to userProxyContainer div - Change dev config TYPE from Authorization to OrganizationDetails - Update dev config to use authToken instead of referenceId - Remove unused formatPlans, extractPriceValue, extractCurrency, and getIncludedFeatures methods from SubscriptionRendererService - Remove unused widgetData signal and authReference property from widget
…nd reformat template - Change app component template to use dynamic container ID (referenceId or fallback to userProxyContainer) - Add showAuth flag to toggle between referenceId and authToken authentication in dev config - Update dev config TYPE from OrganizationDetails to UserManagement - Update AUTH_TOKEN value for development - Conditionally add referenceId, authToken, type, and theme to widgetConfig based on configuration
… container resolution with MutationObserver - Add isUserProxyContainer computed property and showAuthentication flag to toggle between preview-button and inline modes - Replace ternary container ID logic with containerId getter using PROXY_DOM_ID constant - Add openPreviewDialog, closePreviewDialog, goBackFromRegistration methods and dialogOpen, showRegistrationInDialog signals - Update send-otp-center template to show preview button when is
…ader when rendered in dialog, reformat template whitespace - Add isInDialog input signal to RegisterComponent - Conditionally hide register header (title + close button) when isInDialog is true - Reformat register.component.html and send-otp-center.component.html templates with consistent whitespace and line breaks
… inline header in dialog mode, update dev config - Add showForgotPassword signal and openForgotPasswordDialog method to widget component - Render forgot password in overlay portal with custom w-dialog-header (title + close button) - Add hideInlineHeader input to send-otp-center component to conditionally hide close button and h2 title - Add fp-dialog-content CSS rules to hide send-otp-center's own close button and h2 when rendered
… zone.js polyfill, optimize build config - Modify build-elements.js to inline styles.css content into proxy-auth.js as self-executing function - Escape CSS for JS template literal (backslashes, backticks, dollar signs) - Store inlined CSS in window.__proxyAuth.inlinedStyles for widget-portal service access - Inject styles into document.head with 'proxy-auth-widget-styles' ID to prevent duplicates - Copy bundled proxy-auth.js to dist
…Walkover-Web-Solution/proxy-ui into divyanshu-angular-v21-migration
…te dev config and styles - Add effect in app component to apply theme classes (light-theme, dark-theme, system-theme) to document.body based on resolved theme - Remove inline background style from app component template container - Restore zone.js import in main.dev.ts - Change dev config TYPE from UserProfile to Authorization - Add color-scheme: light dark to :root CSS - Update --color-common-dark from #000000 to #030712 - Add
- Add hCaptchaSiteKey with official test key (10000000-ffff-ffff-ffff-000000000001) to environment - Add comment explaining test sitekey is whitelisted for localhost and suppresses warnings
…v21-migration Divyanshu angular v21 migration
…eb-Solution/proxy-ui into P0080-development
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.