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.
Related
I have a functioning Blazor WebAssembly (WASM) component which is ASP.NET Core Hosted and contains three projects: client, server, and shared. The client-side component connects to a SQL Server database using Web API endpoints contained in a controller file within the server-side app.
I would now like to share this component with multiple apps. Would the best practice be to use a Razor Class Library (RCL) or to just keep the component in project format and directly add/reference it within projects that will use it? If an RCL is recommended, how do I handle the controller?
I found a partial answer to my question. It appears that prior to .NET 6 it was possible to share Blazor components by sharing their projects. However, with .NET 6 this now generates an error and Razor Class Library's (RCLs) are the recommended method for sharing WebAssembly components. Source: GitHub aspnetcore issue #36732
I also posted to MSDN and to date have been unable to find a way to combine client-side WASM classes and server-side controller classes into a single RCL. From what I have learned so far, I can see two options:
Use an RCL for the client-side component and a regular class library (or second RCL) for the server-side controller. (I have not tested this).
Convert to a server-side Blazor project. This is the solution I ended up using. It does not require a Web API/controller and sharing components via RCL works well. Bonus, coding/debugging is easier and the project loads faster. This solution is working well for my present needs.
I'm trying to figure out the best way to integrate a front-end angular application with .net core back end API.
I've already seen two different methods and wondering why use one over the other?
Use the ASP.NET Core with Angular project template (within visual studio) + ASP.NET Core Web API project template.
Use a basic stand alone Angular application + ASP.NET Core Web API project template.
Any thoughts or information is much appreciated!
The Angular project template offers the convenience of managing the two apps (API backend and Angular frontend) as a single unit in one solution, and the project can be built and deployed as a single unit.
If you'd like to create and build the backend and Angular frontend apps separately, and host them on different server or sites, or you just want to create an Angular frontend to consume an existing API(s) backend, you can use Angular CLI to create a customized client app without using the Angular project template.
It's actually very good question, i used to create a stand alone both of front-end and backend parts and work with them separatly. It's makes me able to think only about that part or about only that feature i'm working on whatever it is.
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/)
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
Microsoft has a great tutorial here for learning how to build Web API web apps in Visual Studio 2013:
http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api
in it, he shows you how to include the Web API folders and references:
...is there a way to add these to a previous ASP.NET Webforms project that didnt have that checkbox selected? I'm working on an existing app and want to add Web API functionality to it.
thanks
yes -- there is a tutorial for adding Web API to an existing ASP.NET Webforms project here:
http://www.asp.net/web-api/overview/creating-web-apis/using-web-api-with-aspnet-web-forms
...it doesn't create the Models, Controllers, or App_Start folders, but i added them manually and placed my files from another stand-alone project there. once adjusting the namespaces it all operates properly.