Angular2与Mvc 4项目路由错误答案

【问题标题】：Angular2 With Mvc 4 Project Route ErrorAngular2与Mvc 4项目路由错误
【发布时间】：2016-10-17 06:46:46
【问题描述】：

这是我的 Mvc 4 Project angular 2 结构

   Solution 'Angular2Starter'
|-- angular2Starter
|   `-- Controllers
|       `-- HomeController.cs
|-- src
|   |-- app
|   |   |-- home
|   |   |   |-- home.component.ts
|   |   |   |-- home.css
|   |   |   |-- home.html
|   |   |-- app.component.spec.ts
|   |   |-- app.component.ts
|   |   |-- app.html
|   |   |-- app.routes.ts
|   |   `-- main.ts
|   |-- systemjs.conf.js
|   `-- tmp
|-- tasks
|-- gulp.config.js
|-- gulpfile.js
|-- package.json
|-- tsconfig.json
|-- tslint.json
|-- typings.json
|-- Web.config
`-- Views
    `-- Shared
        `-- _Layout.cshtml

这是我的 Layout.cshtml

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- build:css assets/bundle.css -->
    <link rel="stylesheet" href="~/node_modules/font-awesome/css/font-awesome.css">
    <!-- app:css -->
    <link rel="stylesheet" href="~/src/assets/styles/main.css">
    <!-- endinject -->
    <!-- endbuild -->
  </head>
  <body>@RenderBody()
    <as-main-app>
      <i class="center-fix main-spinner fa fa-spin fa-spinner"></i>
    </as-main-app>

    <!-- build:js assets/lib.js -->
    <script src="~/node_modules/jquery/dist/jquery.js"></script>
    <script src="~/node_modules/bootstrap-sass/assets/javascripts/bootstrap.js"></script>

    <!-- 1. Load libraries -->
    <script src="~/node_modules/zone.js/dist/zone.js"></script>
    <script src="~/node_modules/reflect-metadata/Reflect.js"></script>

    <!-- Polyfill(s) for older browsers -->
    <script src="~/node_modules/es6-shim/es6-shim.min.js"></script>
    <!-- endbuild -->

    <!-- build:js assets/app.js -->
    <script src="~/src/tmp/app/bundle.js"></script>
    <!-- endbuild -->

    <!-- build:remove -->
    <script src="~/node_modules/systemjs/dist/system.js"></script>
    <script src="~/src/systemjs.conf.js"></script>
    <script>
      System.import('app/main.js')
        .catch(function(err) { console.error(err); });
    </script>
    <!-- endbuild -->
  </body>
</html>

我成功吞并打开项目索引页面后，控制台给我错误

GET http://localhost:52994/app/app.html 404 (Not Found)
EXCEPTION: Failed to load app/app.html

我可能把整个事情的结构都弄错了，但找不到任何关于我的情况的例子。我不知道这里发生了什么？有人可以帮忙吗？

【问题讨论】：

也许您需要更改为<base href="/src">，或者设置 ASP.NET 来提供静态文件？

标签： angularjs asp.net-mvc asp.net-mvc-4 typescript angular

【解决方案1】：

试试

System.import('app') .then(null, console.error.bind(console));

而不是

System.import('app/main.js') .catch(function(err) { console.error(err); });

【讨论】：