Приложение Angular2 не загружается в Plunker

Поп викторина! Я создал пример Anguar2 в Plunker, отражающий проблему маршрутизации, с которой я столкнулся, чтобы я мог опубликовать вопрос в StackOverflow, но я не могу запустить эту чертову штуку в Plunker. Страница индекса загружается без ошибок, но компонент моего приложения никогда не отображается на странице. Я дам вам право похвастаться, если вы заметите мою проблему с конфигурацией, чтобы я мог опубликовать свой реальный вопрос. Заранее спасибо.

Вот мой пример http://plnkr.co/edit/2imWa2?p=preview

Весь код находится в Plunker. Это файл конфигурации, который я взял из этого рабочего примера Angular 2 (http://plnkr.co/edit/FNBFPE?p=preview), чтобы попытаться настроить приложение, но я не думаю, что оно подходит для моей настройки.

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
     app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: 'src/app.ts',
      defaultExtension: 'ts'
    }
  }
});

angular plunker
person Steve Mitchell    schedule 11.03.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я использовал другой шаблон https://plnkr.co/edit/NIbxKB?p=preview. Я не знаю, хотите ли вы этого, но так это работает.

Вот также Plunker от члена команды Angular ?p=предварительный просмотр. Он показывает, как вы можете предоставлять ROUTER_DIRECTIVES глобально.

bootstrap(App, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}),
  provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})
]).catch(err => console.error(err));
person Günter Zöchbauer    schedule 11.03.2016
comment
Спасибо, Гюнтер. Это сделало это. Это изменение, наряду с переформатированием моих RouteLink, решило все. За исключением проблемы с WebPack. Это тема для другого дня. Вот работающий plnkr.co/edit/2imWa2?p=preview. - person Steve Mitchell; 11.03.2016
comment
Вопрос, который я собирался опубликовать, заключался в том, почему мои ссылки маршрута не работали при попытке загрузить совершенно другой компонент на странице (эквивалентный window.location). Исправлено перемещение ROUTE_PROVIDERS и FORM_PROVIDER в app.ts. Я не пробовал перемещать ROUTER_DIRECTIVES в app.ts. Я сделаю это сегодня, чтобы сделать наши компоненты немного чище. - person Steve Mitchell; 12.03.2016

arrow_upward
0
arrow_downward

Вы должны загрузить свое приложение следующим образом:

import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';

import {App} from './app';

bootstrap(App, [ ROUTER_PROVIDERS ]);

Посмотрите этот plunkr, созданный из вашего собственного: http://plnkr.co/edit/QOwTLC?p=preview

person Thierry Templier    schedule 11.03.2016