AngularJS – TypeError: Cannot read property ‘canonicalUrl’ of undefined

I’m working on an app in AngularJS using ES6, but we are trying to do it way that will fit for AngularJS 2.0, o we are using “Angular new router”

application is a directive and is placed in the <html> tag as an attribute

class Application {

    constructor($router) {
        this.$router = $router;

                path: '/',
                component: 'main'
                //component: {'main': 'main'} // view-name:component => name.html, NameController
                path: '/doctors',
                component: 'doctors'


Application.$inject = ['$router'];

export default function() {
    return {
        scope: {},
        controller: Application,
        controllerAs: 'applicationCtrl'


import doctorsCtrl from "../../page/dashboard/DoctorsCtrl.js"; // controller for the component
import mainCtrl from "../../page/dashboard/MainCtrl.js";
import doctors from "./widget/doctors/Doctors.js";

angular.module('agenda.dashboard', ['ngNewRouter'])

    .directive("application", application)
    .directive("doctors", doctors)

    .config(function ($componentLoaderProvider) {
        $componentLoaderProvider.setTemplateMapping(function (name) {
            return 'page/dashboard/' + dotCase(name) + '.html';

        $componentLoaderProvider.setCtrlNameMapping(function (name) {
            return name[0].toUpperCase() + name.substr(1) + 'Ctrl';

    .controller('MainCtrl', mainCtrl)
    .controller('DoctorsCtrl', doctorsCtrl);

    function dotCase(str) {
    return str.replace(/([A-Z])/g, function ($1) {
        return '.' + $1.toLowerCase();

Main (‘/’) works correctly but when I try to open (‘/doctors’) I get the error

TypeError: Cannot read property ‘canonicalUrl’ of undefined

at Grammar.recognize (router.es5.js:1453)

at RootRouter.recognize (router.es5.js:752)

at RootRouter.navigate (router.es5.js:680)

at RootRouter.$$rootRouter.navigate (router.es5.js:94)

at Object.fn (router.es5.js:89)

at Scope.$get.Scope.$digest (angular.js:15556)

at Scope.$get.Scope.$apply (angular.js:15824)

at bootstrapApply (angular.js:1628)

at Object.invoke (angular.js:4426)

at doBootstrap (angular.js:1626)

Source: javascript

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.