2016-03-11 2 views
0

Pop quiz! Я построил пример Anguar2 в Plunker, отражающий проблему маршрутизации, с которой я столкнулся, чтобы я мог отправить вопрос в StackOverflow, но я не могу заставить эту черту работать в Plunker. Страница индекса загружается без ошибок, но мой компонент приложения никогда не отображается на странице. Я дам вам права бахвальства, если вы сможете определить мою проблему с конфигурацией, чтобы я мог опубликовать свой реальный вопрос. Заранее спасибо.Приложение Angular2 не загружается в 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' 
    } 
    } 
}); 

ответ

0

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

Здесь также находится плунжер, который является членом Angular team http://plnkr.co/edit/mk8wPfoqS66Qsuu2yN4F?p=preview. Он показывает, как вы можете обеспечить ROUTER_DIRECTIVES глобально.

bootstrap(App, [ 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, {useClass: HashLocationStrategy}), 
    provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true}) 
]).catch(err => console.error(err)); 
+0

Спасибо, Гюнтер. Так оно и было. Это изменение, наряду с перестройкой моего RouteLinks, все решило. За исключением проблемы с WebPack. Это тема для другого дня. Вот рабочий http://plnkr.co/edit/2imWa2?p=preview. –

+1

Вопрос, который я собирался опубликовать, - это то, почему мои ссылки на маршрут не работали при попытке загрузить на странице совершенно другой компонент (эквивалент window.location). Исправить это, что перемещение ROUTE_PROVIDERS и FORM_PROVIDER в app.ts. Я не пробовал перемещать ROUTER_DIRECTIVES в app.ts. Я сделаю это сегодня, чтобы сделать наши компоненты немного чище. –

0

Вы должны самонастройки приложение таким образом:

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

Смежные вопросы