mirror of
https://github.com/ElectronNET/Electron.NET.git
synced 2026-02-03 21:25:13 +00:00
unable to get it working with Angular #91
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @jcphlux on GitHub (Dec 7, 2017).
Originally assigned to: @GregorBiswanger on GitHub.
I have followed all the demos and am able to get a working app with ugly flashing screen on link clicks. but am unable to get Angular to work. In the demo video it is said you should use Angular or React but it is never explained how one would get ether one of them too work. I love the Idea of Electron.Net but with out support for a NON flashing interface this is just a toy.
@BrianAllred commented on GitHub (Dec 8, 2017):
I agree Angular/React support would be great, but what flashing are you referring to? I've built an entire application with this framework using standard CSHTML/Razor views, and I haven't noticed any flashing.
@jcphlux commented on GitHub (Dec 9, 2017):
anytime I try to load a new view the app flashes
@yoDon commented on GitHub (Dec 9, 2017):
Can you give a bit more detail on what you mean by flashing, and/or an example? Iike @BrianAllred I've built a complex app using Electron.NET (in my case React-based) an am not sure what you're referring to. Electron.NET is a thin enough manipulation of Electron (and remote enough from the core Electron code) that my first guess would be your flashing issue is related somehow to how you're interacting with Electron itself.
@jcphlux commented on GitHub (Dec 10, 2017):
I am new to ElectronNet so if there is something I am missing please let me know but I have read and watched everything I could find on it.
With traditional razor views the app will flash because it is doing a full page load. This can be minimized some by doing partials but that section of the app will still flash on load so the idea of using react or angular would not have this issue as the app is just doing api calls and refreshing the data not the view. There is not much info out there on how ElectronNet is doing what it is doing so I dug in on that and the issue I was having with Angular not working was because of webpack. After tweaking the way I ran webpack on the new project in VS 2017 I was able to get Angular loading but because the way ElectronNet does a deploy in the obj folder I could be wrong but it looks like there is no way doing hot module loading like you can do with a traditional electron app.
The closest I could get to hot module loading was to run the ElectronNet then start the webapp and then after making changes I would copy the files generated in "wwwroot\dist" from hot module into the folder "obj\Host\bin\wwwroot\dist" folder and do a app reload from the default menu.
@jcphlux commented on GitHub (Dec 10, 2017):
So I almost have a hacked together ElectronAngular app with hot module loading working... the only issue is that it is very hacky. When building the app is there a way to get Hosting environment: Development so my hacky code is not running when I publish the app?
all I can get is:
ASP.NET Core Application connected...
stdout: Hosting environment: Production
@GregorBiswanger commented on GitHub (Dec 10, 2017):
@jcphlux Thank you for trying Electron.NET and your patience.
I created a new ASP.NET Core 2 project with the angular template and that works.
The navigation between the pages works without a flash effect. The navigation over the old controlers has a flash effect. That comes from the asp.net server side rendering. Please use the Angular standard way with the navigation framework. That renders only in the Browser proccess.
For Electron applications use a single-page application (SPA) architecture. Angular and React are perfect SPA framework, that helps you. Electron.NET is perfect for Business-Logic in C# on the backend. For the communication between the Browser proccess and the backend use the IPC communication from the Electron.API. See the Electron.NET API Samples App for a "How to" (With native JS without Framework on classic MVC): https://github.com/ElectronNET/electron.net-api-demos
Was this helpfull? Do you have more questions?
@jcphlux commented on GitHub (Dec 10, 2017):
@GregorBiswanger yeah that is about what I came too with what I have been testing. The issues I ran into at first where because my webpack had not bee initialized. And this might be a separate issue but my environment is always Production in the app. Is there a way to set environment to Development?
@GregorBiswanger commented on GitHub (Dec 10, 2017):
@jcphlux Normal I used the angular cli and created a new own asp.net web api project.. I think you can change the environment in the project settings under the Debug section.. I don´t know, what the best way is to change the environment on the default asp.net angular template project...
Can I close the issue or do you have more questions?
@jcphlux commented on GitHub (Dec 10, 2017):
@GregorBiswanger I have that set and at first I could not figure out why it was not reading that setting. After doing some research it looks like the Environment variables you are looking at there are tied to the profiles in launchSettings.json and those only get set if you run the project from VS. If you are running 'dotnet electronize start' from command the launchSettings are not used.
so when I run
dotnet electronize startat the end before the app loads it shows this.To solve this you can set the environment in one of two ways depending on what command tool you are using before running
dotnet electronize start.Command line
set ASPNETCORE_ENVIRONMENT=DevelopmentPowerShell
$Env:ASPNETCORE_ENVIRONMENT = "Development"Now that I have set my environment I get a much better outcome when I run
dotnet electronize startI am going to create a repo of my project I have create because I now have Hot Module loading working.
@jcphlux commented on GitHub (Dec 10, 2017):
@GregorBiswanger this can be closed I just wanted to show my solution to anyone else that might have the same issues.
@jcphlux commented on GitHub (Dec 11, 2017):
if anyone wants to play with Angular and wants to see how I got Hot Modules working check it out. https://github.com/jcphlux/ElectronNetAngular I am sure there is room to improve it.
@schaveyt commented on GitHub (Feb 12, 2019):
@jcphlux I am very interested in trying out your results in your repo but the link you provided seems to be borken :-( Are you still able to share?
@schaveyt commented on GitHub (Feb 12, 2019):
@GregorBiswanger
The classic MVC framework used in the demos are all server renders and not SPAs correct? ASP.NET MVC is all server-side rendered.
I am interested in exploring this more but would be helpful if there was a starter-kit repo for Angular-based applications :-)
@jcphlux commented on GitHub (Feb 12, 2019):
@GregorBiswanger I will see if I still have that repo backed up somewhere. I moved away from messing with Electron.net till it was a bit more mature.
@schaveyt commented on GitHub (Feb 12, 2019):
@jcphlux @gregBisanget. I guess the main thrust is that a bunch of folks are looking for a working example of Angular front end talking to to the webserver in the electron app. I think a lot of traffic would pick up to the project with some like that floating around.
@eskye commented on GitHub (Apr 16, 2019):
@jcphlux Please I will be glad if you can help share your sample project of ElectronNet with Angular.
@itsabrahan commented on GitHub (Jul 23, 2019):
@jcphlux could you share this with me as well?
@gabrielfreire commented on GitHub (Aug 7, 2019):
@jcphlux , your repo doesn't exist anymore, could you share please ?
@AlexanderDemko commented on GitHub (Oct 22, 2020):
Try this one: https://github.com/rajeshsuramalla/AngularWithDotNetCoreElectronNET