Base solution for your next web application
Open Closed

Critical Problems With Version 14.2.1 #12505

User avatar
0
maberry created

Angular solution (merged) Version 14.2.1

I recently reupped my subscription and decided to upgrade my application to the newest version. I am moving from 12.3, so maybe there is something I don't know or understand, but it would appear as though the newest version is riddled with bugs.

  1. Code generator does not generate all code for "file" filed types. This is missing:
    public string[] GetFileAllowedTypes()
    {
        return AllowedFileTypes;
    }
  1. I could not get my application to work after adding a customized metronic theme, While investigating this I realized the app.component.html file uses razor syntax instead of Angular template syntax.
<div [ngClass]="{ 'subscription-bar-visible': subscriptionStatusBarVisible() }" class="d-flex flex-column flex-root">
  @if (theme == 'default') {
  <default-layout></default-layout>
  }
  @if (theme == 'theme2') {
  <theme2-layout></theme2-layout>
  }
  @if (theme == 'theme3') {
  <theme3-layout></theme3-layout>
  }
  @if (theme == 'theme4') {
  <theme4-layout></theme4-layout>
  }
  @if (theme == 'theme5') {
  <theme5-layout></theme5-layout>
  }
  @if (theme == 'theme6') {
  <theme6-layout></theme6-layout>
  }
  @if (theme == 'theme7') {
  <theme7-layout></theme7-layout>
  }
  @if (theme == 'theme8') {
  <theme8-layout class="d-flex flex-column flex-row-fluid"></theme8-layout>
  }
  @if (theme == 'theme9') {
  <theme9-layout></theme9-layout>
  }
  @if (theme == 'theme10') {
  <theme10-layout class="d-flex flex-column flex-row-fluid"></theme10-layout>
  }
  @if (theme == 'theme11') {
  <theme11-layout></theme11-layout>
  }
  @if (theme == 'theme12') {
  <theme12-layout class="d-flex flex-column flex-row-fluid"></theme12-layout>
  }
  @if (theme == 'theme13') {
  <theme13-layout class="d-flex flex-column flex-row-fluid"></theme13-layout>
  }

  @if (theme == 'themeX') {
  <themeX-layout></themeX-layout>
  }
  @if (theme == 'themeX2') {
  <themeX2-layout></themeX2-layout>
  }


</div>

<kt-scroll-top />

@if (!installationMode) {
  <linkedAccountsModal #linkedAccountsModal (modalClose)="getRecentlyLinkedUsers()" />
}
<userDelegationsModal #userDelegationsModal />
<changePasswordModal #changePasswordModal />
<changeProfilePictureModal #changeProfilePictureModal />
<mySettingsModal #mySettingsModal (modalSave)="onMySettingsModalSaved()" />
<notificationSettingsModal #notificationSettingsModal />

<addFriendModal #addFriendModal />
@if (!installationMode) {
  <chat-bar #chatBarComponent [addFriendModal]="addFriendModal" />
}
@if (!installationMode && isQuickThemeSelectEnabled) {
  <theme-selection-panel #themeSelectionPanelComponent />
}
@if (IsSessionTimeOutEnabled) {
  <session-timeout #sessionTimeout />
}

I then realized that required Angular imports are not in the component. I then wrote a simply jupyter notebook script to investigate the use of Razor syntax in my solution. The script found 638 occurrances of Razor syntax in128 files.

src\app\admin\audit-logs\audit-log-detail-modal.component.html
src\app\admin\audit-logs\audit-logs.component.html
src\app\admin\demo-ui-components\demo-ui-components.component.html
src\app\admin\demo-ui-components\demo-ui-file-upload.component.html
src\app\admin\dynamic-properties\create-or-edit-dynamic-property-modal.component.html
src\app\admin\dynamic-properties\dynamic-entity-properties\create-dynamic-entity-property-modal.component.html
src\app\admin\dynamic-properties\dynamic-entity-properties\dynamic-entity-property-list.component.html
src\app\admin\dynamic-properties\dynamic-entity-properties\manage-dynamic-entity-property-modal.component.html
src\app\admin\dynamic-properties\dynamic-entity-properties\value\manage-values-modal.component.html
src\app\admin\dynamic-properties\dynamic-entity-properties\value\manager.component.html
src\app\admin\dynamic-properties\dynamic-property-value\dynamic-property-value-modal.component.html
src\app\admin\dynamic-properties\dynamic-property.component.html
src\app\admin\dynamic-properties\select-an-entity-modal.component.html
src\app\admin\editions\create-edition-modal.component.html
src\app\admin\editions\edit-edition-modal.component.html
src\app\admin\editions\editions.component.html
src\app\admin\editions\move-tenants-to-another-edition-modal.component.html
src\app\admin\entity-changes\entity-changes.component.html
src\app\admin\languages\create-or-edit-language-modal.component.html
src\app\admin\languages\edit-text-modal.component.html
src\app\admin\languages\language-texts.component.html
src\app\admin\languages\languages.component.html
src\app\admin\login-attempts\login-attempts.component.html
src\app\admin\maintenance\maintenance.component.html
src\app\admin\mass-notifications\create-mass-notification-modal.component.html
src\app\admin\mass-notifications\mass-notifications.component.html
src\app\admin\mass-notifications\user-lookup-table-modal.component.html
src\app\admin\organization-units\add-member-modal.component.html
src\app\admin\organization-units\add-role-modal.component.html
src\app\admin\organization-units\create-or-edit-unit-modal.component.html
src\app\admin\organization-units\organization-tree.component.html
src\app\admin\organization-units\organization-unit-members.component.html
src\app\admin\organization-units\organization-unit-roles.component.html
src\app\admin\organization-units\organization-units.component.html
src\app\admin\roles\create-or-edit-role-modal.component.html
src\app\admin\roles\roles.component.html
src\app\admin\settings\host-settings.component.html
src\app\admin\settings\tenant-settings.component.html
src\app\admin\shared\feature-tree.component.html
src\app\admin\shared\permission-tree-modal.component.html
src\app\admin\subscription-management\subscription-management.component.html
src\app\admin\tenants\create-tenant-modal.component.html
src\app\admin\tenants\edit-tenant-modal.component.html
src\app\admin\tenants\tenant-features-modal.component.html
src\app\admin\tenants\tenants.component.html
src\app\admin\ui-customization\default-theme-ui-settings.component.html
src\app\admin\ui-customization\theme10-theme-ui-settings.component.html
src\app\admin\ui-customization\theme11-theme-ui-settings.component.html
src\app\admin\ui-customization\theme12-theme-ui-settings.component.html
src\app\admin\ui-customization\theme13-theme-ui-settings.component.html
src\app\admin\ui-customization\theme2-theme-ui-settings.component.html
src\app\admin\ui-customization\theme3-theme-ui-settings.component.html
src\app\admin\ui-customization\theme4-theme-ui-settings.component.html
src\app\admin\ui-customization\theme5-theme-ui-settings.component.html
src\app\admin\ui-customization\theme6-theme-ui-settings.component.html
src\app\admin\ui-customization\theme7-theme-ui-settings.component.html
src\app\admin\ui-customization\theme8-theme-ui-settings.component.html
src\app\admin\ui-customization\theme9-theme-ui-settings.component.html
src\app\admin\ui-customization\ui-customization.component.html
src\app\admin\users\create-or-edit-user-modal.component.html
src\app\admin\users\edit-user-permissions-modal.component.html
src\app\admin\users\users.component.html
src\app\admin\webhook-subscription\create-or-edit-webhook-subscription-modal.component.html
src\app\admin\webhook-subscription\webhook-event-detail.component.html
src\app\admin\webhook-subscription\webhook-subscription-detail.component.html
src\app\admin\webhook-subscription\webhook-subscription.component.html
src\app\app.component.html
src\app\shared\common\customizable-dashboard\add-widget-modal\add-widget-modal.component.html
src\app\shared\common\customizable-dashboard\customizable-dashboard.component.html
src\app\shared\common\customizable-dashboard\widgets\widget-edition-statistics\widget-edition-statistics.component.html
src\app\shared\common\customizable-dashboard\widgets\widget-host-top-stats\widget-host-top-stats.component.html
src\app\shared\common\customizable-dashboard\widgets\widget-income-statistics\widget-income-statistics.component.html
src\app\shared\common\customizable-dashboard\widgets\widget-profit-share\widget-profit-share.component.html
src\app\shared\common\customizable-dashboard\widgets\widget-recent-tenants\widget-recent-tenants.component.html
src\app\shared\common\customizable-dashboard\widgets\widget-sales-summary\widget-sales-summary.component.html
src\app\shared\common\customizable-dashboard\widgets\widget-subscription-expiring-tenants\widget-subscription-expiring-tenants.component.html
src\app\shared\common\entityHistory\entity-change-detail-modal.component.html
src\app\shared\common\entityHistory\entity-type-history-modal.component.html
src\app\shared\common\excel-column-selection\excel-column-selection-modal.html
src\app\shared\common\key-value-list-manager\key-value-list-manager.component.html
src\app\shared\common\lookup\common-lookup-modal.component.html
src\app\shared\common\password-input-with-show-button\password-input-with-show-button.component.html
src\app\shared\common\sub-header\sub-header.component.html
src\app\shared\layout\chat\add-friend-modal.component.html
src\app\shared\layout\chat\add-from-different-tenant-modal.component.html
src\app\shared\layout\chat\chat-bar.component.html
src\app\shared\layout\chat\chat-friend-list-item.component.html
src\app\shared\layout\chat\chat-message.component.html
src\app\shared\layout\chat\friends-lookup-table.component.html
src\app\shared\layout\create-new-user-delegation-modal.component.html
src\app\shared\layout\footer.component.html
src\app\shared\layout\link-account-modal.component.html
src\app\shared\layout\linked-accounts-modal.component.html
src\app\shared\layout\nav\menu-search-bar\menu-search-bar.component.html
src\app\shared\layout\nav\side-bar-menu.component.html
src\app\shared\layout\nav\top-bar-menu.component.html
src\app\shared\layout\notifications\header-notifications.component.html
src\app\shared\layout\notifications\notification-settings-modal.component.html
src\app\shared\layout\notifications\notifications.component.html
src\app\shared\layout\profile\change-password-modal.component.html
src\app\shared\layout\profile\change-profile-picture-modal.component.html
src\app\shared\layout\profile\my-settings-modal.component.html
src\app\shared\layout\profile\sms-verification-modal.component.html
src\app\shared\layout\profile\verify-code-modal.component.html
src\app\shared\layout\themes\default\default-layout.component.html
src\app\shared\layout\themes\default\default-logo.component.html
src\app\shared\layout\themes\theme10\theme10-brand.component.html
src\app\shared\layout\themes\theme11\theme11-brand.component.html
src\app\shared\layout\themes\theme12\theme12-brand.component.html
src\app\shared\layout\themes\theme12\theme12-layout.component.html
src\app\shared\layout\themes\theme13\theme13-brand.component.html
src\app\shared\layout\themes\theme13\theme13-layout.component.html
src\app\shared\layout\themes\theme2\theme2-brand.component.html
src\app\shared\layout\themes\theme3\theme3-brand.component.html
src\app\shared\layout\themes\theme4\theme4-brand.component.html
src\app\shared\layout\themes\theme5\theme5-brand.component.html
src\app\shared\layout\themes\theme6\theme6-brand.component.html
src\app\shared\layout\themes\theme7\theme7-brand.component.html
src\app\shared\layout\themes\theme8\theme8-brand.component.html
src\app\shared\layout\themes\theme9\theme9-brand.component.html
src\app\shared\layout\toggle-dark-mode\toggle-dark-mode.component.html
src\app\shared\layout\topbar\active-delegated-users-combo.component.ts
src\app\shared\layout\topbar\chat-toggle-button.component.html
src\app\shared\layout\topbar\language-switch-dropdown.component.html
src\app\shared\layout\topbar\quick-theme-selection.component.html
src\app\shared\layout\topbar\subscription-notification-bar.component.html
src\app\shared\layout\topbar\user-menu.component.html
src\app\shared\layout\user-delegations-modal.component.html

Not a fun way to spend the weekend, especially after just paying to extend my subscription. Hopefully you can provide some insight.

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)
Go to accepted answer
1 Answer(s)
  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi @maberry

    I understand the challenges you're facing after upgrading. With the latest ASP.NET Zero version and the Angular 17+ upgrade, there have been some major changes. Let me clarify a few points that might help: <br/> Razor Like Syntax is Actually Angular 17+ Control Flow

    What looks like Razor syntax for example:

    @if (theme === 'default') {
  <div>Default Theme</div>
}

    is not Razor, but Angular’s new Control Flow Syntax introduced in Angular 17. ASP.NET Zero has adopted this syntax in recent versions to stay up-to-date with modern Angular practices. It replaces older constructs like *ngIf and *ngFor with a more structured block-style syntax. <br/> Missing GetFileAllowedTypes() Method Now Fixed

    You're absolutely right in earlier versions of the code generator, the GetFileAllowedTypes() method for file fields wasn't generated. This issue has been resolved in the following pull request: 🔗 [PR #215 on aspnet-zero-rad](https://github.com/aspnetzero/aspnet-zero-rad/pull/215)

    This issue has been fixed and the GetFileAllowedTypes() method will be generated correctly in the next release of the RAD tool. <br/> Angular Standalone Components Adopted

    Starting from ASP.NET Zero v14.1, the Angular solution now uses the new standalone component structure introduced in Angular. This marks a shift away from NgModules and embraces the modern, simplified architecture supported by Angular CLI.

    You can read more about this migration approach here: 🔗 Angular Standalone Migration Guide

    This architectural change may impact how routes, imports, and component declarations are managed, so it's worth familiarizing yourself with the new structure if you're migrating from older versions. <br/> Upgrading from 12.x to 14+ (especially with Angular 17+) does introduce some learning curve due to major framework improvements. But once adapted, you'll benefit from cleaner, faster, and more maintainable code. Feel free to reach out if you’d like help reviewing or debugging any specific issues.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
Assignee
No one
Labels
None yet