Question

流行测验！我在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'
    }
  }
});

Answer 1

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

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

Answer 2

我使用了另一个模板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));

Angular2应用无法在Plunker

2 个答案: