I am trying to make a web based application using Spring MVC (5th version) & Angular 5... My idea is, Spring MVC will provide restful web-services & Angular 5 will call those web-services & manages User Interface at client side..
My question is, whether I require 2 separate web applications (one for UI & one for web-services) to be run on the server ? if yes- what will be the web-server for angular 5 application ? if no - how do we integrate angular 5 with spring MVC?.. could any one provide me the working example- how to be implement spring MVC with angular 5? Is it good practice to run both the application on single web-server? What do you suggest?
Any Help would be highly appreciated... Thanks a lot in advance..
1) you compulsory don't need 2 web application to be run on server.
2) you can build the angular project and then copy all the files from dist directory of angular project to WebContent directory of spring project.
3)
Follow below steps to run SPRING MVC with Angular5 on a single server.
1.Create normal Dynamic web project.
2.Add all dependancy required for spring or user maven pom.xml
3.Open CMD, navigate to angular2 application. Hit command
'npm install'
and then
'ng build'
or use 'ng build --prod' for production build.
this command will create a “dist” folder, copy all files including all folders.
4. Paste those files and folders into 'WebContent' directory.
5. Last thing, you need to change basehref=”./” in index.html.
Now you are ready to run server or you can deploy war file and serve it with tomcat or other servers.
i have found git repo containing full working example of Spring MVC with angular 2:https://github.com/rakshitshah94/Angular2-SpringBoot-Example
4) NO it can't be said good practice to include angular build files in Spring MVC project. because every time you make changes to angular, you have to rebuild your Spring war file and deploy it again to webserver.
Intergrate Spring4MVC with Angular 2 on a single server. Please refer this link. It will work Angular 5 as well
Related
I am trying to setup the solution for a web application which uses ASP.NET with .NET Framework 4.8 for the backend and Angular 13 for the frontend (we cannot use .NET Core or any newer version because some of the libraries we need to use are only available for .NET Framework).
In the solution, the angular project is in the same folder as the backend project (where the sln file is also located). Now, I created a publish profile for the backend project but it is not yet linked to the angular project in any way, so the output folder only contains the files for the backend. In addition to that, I built the angular frontend via ng build which generated all of the files I need for the frontend in the dist folder.
How can I deploy this to an IIS webserver so users can see and work with the angular frontend and all http requests to the backend are routed to the appropriate controller and action in my ASP.NET application? Are there any tutorials or instructions for this? So far, I was not able to find what I am looking for and I am very confused how I am supposed to make this work in IIS.
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.
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
I am trying to consume a Web API service from another ASP.NET classic project (actually it is a native JS and Html Web application).
How can I configure these these two separated projects to talk with each other, on VS2012?
The final result would be:
http://localhost:8080/api/products
will return a list of products (JSON) by routing to ProductsController located on the WebAPI project,
And
http://localhost:8080/index.html
will be routed to this page on the Second project - The native HTML/JS project.
How can I configure the logical to physical Directories in these two project?
Thanks!
As it turned out it's pretty simple.
All I had to do is configure these both projects to share the same port on the local IIS:
So for the native JS/HTML (my second project) I use:
And the second project (WEB-API project):
That is it!
Now the js can consume the Web-Api!
You just need a single project: ASP.NET Web API. I would put the index.html in the root and javascript files under scripts or js folder.
Normally static content such as js and html can be served directly by IIS in your ASP.NET Web API project. You need to make sure you add them to ignore rules in the startup:
RouteTable.Routes.IgnoreRoute("*.js");
RouteTable.Routes.IgnoreRoute("*.html");