Open Closed

When running angular pro preview with trial license I see a type error in the console suggesting that the language management feature did not load #3708


0
trevor.wilson created

I am writing an angular front end to an existing ABP service using the enterprise commercial library. I have a trial license. When I try to run my angular app I see an error in the console that suggests the language-management feature is not installed or running, but I am not sure what I did wrong.

The steps I followed to create the angular front end.

Upgraded abp cli to latest pre-release

$ dotnet tool update -g Volo.Abp.Cli --version 6.0.0-rc.4

Configure my .net api Nuget to point to my trial nuget source and ran abp update

cd myapi
abp update -p --check-all

Generate new angular pro project with leptonx theme

$ abp new myproject -t app-pro --theme leptonx -csf -u angular

I modified the environment to point to myapi and then switch to preview

cd myproject
abp switch-to-preview
npm install
ng build
npm start

When the home page loads I see the following error in the console

core.mjs:6494 ERROR TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at MapSubscriber.mapFn [as project] (volo-abp.ng.language-management-common.mjs:11:1)
    at MapSubscriber._next (map.js:29:1)
    at MapSubscriber.next (Subscriber.js:49:1)
    at FilterSubscriber._next (filter.js:33:1)
    at FilterSubscriber.next (Subscriber.js:49:1)
    at DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:50:1)
    at DistinctUntilChangedSubscriber.next (Subscriber.js:49:1)
    at MapSubscriber._next (map.js:35:1)
    at MapSubscriber.next (Subscriber.js:49:1)
    at BehaviorSubject.next (Subject.js:39:1)


9 Answer(s)
  • 0
    alper created
    Support Team

    If you're using the Leptonx Theme, please remove the ThemeLeptonConfigModule.forRoot() import from your imports array. If you using the Lepton Theme, please configure your backend. if this doesn't help, let us know @muhammedaltug will help you to proceed with this problem.

  • 0
    trevor.wilson created

    Hi Albert,

    I am using LeptonX theme, but I do not have ThemeLeptonConfigModule.forRoot() in my imports. Here is my app.module.ts:

    import { CoreModule } from '@abp/ng.core';
    import { GdprConfigModule } from '@volo/abp.ng.gdpr/config';
    import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';
    import { ThemeSharedModule } from '@abp/ng.theme.shared';
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { CommercialUiConfigModule } from '@volo/abp.commercial.ng.ui/config';
    import { AccountAdminConfigModule } from '@volo/abp.ng.account/admin/config';
    import { AccountPublicConfigModule } from '@volo/abp.ng.account/public/config';
    import { AuditLoggingConfigModule } from '@volo/abp.ng.audit-logging/config';
    import { IdentityServerConfigModule } from '@volo/abp.ng.identity-server/config';
    import { IdentityConfigModule } from '@volo/abp.ng.identity/config';
    import { LanguageManagementConfigModule } from '@volo/abp.ng.language-management/config';
    import { registerLocale } from '@volo/abp.ng.language-management/locale';
    import { SaasConfigModule } from '@volo/abp.ng.saas/config';
    import { TextTemplateManagementConfigModule } from '@volo/abp.ng.text-template-management/config';
    import { HttpErrorComponent, ThemeLeptonModule } from '@volo/abp.ng.theme.lepton';
    import { environment } from '../environments/environment';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { APP_ROUTE_PROVIDER } from './route.provider';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        CoreModule.forRoot({
          environment,
          registerLocaleFn: registerLocale(),
        }),
        ThemeSharedModule.forRoot({
          httpErrorConfig: {
            errorScreen: {
              component: HttpErrorComponent,
              forWhichErrors: [401, 403, 404, 500],
              hideCloseIcon: true,
            },
          },
        }),
        AccountAdminConfigModule.forRoot(),
        AccountPublicConfigModule.forRoot(),
        IdentityConfigModule.forRoot(),
        LanguageManagementConfigModule.forRoot(),
        SaasConfigModule.forRoot(),
        AuditLoggingConfigModule.forRoot(),
        IdentityServerConfigModule.forRoot(),
        TextTemplateManagementConfigModule.forRoot(),
        SettingManagementConfigModule.forRoot(),
        ThemeLeptonModule.forRoot(),
        CommercialUiConfigModule.forRoot(),
        GdprConfigModule.forRoot(),
      ],
      providers: [APP_ROUTE_PROVIDER],
      bootstrap: [AppComponent],
    })
    export class AppModule {}
    
    

    Do you see anything wrong there? Any other suggestions?

    Cheers!

    Trevor

  • 0
    trevor.wilson created

    I installed @volosoft/abp.ng.theme.lepton-x via

    npm install @volosoft/[email protected]

    I removed ThemeLeptonModule from app.module.ts and shared.module.ts. I added "node_modules/bootstrap-icons/font/bootstrap-icons.css" to styles array in angular.json.

    I was not quite sure where to put the lpx theme overrides:

    :root {
      .lpx-theme-dark {
        --lpx-logo: url('/assets/images/logo/logo-light.svg');
        --lpx-logo-icon: url('/assets/images/logo/logo-light-icon.svg');
        --lpx-brand: #edae53;
      }
    
      .lpx-theme-dim {
        --lpx-logo: url('/assets/images/logo/logo-light.svg');
        --lpx-logo-icon: url('/assets/images/logo/logo-light-icon.svg');
        --lpx-brand: #f15835;
      }
    
      .lpx-theme-light {
        --lpx-logo: url('/assets/images/logo/logo-dark.svg');
        --lpx-logo-icon: url('/assets/images/logo/logo-dark-icon.svg');
        --lpx-brand: #69aada;
      }
    }
    

    However, I am still seeing the same error as before.

  • 0
    trevor.wilson created

    I added the overrides to the root level styles.css. The only error I see in the console is:

        at MapSubscriber.mapFn [as project] (volo-abp.ng.language-management-common.mjs:11:1)
        at MapSubscriber._next (map.js:29:1)
        at MapSubscriber.next (Subscriber.js:49:1)
        at FilterSubscriber._next (filter.js:33:1)
        at FilterSubscriber.next (Subscriber.js:49:1)
        at DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:50:1)
        at DistinctUntilChangedSubscriber.next (Subscriber.js:49:1)
        at MapSubscriber._next (map.js:35:1)
        at MapSubscriber.next (Subscriber.js:49:1)
        at BehaviorSubject.next (Subject.js:39:1)
    

    The theme appears to be working fine, but I am still unable to get localization to work. I believe this issue is related to the error above since the stack trace references the language-management-common.mjs.

  • 0
    muhammedaltug created
    Support Team

    Hello,

    Can you send the application-configuration endpoint response?

  • 0
    trevor.wilson created

    Here is the response from the application-configuration endpoint:

  • 0
    muhammedaltug created
    Support Team

    Hello,

    According to the response of the application-configuration endpoint, your backend seems to be created with open source app template. Please check if the 2 projects are created with the app-pro template.

  • 0
    trevor.wilson created

    Thank you muhammedaltug. .The angular project is created with the app-pro template, but the dotnet project was not. I have upgraded the dotnet project to the preview version of angular. I am wondering if there a way for me to switch an existing dotnet solution to use the app-pro template?

  • 0
    maliming created
    Support Team

    hi trevor.wilson

    . I am wondering if there a way for me to switch an existing dotnet solution to use the app-pro template?

    You can only manually create a new app-pro project, and then refer to the new project to replace the open source package with the pro package. Just compare projects.