Setup angular 2/4 with MVC 5 in visual studio 2015

Question

I am trying to integrate the angular-cli generated Angular 4 with MVC 5. I need to load the angular via the MVC view. Could somebody tell me how to go about it. Most of the examples show referencing systemjs.js in the layout file. Angular cli doesn't generate that file and instead use the .angular-cli.json file. I also need to load index.cshtml instead of index.html

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "MRDB.Web"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular4app</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Startup

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(MRDB.Startup))]
namespace MRDB
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureAuth(app);
        }
    }
}

Hi James, I did see that. My question is , I have generated using angular cli which does not contain systemjs. The example uses systemjs to configure the application. I am looking at integrating the angularcli generated source code with MVC5 — Tom

Simon Simon · Accepted Answer · 2017-06-09T10:08:46

I not sure how but do you really want to do this? by my understanding, Angular is a complete front-end framework, you can simply put all files to a Site instead of a MVC project.

Setup angular 2/4 with MVC 5 in visual studio 2015

1 Answers