Angular2 应用程序不会在 Plunker 中加载答案

【问题标题】：Angular2 app won't load in PlunkerAngular2 应用程序不会在 Plunker 中加载
【发布时间】：2016-03-11 14:18:33
【问题描述】：

小测验！我在 Plunker 中构建了一个 Anguar2 示例，以反映我面临的路由问题，以便我可以将问题发布到 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

【解决方案1】：

我使用了另一个模板https://plnkr.co/edit/NIbxKB?p=preview 我不知道这是否是您想要的，但这样就可以了。

这里还有一个来自 Angular 团队成员 http://plnkr.co/edit/mk8wPfoqS66Qsuu2yN4F?p=preview 的 Plunker。它展示了如何在全球范围内提供ROUTER_DIRECTIVES。

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

【讨论】：

谢谢，君特。做到了。这种变化，以及重新格式化我的 RouteLinks 解决了所有问题。除了 WebPack 问题。那是另一天的话题。这是工作的plnkr.co/edit/2imWa2?p=preview。
我要发布的问题是为什么我的路由链接在尝试在页面上加载完全不同的组件时不起作用（相当于 window.location）。将 ROUTE_PROVIDERS 和 FORM_PROVIDER 移动到 app.ts 的修复。我没有尝试将 ROUTER_DIRECTIVES 移动到 app.ts。我今天会这样做，只是为了让我们的组件更干净一点。

【解决方案2】：

您应该以这种方式引导您的应用程序：

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

import {App} from './app';

bootstrap(App, [ ROUTER_PROVIDERS ]);

看到这个 plunkr 是从你自己的 plunkr 中分叉出来的：http://plnkr.co/edit/QOwTLC?p=preview

【讨论】：