How to use the template for controller actions different than index

Dec 24, 2016 at 4:53 PM
If I have razor view for action that is different than index then the url to that action will be /ControllerName/ActionName. I had very much difficulties trying to fix that when we have ActionName in the url.

I have added the template project(https://marketplace.visualstudio.com/items?itemName=Payns75.Angular2Mvc5sampleapplication) into existing one. Works fine when the url generated from the asp.net mvc is index /something/home2/ - works when I try to add the same component in http://something/controller/action/ doesn't work. Can't find http://localhost:9666/controller/action/app/boottodolist.js

In the view I have

@section scripts{
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers --> <script src="~/node_modules/core-js/client/shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/reflect-metadata/Reflect.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS --> <script src="~/systemjs.config.js"></script>
<script> System.import('app/boottodolist').catch(function (err) { console.error(err); }); </script> }

in the html of the view I have added
<todolist class="todolistcontent">
<div class="waitloading">
    loading...
</div>
</todolist>

systemjs.config.js:

(function (global) {
// map tells the System loader where to look for things
var map = {
    'app': 'app', // 'dist',
    'rxjs': 'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular': 'node_modules/@angular'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': { main: 'boottodolist.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade'
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
    map: map,
    packages: packages
}

System.config(config);
})(this);

boottodolist.ts

import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic'
import { AppServiceTodoList } from './services/app.service.todolist';
import { HTTP_PROVIDERS } from '@angular/http';
import { TodoListComponent } from './components/todolist/todolist.component';

//enableProdMode();
bootstrap(TodoListComponent, [HTTP_PROVIDERS, AppServiceTodoList]);

I tried to change the System.import('app/boottodolist').catch(function (err) { console.error(err); }); by modifying ../../app/boottodolist .. but still didn't work.

The same question asked in StackOverflow can be found here: https://stackoverflow.com/questions/41207814/angular2-mvc5-sample-application-add-component-in-inner-folder