Menu
I am wondering what the correct filing structure is for setting up a .NET Core 1.0.0 MVC application with Angular 2. I have browsed various tutorials and lectures but they all seem to have different ways of implementing angular 2 into .NET. Also, what are the best practices for implementing angular 2 into a .NET MVC app (a.k.a. when should I use angular SPA practices vs. using POST/GET with .NET) and how should I correctly setup the work flow? Thank you.
747
I use asp.net in conjunction with Angular 2 all the time. I don't know if there yet exists a "correct" method to setting up a .NET Core 1.0.0 MVC application with Angular 2. But I have developed an approach that builds on the following principle:
Let asp.net handle the backend, and let Angular2 handle the front end.
Otherwise don't mix the two (unless you are into Angular Universal in which your ng2 app is pre-rendered on the server, but this is a special topic).
I separate these concerns so completely that, when I am developing, I use the angular-cli within the context of Visual Studio Code, i.e. not one byte of .net is present in the Angular2 development environment. I find building ng2 apps withing Visual Studio to be extremely annoying. The angular team has created the angular-cli to solve many development and production issues related to Angular2, that it is just easier to let the angular-cli be in charge for all front-end workflow. I should also mention that it is so enjoyable to work with Visual Studio Code (I now prefer it over Visual Studio).
Note: I am aware that you can use .Net Core in the context of Visual Studio Code, and I have tried it, but it was still too annoying to bother with. Best to let angular-cli run the show for all front-end stuff.
Now of course your ng2 app is probably going to want to make calls to "the server", i.e. make http calls etc such as the following:
getMeSomeServerData(someVar: string): Promise < IGenericRestResponse > {
let headers = new Headers();
headers.append("Content-Type", "application/json");
let url = this.apiUrl + "getMeSomeServerData";
let post = this.http.post(url, JSON.stringify(someVar), {
headers: headers
}).map(response => response.json());
return post.toPromise();
}The key thing to notice here is:
this.apiUrl
When I am in development mode I make this refer to my back-end project located at something like http://localhost:1234/ which refers to an asp.net Web Api project i am running concurrently in Visual Studio. So the back-end looks something like this:
// this of course goes within a controller
[HttpPost()]
[Route("getMeSomeServerData")]
public JsonNetResult GetMeSomeServerData(string someVar) {
GenericRestResponse response = new GenericRestResponse();
response.Error = false;
// do somthing
return new JsonNetResult(response);
}Note: you have to configure your asp.net mvc backend for CORS or cross-origin HTTP requests since your ng2 app is not on your mvc project domain.
When you want to deploy your app for production, then you use the the angular-cli command to bundle and optimize your ng2 app ("ng build -prod"). Then copy all the assets in the "prod" folder to your asp.net project (gulp makes this fast and easy). Use ONE razor view and one razor view only to serve your webpage. Here is an example of such a view, Home.cshtml:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<script type="text/javascript" src="~/assets/js/styles.bundle.min.js"></script>
</head>
<body>
<app>Loading...</app>
<script type="text/javascript" src="~/assets/js/main.bundle.min.js"></script>
</body>
</html>And that's the workflow I have developed and it works great for me. I do realize that this approach will not work for anyone using Mac or Linux. In non-windows environments, I would still recommend setting up your development workflow such that your angular app is in one project, and the .net core "server" is in a separate project.
UPDATE: I forgot to mention that when you build for production, and effectively unify the frontend and backend in one project, you need to remember to update the apiUrl to "/" indicating that the backend calls are within the current domain (i.e. no CORS)
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
