Angular2 setup for MVC project

Question

I'm trying to figure out the best ways & practices for integrating Angular2 into a legacy Spring MVC framework. This is not specific to Spring MVC but to any MVC framework.

In Angular1 world , the server rendered the page and Angular1 could be used purely for client side functionality. There would be 1 ng-app per page.

From what I've seen from the use of Angular (Typescript + Angular-CLI) looks like its ideally suited for a Single Page App, where the html is rendered by a node webserver.

I've also looked into Angular2 (using plain js), but seems like some of the functionality, available in Typescript is missing. For example, templateUrl property.

To summarize what is the recommended setup to integrate Angular2 into an MVC framework?

Requirements

In local dev env, I want to be able to have similar functionality which ng serve provides (ie live reload) but the page itself will be rendered by the server

In prod, I should be able to bundle up and do the production build best practices.

Thank you in advance.

Answer 1

Before going all in with Angular 2 for the use case that you have, it may be a good idea to survey the many options out there, even if you are coming from a Angular 1.x background. The reason I'm saying this is because I just recently used Angular with another MVC server side framework on a project. Here are a few shortcomings/headaches I experienced.

Server Rendering

One of the things that was convenient when using Angular 1.x was the ability to render templates on the server like so.

<div ng-controller="HomeController as vm" >
      <!-----Home.Html------>

      <!------Server Logic/Bindings----->

 </div>

Just quickly data bind and render your home template on the server, and then home.html comes to life after the Angular compilation process. It seems like pulling templates from the server is not supported or recommended in Angular. This is a big draw back with Angular 2 in my opinion.

Now I believe server rendering can be achieved with Angular 2, but I think it can only occur during the initial page load using the Angular Universal module.

Tooling

There is so much tooling that is required if you want to author an Angular 2 app. Typescript, or ES6, and in most cases your going to need a separate text editor like VS Code or Webstorm. My enterprise edition of Visual Studio 2015 doesn't even cut if for Angular development anymore. So I do all my Angular development with Webstorm in complete isolation from my server side framework.

One of the most frustrating things with many of the newer JS frameworks is how you deliver the App to the browser. This is where a build system comes in. This aspect of the development process is probably the most complicated. So your pretty much forced to use a seed project with an already well tuned build process. Angular-cli seems like the best bet currently. Even with these great starter projects, I had to create an additional gulp process to automate a few things.

With these things in mind you may want to see what other options are available that may be better compatible to a more traditional MVC server approach. I've heard good things about VueJs . React may even be better suited for such an approach. I'm strongly considering both frameworks, or perhaps even VanillaJS for smaller scenarios.

This is not to say that Angular is not an awesome framework. I just think the tooling is not quite there yet, and it may not be the best tool for every scenario. With that in mind this is the approach I took using the Angular-Cli.

Angular-Cli.json

When the Angular-cli produces a build. Your going to likely want that build to output to the public directory of your server-side framework. This can be accomplished by modifying the outDir property of the angular-cli.json file.

"outDir": "../MVC-Project/wwwroot"

Proxy to Server API

When using ng serve, you will likely want to proxy all your api calls to your server project. This can be accomplished by adding a proxy.conf.json file to the root of you CLI project:

   {
      "/api": {
        "target": "http://localhost:8000",
        "secure": false
      }
    }

Serving the App

Then you'll need to include your "APP" component somewhere within your server rendered templates. For simplicity sake, let's say this is your index.html file. The tags in my example below are .Net Core related, but hopefully you get the idea.

<app-root>
    <div class="loader"></div>
</app-root>
  @section scripts{
        <environment names="Development, Staging">
            <script type="text/javascript" src="inline.bundle.js"></script>
            <script type="text/javascript" src="scripts.bundle.js"></script>
            <script type="text/javascript" src="styles.bundle.js"></script>
            <script type="text/javascript" src="vendor.bundle.js"></script>
            <script type="text/javascript" src="main.bundle.js"></script>
        </environment>
        <environment names="Production">

            <!-- inject:js -->

            <!-- endinject -->
        </environment>
       }