unable to get it working with Angular

[jcphlux]

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]

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]

anytime I try to load a new view the app flashes

[yoDon]

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]

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]

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]

@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]

@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]

@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]

@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 start at the end before the app loads it shows this.

stdout: Use Electron Port: 8000
ASP.NET Core Application connected...
stdout: Hosting environment: **Production**
Content root path: E:\Dev\Adevsco\Adevsco\ElectronNetAngular\ElectronNetAngular\obj\Host\bin\
Now listening on: http://0.0.0.0:8001
Application started. Press Ctrl+C to shut down.
stdout: BridgeConnector connected!

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=Development

PowerShell $Env:ASPNETCORE_ENVIRONMENT = "Development"

Now that I have set my environment I get a much better outcome when I run dotnet electronize start

stdout: Use Electron Port: 8000
stdout: info: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[0]
      User profile is available. Using 'C:\Users\JohnCutburth\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
ASP.NET Core Application connected...
stdout: Hosting environment: Development
Content root path: E:\Dev\Adevsco\Adevsco\ElectronNetAngular\ElectronNetAngular\obj\Host\bin\
Now listening on: http://0.0.0.0:8001
Application started. Press Ctrl+C to shut down.
stdout: BridgeConnector connected!
stdout: info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:8001/
stdout: info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[1]
      Executing action method ElectronNetAngular.Controllers.HomeController.Index (ElectronNetAngular) with arguments ((null)) - ModelState is Valid
stdout: info: Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.ViewResultExecutor[1]
      Executing ViewResult, running view at path /Views/Home/Index.cshtml.
stdout: info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[2]
      Executed action ElectronNetAngular.Controllers.HomeController.Index (ElectronNetAngular) in 4874.061ms
stdout: info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 5154.014ms 200 text/html; charset=utf-8
stdout: info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:8001/dist/vendor.js?v=2nyaeqxlxCvdBQpR1xFKluQoucQwOwOhWD28JU3Os_g
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:8001/dist/vendor.css?v=vf4TTnOiCp20iU10Tf4anf3dbOl_Mg07hxsMkGL_Rdw
stdout: info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[6]
      The file /dist/vendor.js was not modified
info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[6]
      The file /dist/vendor.css was not modified
stdout: info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 28.9062ms 304 application/javascript
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 28.9066ms 304 text/css
stdout: info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:8001/dist/main-client.js?v=k8EGXt6Pj-UHYrIbH5QZeFosnSP8SanGbiOEyUsVwi0
stdout: info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[6]
      The file /dist/main-client.js was not modified
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 0.363ms 304 application/javascript

I am going to create a repo of my project I have create because I now have Hot Module loading working.

[jcphlux]

@GregorBiswanger this can be closed I just wanted to show my solution to anyone else that might have the same issues.

[jcphlux]

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]

@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]

@GregorBiswanger

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

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]

@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]

@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]

@jcphlux Please I will be glad if you can help share your sample project of ElectronNet with Angular.

[itsabrahan]

@jcphlux could you share this with me as well?

[gabrielfreire]

@jcphlux , your repo doesn't exist anymore, could you share please ?

[AlexanderDemko]

Try this one: https://github.com/rajeshsuramalla/AngularWithDotNetCoreElectronNET