Open Closed

Setup Lepton Theme for Angular #718


User avatar
0
Mohammad created

Hello,

I am facing issues with the setup of Lepton theme for Angular. Below is the screenshot.

Modules installed

  1. Identity
  2. Identity Server
  3. Settings Management

The menus for the above modules are not appearing as well as the styling is not proper.

Thank you

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

  • ABP Framework version: vX.X.X
  • UI type: Angular / MVC
  • DB provider: EF Core / MongoDB
  • Tiered (MVC) or Identity Server Seperated (Angular): yes / no
  • Exception message and stack trace:
  • Steps to reproduce the issue:

16 Answer(s)
  • User Avatar
    0
    Mehmet created

    What is your version?

    Can you check the console of dev-tools? Do you see any errors?

  • User Avatar
    0
    Mohammad created

    Theme Version: 4.0.1

    There are no errors in the console.

  • User Avatar
    0
    Mehmet created

    Could you upgrade your version to v4.1-rc.2 or v4.0.2 and try again?

    Can you share the angular.json content with us?

    One more thing, please generate a new app via ABP CLI, then test the Angular UI. Please let me know if you encounter the problem with new app.

  • User Avatar
    0
    Mohammad created

    On the backend I am using Abp Veriosn: 3.3.1 for the modules. Can this create a problem for the frontend angular package version?

    Since the latest Abp version requires .Net 5, we need to stick to version .netcore version 3.1

    Is there any Angular documentation for the Setup of the Lepton Theme?

  • User Avatar
    0
    Mehmet created

    The versions of the Angular packages should be the same as the backend. Because there are breaking changes in the v4.0 backend. So Angular v4.x packages work exactly with the v4.x backend. You should install the v3.3.1 packages.

    There is no any documentation, no need to setup the Lepton theme manually. Because the Lepton theme already configured in the app-pro template.

    I suggest you download a new template and compare it with your application. Especially look at the styles array of angular.json and app.module.ts.

  • User Avatar
    0
    Mohammad created

    Thank you @mehmet. I did the same and its working perfectly fine now.

  • User Avatar
    0
    Mohammad created

    Hello

    I am getting an error for the Account module route.

    Property 'AccountModule' does not exist on type 'typeof import("node_modules/@volo/abp.ng.account/volo-abp.ng.account")'

  • User Avatar
    0
    Mohammad created

    abp generate-proxy return

    [API Not Available] Request to https://localhost:44372/api/abp/api-definition is unsuccessful. Please double-check the URL in the source project environment and make sure your application is up and running.

    The host server application is running. I am able to access the url: https://localhost:44372/api/abp/api-definition from the browser

  • User Avatar
    0
    Mehmet created

    Hello Mohammad

    As of v4.0, the AccountRoutingModule has been removed. So you have to remove the 'account' path from your app-routing.module.ts if you are using the v4.x packages. (remove below element)

    {
    path: 'account',
    loadChildren: () => import(...
    }
    

    For your second question

    You should run the HttpApi.Host project in the terminal via dotnet run command. VS blocks the external requests.

  • User Avatar
    0
    Mohammad created

    @Mehmet

    I want to develop my own custom angular theme. Is there any documentation that I can follow to configure all the abp related Login/logout/Permission components for the custom angular theme?

  • User Avatar
    0
    Mohammad created

    For your second question

    You should run the HttpApi.Host project in the terminal via dotnet run command. VS blocks the external requests.

    -- I have the httpapi.host project running. the angular app is able to call the api.

    I am getting this error when i try to generate the proxies

    $ abp generate-proxy [11:24:09 INF] ABP CLI (https://abp.io) [11:24:09 INF] Version 4.0.2 (Stable) [11:24:13 WRN] Couldn't determinate version of "@abp/ng.schematics" package. [API Not Available] Request to https://localhost:44372/api/abp/api-definition is unsuccessful. Please double-check the URL in the source project environment and make sure your application is up and running.

  • User Avatar
    0
    alper created
    Support Team Director

    I'm closing this question as the main question has been resolved. You can create a new question for your new question

  • User Avatar
    0
    Mohammad created

    Hello Alper

    my question related to generating proxy is related to Angular haven't been resolved. I am trying to group related topics so we could resolve our issues.

    $ abp generate-proxy [11:24:09 INF] ABP CLI (https://abp.io) [11:24:09 INF] Version 4.0.2 (Stable) [11:24:13 WRN] Couldn't determinate version of "@abp/ng.schematics" package. [API Not Available] Request to https://localhost:44372/api/abp/api-definition is unsuccessful. Please double-check the URL in the source project environment and make sure your application is up and running.

  • User Avatar
    0
    alper created
    Support Team Director

    so you say https://localhost:44372/api/abp/api-definition is up and running but Angular proxy generator cannot connect to this service. can you do these steps. because I couldn't reproduce it.

  • User Avatar
    0
    Mohammad created

    Hello Alper.

    Appreciate your help. It worked by running the project through command line.

  • User Avatar
    0
    alper created
    Support Team Director

    do you know the reason why it doesn't work when you run in Visual Studio? IIS Express does not allow remote connections by default.

    There are some ways of achieving this:

    • https://stackoverflow.com/a/54511592/1767482
    • https://weblog.west-wind.com/posts/2016/sep/28/external-network-access-to-kestrel-and-iis-express-in-aspnet-core

    I use dotnet run command line, it works..

Made with ❤️ on ABP v9.1.0-preview. Updated on November 01, 2024, 05:35