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


User avatar
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)
  • User Avatar
    0
    alper created
    Support Team Director

    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.

  • User Avatar
    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

  • User Avatar
    0
    trevor.wilson created

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

    npm install @volosoft/abp.ng.theme.lepton-x@preview

    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.

  • User Avatar
    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.

  • User Avatar
    0
    muhammedaltug created

    Hello,

    Can you send the application-configuration endpoint response?

  • User Avatar
    0
    trevor.wilson created

    Here is the response from the application-configuration endpoint:

  • User Avatar
    0
    muhammedaltug created

    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.

  • User Avatar
    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?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    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.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11