title: No provider for String
body: <p>Hi can somebody tell Me what am I doing wrong?
  I think it's simple error, but I'm new to angular and I can't find it.</p>
  
  <blockquote>
    <p>EXCEPTION: No provider for String! (SwNavItemCmp -> String)</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export interface SwNavItemModel {
   name: string;
    route: string;
    children?: Array&lt;SwNavItemModel&gt;;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {SwNavItemModel} from '../models/sw_nav_item_model';
  
  export const NAV_ITEMS_DATA: Array&lt;SwNavItemModel&gt; = [
    { name: 'Home',
     route: '/Home' },
    { name: 'Offer',
      route: '/Offer',
     children: [
        { name: 'Prices',
         route: '/Prices' },
        { name: 'Samples',
          route: '/Samples' }
      ]
    },
    { name: 'About',
      route: '/About',
      children: [
        { name: 'Us',
          route: '/Us' },
        { name: 'Projects',
          route: '/Projects' },
        { name: 'Skills',
          route: '/Skills' }
      ]
    },
    { name: 'Contact',
      route: '/Contact' }
  ];</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Injectable} from 'angular2/core';
  import {NAV_ITEMS_DATA} from '../data/mock_nav_data';
  
  
  @Injectable()
  export class NavService {
   getNavData() {
    return Promise.resolve(NAV_ITEMS_DATA);
   }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component, OnInit} from 'angular2/core';
  import {
  ROUTER_DIRECTIVES
  } from 'angular2/router';
  import {SwNavItemCmp} from './sw-nav-item/sw_nav_item';
  import {SwNavItemModel} from '../../../models/sw_nav_item_model';
  import {NavService} from '../../../services/nav_service';
  
  @Component({
    selector: 'sw-nav',
    templateUrl: './components/shared/sw-nav/sw_nav.html',
    styleUrls: ['./components/shared/sw-nav/sw_nav.css'],
    providers: [NavService],
    directives: [ROUTER_DIRECTIVES, SwNavItemCmp]
  })
  export class SwNavCmp implements OnInit {
    public items: Array&lt;SwNavItemCmp&gt; = [];
  
    constructor(private _navService: NavService) {
    }
  
    ngOnInit(): any {
      this.getNavData();
    }
  
    getNavData() {
        this._navService.getNavData().then((navData: Array&lt;SwNavItemModel&gt;) =&gt; {
            console.log(navData);
            console.log(Object.keys(navData));
            this.addItems(navData);
        });
    }
  
    addItem(name: string, route: string, children?: Array&lt;SwNavItemModel&gt;) {
      console.log();
      console.log('name: ' + name);
      console.log('route: ' + route);
      console.log('children: ' + children);
      if(children) {
        let childrenItems: Array&lt;SwNavItemCmp&gt; = [];
        console.log('childrenItems: ' + childrenItems);
        children.forEach((child) =&gt; {
          console.log('child: ' + child);
          childrenItems.push(new SwNavItemCmp(child.name, child.route, null));
          console.log('childrenItems: ' + childrenItems);
        });
        this.items.push(new SwNavItemCmp(name, route, childrenItems));
        console.log('Items: ' + this.items);
      } else {
        this.items.push(new SwNavItemCmp(name, route, null));
        console.log('Items: ' + this.items);
      }
    }
  
    addItems(itemsArray: Array&lt;SwNavItemModel&gt;) {
      console.log('ItemsArray: ' + itemsArray);
      itemsArray.forEach((item) =&gt; {
        console.log('item: ' + item);
        item.children ? this.addItem(item.name, item.route, item.children) : this.addItem(item.name, item.route, null);
      });
      console.log('Items: ' + this.items);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component, Input} from 'angular2/core';
  import {ROUTER_DIRECTIVES} from 'angular2/router';
  
  
  @Component({
    selector: 'sw-nav-item',
    templateUrl: './components/shared/sw-nav/sw-nav-item/sw_nav_item.html',
    styleUrls: ['./components/shared/sw-nav/sw-nav-item/sw_nav_item.css'],
    directives: [ROUTER_DIRECTIVES]
  })
  export class SwNavItemCmp {
   @Input() items: Array&lt;SwNavItemCmp&gt;;
    name: string;
    route: string;
    children: Array&lt;SwNavItemCmp&gt; = [];
    constructor(name: string, route: string, children?: Array&lt;SwNavItemCmp&gt;) {
      this.name = name;
      this.route = route;
      this.children = children;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>constructor(name: string, route: string, children?: Array) {...
  
  throw error TS2314: Generic type 'Array&lt;T&gt;' requires 1 type argument(s).
  </code></pre>
  
  <p>//////////////////////////////////////////////////////////////</p>
  
  <p>Now I have this:</p>
  
  <p>sw_nav.ts</p>
  
  <pre><code>...
  export class SwNavCmp implements OnInit {
    public items: Array&lt;SwNavItemCmp&gt; = [];
    ...
  }
  </code></pre>
  
  <p>sw_nav.html</p>
  
  <pre><code>    &lt;nav&gt;
      &lt;ul class="main-menu"&gt;
          &lt;li *ngFor="#item of items"&gt;
              &lt;sw-nav-item [items]="item.children"&gt;&lt;/sw-nav-item&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>questions:
  -Should I pass whole item insted of item.children?</p>
  
  <p>sw_nav_item.ts</p>
  
  <pre><code>import {Component, Input, Inject, Injectable} from 'angular2/core';
  import {ROUTER_DIRECTIVES} from 'angular2/router';
  
  @Component({
    selector: 'sw-nav-item',
    templateUrl: './components/shared/sw-nav/sw-nav-item/sw_nav_item.html',
    styleUrls: ['./components/shared/sw-nav/sw-nav-item/sw_nav_item.css'],
    directives: [ROUTER_DIRECTIVES]
  })
  @Injectable()
  export class SwNavItemCmp {
    @Input() items: Array&lt;SwNavItemCmp&gt;;
  
    name: string;
    route: string;
    children: Array&lt;SwNavItemCmp&gt;;
  
    constructor(name, route, @Inject(SwNavItemCmp) children: Array&lt;SwNavItemCmp&gt;) {
      this.name = name;
      this.route = route;
      this.children = children;
    }
  }
  </code></pre>
  
  <p>questions:
  -How should constructor looks like? I think it's invalid.
  -How to pass data from input to constructor?
  -Should I use <code>Injector.resolveAndCreateChild()</code> to assing children items?</p>
  
  <p>sw-nav-item.html</p>
  
  <p>???</p>
  
  <p>questions:
  -How to render it recursive?
  I want to render all sw-nav-item be itself.</p>
  
  <p>And main questions:
   -Where should I put var injector = Injector.resolveAndCreate(...
   provide(...), and how should it looks like?
   -If I have wrong structure or concept. How to do it right way? I mean recursive components creation and rendreing.</p>