Angular new router force components folder under root

Question

I'm trying to use angular new router in my Angular 1.5 (+ Typescript) project.

I followed the getting started manual but it forces me to have all my HTML components folder right under my root folder:

Could not instantiate controller HomeController

http://localhost:8083/components/home/home.html 404 (Not Found)

Can I change it?

My routing code is:

this.$router.config([
      { path: '/', redirectTo: '/home' },
      { path: '/home', component: 'home' }}
]);

And my component is:

namespace app.dashboard {
    'use strict';

    class HomeController {
    }

    angular.module('app.dashboard')
        .component('home', {
            templateUrl: 'app/dashboard/components/home.html',
            controller: HomeController,
            controllerAs: 'HomeController',
            bindings: {}
        });
}

and my nested folder is app/dashboard/components under root path

Answer 1

To have your html somewhere else you need to specify the templateURL like:

this.$router.config([
      { path: '/', redirectTo: '/home' },
      { path: '/home', component: 'home' },
      { path: '/login', component: 'login', templateUrl: '/views/login' }
]);

templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used by ngView.

If templateUrl is a function, it will be called with the following parameters:

{Array.} - route parameters extracted from the current $location.path() by applying the current route

You can find more on this link about rooting. under the templateUrl you can specify the file path without extension.

UPDATE: You want to use that specific this.$router.config? I'm asking this because you can you something like:

app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {

        // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
        // ------------------------------------------------------------------------------------------------------------
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/views/index',
                controller: 'HomeCtrl'

            });
}]);

And you won't need to use components, is same thing, i think, for rooting but you will need to add 'ui.router' as a dependency to your app.