Setup Lepton Theme for Angular #718 | Support

Mohammad created 4 years ago

Hello,

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

Modules installed

Identity
Identity Server
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)

0

Mehmet created 4 years ago

What is your version?

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

Mohammad created 4 years ago

Theme Version: 4.0.1

There are no errors in the console.
0

Mehmet created 4 years ago

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.
0

Mohammad created 4 years ago

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?
0

Mehmet created 4 years ago

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.
0

Mohammad created 4 years ago

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

Mohammad created 4 years ago

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")'
0

Mohammad created 4 years ago

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
0
Mehmet created 4 years ago
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.
0

Mohammad created 4 years ago

@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?
0

Mohammad created 4 years ago

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.
0

alper created 4 years ago
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
0

Mohammad created 4 years ago

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.
0

alper created 4 years ago
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.
0

Mohammad created 4 years ago

Hello Alper.

Appreciate your help. It worked by running the project through command line.
0
alper created 4 years ago
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..

Have an answer to this question? Log in and write your answer.