Could anybody please help me out regarding how to implement Angular 2 with Asp.Net Web API? Any tutorial link would be helpful.
There is very little to no documentation available in this regard.
I did implement the https://angular.io/docs/js/latest/quickstart.html
But it requires npm start which starts the node server useful for CommonJS module loading. I want to use IIS and Web API. Can I use CommonJS or do I have to use any other module system
If I use CommonJS with IIS development server I get this error:
in the console. The same link works fine when I start using Node server. This means on the production server I have to use Node as well as IIS for Web API? Is there any way I can use Angular 2 only with IIS and possibly eliminate CommonJS if needed. Any tutorial to Angular 2 with Asp.Net would be helpful.
You have to use SystemJS as your module system, if you want to use it exactly like in the tutorial. If you want to use CommonJS, use something like Browserify.
You can have a look to following article for Angular 2 and Asp.net MVC with Web API.
https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API
It's a good one but this article uses Asp.Net MVC in the middle.
You might consider to remove Asp.net mvc part and develop a website with Angular(client side) and web api(server side).
This one is a simple example.
https://github.com/thinktecture/apisummit-2016-angular2-webapi
On the other hand, if you want to use IIS then you need the build your angular project with
ng build --prod
and move the dist folder into your IIS website folder. Note that you don't need a node server on IIS because nb build transpiles old the typescript files into javascript and gets the other static files(html, css, js, etc...) and prepares for you to deploy to any web server like IIS.
another sample angular(client side)-Asp.Net Web API(server side)
https://www.youtube.com/watch?v=AYgs0kLjTLE
Related
In ASP.NET Core 2.2 it was rather straightforward to have an ASP.NET Core website with React front-end and working server-side rendering - since SSR was supported out-of-the-box in the ASP.NET Core+React template, which internally run the NodeServices to executed the javascript using node.
However with ASP.NET Core 3.1 things are not so easy anymore, mainly because the SpaServices and NodeServices classes are declared as obsolete and will be removed with .NET 5, according to this link. So no javascript execution with node from C# anymore.
Now, besides the information, that the server-side rendering suggested in ASP.NET Core 2.2 is now obsolete, the only suggestion how to go forward I found is from above article:
To enable features like server-side prerendering and hot module reload please refer to the documentation for the corresponding SPA frameworks.
But if I understand correctly, to have react-based server-side rendering, I need to have a node.js server which will perform the rendering on the server-side.
Does that mean, that if I want to have an ASP.NET Core 3.1 website with a React front-end with SSR - I should have one ASP.NET Core project for the WebAPI, and another separate Node.JS project for the front-end with SSR?
And then deploy them on two separate Azure AppServices?
Is that the recommended architecture for ASP.NET Core + React projects?
I came across exactly the same problem. It took me a few weeks to create a new set up where frontend is separate from the backend.
I published the prepared boilerplate on GitHub and wrote a blog posts that explains how to enable server-side rendering with ASP.NET Core and React in details. The solution is a combination of CRA (Create React App), Storybook for CRA and a standard ASP.NET Core MVC template.
To make a long story short I built my custom asp-prerender-module and asp-prerender-data attributes. They communicate with an Express server based on Node.js to get the rendered HTML. Thereafter the HTML served to the browser gets "hydrated" with actions.
After spending some time researching, that are the current options:
Live on .NET Core 3.1 with the NodeServices with an obsolete flag
Create separate projects for back-end (asp.net) and front-end (node.js)
Fork/copy NodeServices and maintain by myself
Hope that a there will be a community driven fork of the NodeServices in the comming months before .NET 5 release were it will be removed eventually
You can use a new library to invoke JS from .net which is
https://github.com/JeringTech/Javascript.NodeJS
You can use SSR on .net with the above library Razzle described here:
https://dev.to/pruttned/integrating-react-into-asp-net-core-using-razzle-with-all-the-goodies-like-ssr-routing-code-splitting-and-hmr-part-1-2-34g8
BUT at the time of writing I find that there is no information on how to deploy such an application.
Reactjs is working on the Server component to stream partially rendered UI in the form of JSON data to clientside. https://github.com/reactjs/rfcs/blob/2b3ab544f46f74b9035d7768c143dc2efbacedb6/text/0000-server-components.md
I think for future integration of Server component, it needs a native NodeJS process to handle server rendering.
I am trying to build an Enterprise System that will evolve over time with features being added as time progresses.
I am planing to go with ASP.Net Core microservices architecture with Angular for the UI. I am unable to find a sample that shows how we can introduce new modules without changing any existing angular code.
I was able to do this in the traditional winforms applications using technology like MEF and dropping the dll in to a folder that shell watches and loads.
Looks like there is no such example using the Angular framework. So I was curious if its even possible to achieve an architecture as shown below?
Module are the asp.net core services that serve the angular files that the shell can render and Service are the logic services that are used by the applications themselves.
I did see this post, that is close to what I want to do, but I am not sure if this is even the right solution being discussed.
Any pointers appreciated.
I tried to implement a plugin architecture making use of ABP, Angular and ASP.NET Core: https://github.com/chanjunweimy/abp_plugin_with_ui
Basically, I developed angular plugins using different angular application, then I dynamically add them together.
More Information on how I achieve it:
I have 2 angular-cli application, 1 is the main angular cli application, and another is the plugin angular cli application. The problem we are facing in Angular-cli plugin architecture approach is how we integrate them.
Right now, what I did was, I run ng-build on both of the applications, and put them into a "wwwroot" folder, which then hosted in a ASP.NET core 2.0 server.
abp_plugin_with_ui is a repository which works on developing a plugin which contains both the backend and Angular cli. For the backend, I made use of the aspnetboilerplate framework, which the frontend is developed using multiple angular-cli application.
To have the main application integrated with the plugin application, we have to run "ng-build" on both of the application (note that we have to change to href of the plugin application as well), then we move the built contents of plugin angular cli application, to the main application "wwwroot" folder. After achieving all this, we can then run "dotnet run" to serve the ASP.NET Core 2.0 Web Application to host the static files generated by "ng build". In this approach, plugin Angular UI applications are independent from the main Angular UI application: they are connected using IFrame.
Recently, I realized that we could create components on the fly, which means that maybe it is better to download the "NgModule" and create that module dynamically instead. This option is better because plugins UI would directly integrated into the main application UI. I am still trying out this method.
Another option suggested by #bruno was to develop the UI in SOA instead. This means that, we could choose not to separate the UI into plugins, but separate them into modules as independent service instead. You need to have a so-called "IT/Ops Client" that could help you manage what view to show in the UI, and the main UI is just a frame/template that will show what "IT/Ops Client" want to show. Using this way, we could register these services, and chose what service to be used. This is the microservice architecture and might be closed to what you want. The microservice expert Udi Dahan has a post blogged about this (link: http://udidahan.com/2014/07/30/service-oriented-composition-with-video/)
I currently have a Play project where Angular Front-end is integrated into it with Gulp. Now I need to re-use the angular code into a .Net Web-Api project. Having APP and API as separate project will work. But to avoid dealing with different ports and CORS only option is to have one project that is deployed to one port where AngularJs project gets integrated along with Web Api project.
I have checked many question only this Stack-overflow answer seems relatable to my scenario but no luck with that solution too.
Does anyone know how to do that kind of integration. And is it possible to have integrated both into one project
Create ASP.NET MVC application.
Change default Index.cshtml with your index.html from Angular application. (You'll maybe need to correct paths to other files).
Now ASP.NET runs your application so you can add WebAPI Controllers instead of MVC Controllers inherit from ApiController.
Is it possible to deploy ;
1- a web-api project
2- a website written in Asp.net
3- a WCF service as windows service
in one msi file using/in Windows Web Installer Project (preferably) or in Wix ?
Yes, it is possible using WiX. I maintain an open source project called IsWiX that even makes it somewhat easy. See:
Create and Package a Windows Service using IsWiX
IsWiX Web Site Demo
The concept behind IsWiX is project templates (scaffolding) and graphical designers that give you a project structure and most heavy lifting for your WiX MSI project. The template already contains examples of IIS configuration that merely need to be uncommented out. If you need a Web API and a Web Site you'll have to clone that part of the code and make a few adjustments. For example a static website typically won't be a web application where a web-api will be. Then you'll use the services designer to define the windows service. The fact that the service hosts a WCF endpoint really doesn't matter.
For that matter, one of the really cool things about WCF is it's possible to eliminate your dependencies on IIS. I've seen solutions using this with no dependency on IIS and this really makes creating installers a lot simpler.
In VS 2012, I am attempting to create an MVC 4 web application with jQuery calls to a Web API project. (Other devs will be consuming the API with our current, native app, and probably adding to the API in the future.) So I have one project that is the Web API, and another project that is the MVC 4 website. I can only set one of them to run, and they use localhost:xxxxx.
How do I debug changes to both? For example, let's say I add a new API path /api/customer/get and then a new jQuery ajax call to that path and do something with the resulting JSON. I've changed code in both projects and want to follow it end-to-end; how do I launch both? How do I debug both?
Just to be clear, the MVC app isn't making server-side calls to the API, I'm using MVC mostly to be able to easily use bundling, minification, and (hopefully) pre-compiled Handlebars templates in .NET; the API calls are coming from jQuery. As I am still relatively new to these technologies, alternate suggestions are welcome.
Thank you in advance.
I had the same problem and have found a solution from here:
forums.asp.net
The fix is to do the following:
In your solution file, click properties go to the Startup project node (if it is not already selected)
Next select Multiple startup projects. Select your website and your webservice and in the Action column make sure both of them have "Start" selected.
Now when you debug your website and put a break point in your webservice, it should hit the break point.
Coming late to the party but in case anyone else is looking for a solution, this is what was best for me: Set the Api project up to be the starting project (I needed to limit to one startup so that I could flip between browsers more easily). After firing up the service project, right click on the web/ui project and select debug, start new instance. You'll have both running and you'll seamlessly step from web to api.
I had a similar problem with my web api project. My solution consisted of an angular front end with 2 web api projects on the backend. One web api project handled "authorization" and the other handled "resources". I used the following tutorial by Taiseer Joudeh as a starting point:
http://bitoftech.net/2014/09/24/decouple-owin-authorization-server-resource-server-oauth-2-0-web-api/
Breakpoints worked on the "authorization server"... but not on the "resource server". I compared the packages from the two projects to see what was different. Once I added "Microsoft.AspNet.WebApi.Cors" to the "resource server" project, the breakpoints starting working.