Angular2使用routerOutlet

Question

我正在努力扩展使用yo fountain-webapp生成的angular2应用。我遇到的问题是我无法运行内部渲染模板。

我是angular2的新手，我刚刚开始阅读文档以及一些示例应用。我注意到有机会将不同的组件渲染到主app模板文件中，这正是我正在寻找的。

出于某种原因，我无法正常工作。

我在main.html中有这段代码

`<div class="main-container">
  <fountain-header></fountain-header>
  <main class="main">
    <fountain-title></fountain-title>
    <fountain-techs></fountain-techs>
    <some-selector></some-selector>
    <!-- Router Outlet -->
    <router-outlet></router-outlet>
  </main>
 <div class="col-md-6 col-md-6-offset4">
    <fountain-footer></fountain-footer>
  </div>
</div>`

main.js ：

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

@Component({
  selector: 'fountain-app',
  template: require('./main.html'),
  directives: [ROUTER_DIRECTIVES]
})
export class MainComponent {}`

routes.js

import {Component} from '@angular/core';
import {RouterModule} from '@angular/router';
import {MainComponent} from './main';
import {SomeComponent} from './some';

@Component({
  selector: 'fountain-root',
  template: '<router-outlet></router-outlet>'
})
export class RootComponent {}

export const routes = [
  {
    path: '',
    component: MainComponent
  },
  {
    path: 'some',
    component: SomeComponent
  }
];

export const routing = RouterModule.forRoot(routes);

和部分组件，我希望在main中呈现以及根据路径添加的任何新组件

import {Component} from "@angular/core";
import {ROUTER_DIRECTIVES} from '@angular/router';

@Component({
  selector: 'some-selector',
  template: require('./some.html'),
  directives: [ROUTER_DIRECTIVES]
})
export class SomeComponent {
    constructor() {
    this.title = "Holla molaa!";
    this.description = 'this is the description';
  }
}