Here is the structure of my Mvc 4 Project with angular 2 implemented:
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
This is how my Layout.cshtml looks like:
<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>
After successfully running gulp and opening the project's index page, I encountered the following error in the console:
GET http://localhost:52994/app/app.html 404 (Not Found)
EXCEPTION: Failed to load app/app.html
I may have structured everything incorrectly, as I couldn't find any examples similar to my situation. Can anyone provide some assistance on what might be causing this issue?