Angular 1.4 + ngNewRouter + ES6: невозможно прочитать свойство '$routeConfig' из неопределенного

В настоящее время я пытаюсь собрать воедино базовый рабочий пример приложения Angular 1.4, написанного как с новым маршрутизатором, так и с ECMAScript 6. Я без остановки возился с этим кодом, и я не понимаю, почему я получаю ошибку, бросается:

Failed to instantiate module bookShelf due to:
TypeError: Cannot read property '$routeConfig' of undefined

У меня есть угловое приложение, загружаемое в мой файл index.html следующим образом:

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Home</title>        
</head>
<body>
    <div class="container">

        <ng-viewport></ng-viewport>
    </div>

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-new-router/dist/router.es5.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>

    <script type="module" src="app/bootstrap.js"></script>
</body>
</html>

У меня есть конфигурация для маршрутизатора 1.4, а также код загрузки моего углового модуля в другом файле:

import { default as NerdController } from 'public/components/Nerd/Nerd.js';
import { default as MainController } from 'public/components/Main/Main.js';
import { default as NerdService } from 'public/services/NerdService.js';

var moduleName = 'bookShelf';

var app = angular.module(moduleName, ['ngNewRouter', NerdService])
  .config(['$componentLoaderProvider', SetTemplatesPath])
  .controller('AppController', ['$router', AppController])
  .controller(NerdController)
  .controller(MainController);


function SetTemplatesPath ($componentLoaderProvider) {

  $componentLoaderProvider.setTemplateMapping(name => `public/components/${name}/${name}.html`);
}

function AppController ($router) {

  $router.config([

    { path: '/', redirectTo: '/main' }, 
    { path: '/main', component: 'main' }, // component is template + controller from components folder
    { path: '/nerds', component: 'nerd' }

  ]);
}

export default moduleName;

И наконец фактический файл начальной загрузки:

import { default as bookShelfModule} from './app/bookShelf.main.js';
angular.bootstrap(document, [bookShelfModule]);

Я в полной растерянности, и любая помощь будет высоко ценится, поскольку я действительно хочу начать работать с ES6 и новым маршрутизатором.

Источник

3 ответа

Решение

Чтобы этот пример работал, мне нужно было применить AppController к тегу body в файле index.html, например так:

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Home</title>        
</head>
<body ng-controller="AppController">
    <div class="container">

        <ng-viewport></ng-viewport>
    </div>

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-new-router/dist/router.es5.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>

    <script type="module" src="app/bootstrap.js"></script>
</body>
</html>
Источник

После нескольких часов экспериментов и настроек я обнаружил, что когда вы определяете контроллер первым, а код находится после определения контроллера, причина этого сбоя

если вы переместите свой AppController

function AppController ($router) {

  $router.config([

    { path: '/', redirectTo: '/main' }, 
    { path: '/main', component: 'main' }, // component is template + controller from components folder
    { path: '/nerds', component: 'nerd' }

  ]);
}

до этого

var app = angular.module(moduleName, ['ngNewRouter', NerdService])
  .config(['$componentLoaderProvider', SetTemplatesPath])
  .controller('AppController', ['$router', AppController])
  .controller(NerdController)
  .controller(MainController);

тогда вы не увидите эту проблему.

Рекомендуется сначала определить контроллер, а затем объявить

Как мудрый angular.module(moduleName).controller(NerdController) also throws the same ошибка.enter code hereangular.module (moduleName).controller ('NerdController', NerdController) также выдает то же самое

Источник

По сути, он не поставляется с Angular v1.4, поэтому ваш успех в его запуске может отличаться.

https://github.com/angular/router

Новый роутер для Angular 1.5 и 2.0, написанный на TypeScript.

На данный момент код был перемещен в угловой / угловой. API-интерфейсы по-прежнему быстро меняются, поэтому я пока не рекомендую использовать это в важном производственном приложении. (Изм)

Из документа Weekly Status:

https://docs.google.com/document/d/150lerb1LmNLuau_a_EznPV1I1UHMTbEl61t4hZ7ZpS0/edit

11 мая 2015

(игорь): роутер

Слишком много неровных краев, не готовых к v1.4. Работайте с Брайаном и Матиасом, чтобы улучшить его.

Источник
Другие вопросы по тегам