fabiangosebrink / aspnetcore-angular-signalr-typescript

An example of an Angular application using ASP.NET Core and SignalR

Welcome to ASPNET Core Angular SignalR Typescript 👋

With this project we are running an Angular project which is getting updated by an ASP.NET Core backend with SignalR. It receives data over a REST interface and gets datapushed with SignalR. Enjoy!

Install

Just clone this repo and run

npm install

in the \frontend\angularsignalrclient folder.

Usage

npm start

in the \frontend\angularsignalrclient folder.

To run the backend make sure you have installed the dotnet cli and run

dotnet run

in the backend\ASPNETCore folder.

http://localhost:4200

to see the page then.

Have fun!

Author

👤 Fabian Gosebrink

• Twitter: @FabianGosebrink
• Github: @FabianGosebrink

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator

aspnetcore-angular-signalr-typescript's Issues

Is this possible

I am not posting a bug, I am writing to know the answer of my question, can this is possible that i have client app running of some machine and server on another and i want configure it with CORS to communicate and with the configuration of signalr in angular app and server one.

FIrst of all can this is possible , if possible then how it can be achieved.

can you provide me the demo app for this purpose

Npm start does not work

"npm start" command gives some errors:

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! path D:\Repository\Downloads\ASPNETCore-Angular-SignalR-Typescript-master\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open

Ionic & or NativeScript ?

Hi Fabian, WOW!! This is truley amazing what you have done here with this.

I was wondering if any figure plans to expand this repo out to include Ionic & or NativeScript ?

Cheers

Npm run does not work

Everything looks fine but.. I se only "Loading..." when i go to localhost:5000

FoodItemsController will not be garbage collected

I know this repo is just for demo purpose but i think you should correct this, before someone will use this in its own application.

You create a reference to the time elapsed event in the constructor of the FoodItemsController. This will prevent it from beeing garbage collected, because the TimeService has a Singleton lifestyle and will life forever.

public FoodItemsController(IFoodRepository foodRepository, ITimerService timerService, IHubContext<CoolMessagesHub> hubContext)
        {
            _foodRepository = foodRepository;
            _coolMessageHubContext = hubContext;
            timerService.TimerElapsed += _timerService_TimerElapsed; // <-- creates a reference
        }

Second "bug":
In the event handler of the elapsed event you send a SignalR message to all connected clients, and since the controller will not be garbage collected you have thousands of messages sent around with the identical content to the clients at the same time after a short amount of time.

But it would be iteresting so see where we should setup a background service like this one in asp net core.

.Net core Angular SignalR

Did not run, tried everthing...

Hello, I liked your solution very much. It mixes state of the art tech and is very valuable.

But I can't make it run though. I follow your steps and all run properly.

The problem is the wwwroot never gets the bundle, it stays in .dist
Which makes me think, is there a step to copy the bundle from .dist to wwwroot that I don't know about?

Thanks in advance for your help and again, great repo...

Self-Host SignalR and Local Http Server on the same port

hi, , your demo is really nice and works well on same port .
i created similar application with minimum plugins but my application is not working on same port i.e. when signalr and local http server on same port otherwise it works fine.
can you tell me how did you make it ?? is there any settings or plugin i am missing??

Thanks

Just wanna say very nice work, thanks for this!

ASP.NET Core SignalR beta package at MyGet

I see you have forked the SignalR source code from GitHub in order to get it all up and running. Have you also assessed the packages that live on MyGet?

Add the following source to your nuget package sources through Tools -> Options
https://www.myget.org/F/aspnetmaster/api/v3/index.json

And add the following MyGet package to your project (maybe you need others as well):
Microsoft.AspNetCore.SignalR.Server

Data not refreshed in IE

Hello,

I have implemented just a solution like you and everything is working perfect with SignalR to send updates to the client.
The only problem I have is that it is not working in IE but only in Chrome and Firefox. I am using IE 11 at the moment.

Jquery.signalr.js is missing

Fantastic work you have done with this repo! Just logging this issue with some issues I experienced.

I did the following:

• Clone this repo
• Open up Visual Studio
• Run gulp build:all
• Start the project through Visual Studio

I experienced the following:

• The startup project was Microsoft.AspNet.SignalR.Messaging. I have changed this to AspNetCoreAngular2
• IIS Express is looking into the wwwroot-folder but the build process outputs its files to the folder .dist. The file index.html does not contain correct references;
• jquery.signalr.js is missing in both folders (wwwroot and .dist). I had to copy it manually. I was expecting this file was bundled by the webpack process or some gulp task, which currently is not. Any idea how to solve this? I am currently looking into the npm package signalr-amd. Ideally one references some module from vendor.ts.

Additionally, some considerations:

• I was expecting webpack or some gulp task being attached to the Task Runner's Project Open or After Build event. What is your opinion on this?
• I would expect some webpack watch process being in place to enable a fast ctrl-s experience. What are your thoughts on this?
• The usage of dnx web. I believe this is replaced by dotnet run now? If I try that (using CLI version 1.0.0-preview1-002702 from rc2), I get a single line output 2. The project does not support the desired framework:.

Angular2 food view not updating

When I add a new food item, the Angular2 view is not updating. I need to click on it first. I have tested in Chrome, IE11, Edge.

Using breakpoints in the c# code I see that the getallitems webapi call is being hit.
Using breakpoints in the javascript code I see that the stream is hit and that the json mapping towards an array takes place. The view model gets populated, i.e. the assignment this.foodItems = data in the file foodcomponent.ts takes place.

signalr.d.ts

Where does your signalr.d.ts file come from?

Did you write yourself? Was it generated? Does it come from any public repository?

Build error (TS1323) - target esnext when using dynamic import

Hi @FabianGosebrink

Thanks for this great sample! I was facing build errors for the frontend using the latest angular 9.x-rc release:

ERROR in app/app.routing.ts:5:44 - error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.

5   { path: 'dashboard', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
app/app.routing.ts:6:40 - error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.

6   { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Changing the module compiler option from 'es2015' to 'esnext' in the tsconfig.json file solved the build errors. As described from https://stackoverflow.com/questions/56375703/angular-8-lazy-loading-modules-error-ts1323-dynamic-import-is-only-supporte, ts2015 does not support dynamic import.

Am I missing something else or should the module equal to esnext?

jan

this may work in the context of visual studio but

I have tried creating a client with angular-cli 7 and used your service template, but no luck in connecting to the back end server. cors is configured properly.