エラーTS2304：ng-bootstrapをTypeScriptのAngular2クイックスタートに追加すると名前が見つかりません

Question

Angular2のTypeScriptのクイックスタートにng-bootstrapを追加しようとしています（https://ng-bootstrap.github.io/#/getting-started）。 npmを起動すると、TS2304が「NGB_PRECOMPILE」という名前を見つけることができないというエラーが表示されます。

import { Component } from '@angular/core'; 
import {NGB_DIRECTIVES} from '@ng-bootstrap/ng-bootstrap'; 
import { TasksComponent } from './tasks.component' 

@Component({ 
    selector: 'my-app', 
    directives: [ TasksComponent, NGB_DIRECTIVES ], 
    precompile: [ NGB_PRECOMPILE ], 
    template: `<h1 class="header">{{title}}</h1> 
     <tasks></tasks>`, 
    styles: [` 
     .header { 
      background: #999999; 
      border: 2px solid #444444; 
     } 
    `] 
}) 
export class AppComponent { 
    title = 'To Do List - Alaska'; 
} 

main.ts package.sonで

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './app.component'; 
bootstrap(AppComponent); 

と依存関係

"dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.2", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.4", 
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.0", 
    "angular2-in-memory-web-api": "0.0.14", 
    "bootstrap": "^3.3.6", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.8.10", 
    "typings": "^1.0.4", 
    "canonical-path": "0.0.2", 
    "http-server": "^0.9.0", 
    "tslint": "^3.7.4", 
    "lodash": "^4.11.1", 
    "jasmine-core": "~2.4.1", 
    "karma": "^0.13.22", 
    "karma-chrome-launcher": "^0.2.3", 
    "karma-cli": "^0.1.2", 
    "karma-htmlfile-reporter": "^0.2.2", 
    "karma-jasmine": "^0.3.8", 
    "protractor": "^3.3.0", 
    "rimraf": "^2.5.2" 
    } 

Answer 1

私が書いたコードは、サイト上の手順に従います。ただし、下部に表示されているセクションは、コンポーネント全体の外観を示し、NGB_DIRECTIVESとNGB_PRECOMPILEの両方をステップバイステップの手順ではないインポートに一覧表示します。これは完全にコードを読んでいない私の間違いでした。

import {Component} from '@angular/core'; 
import {NGB_DIRECTIVES, NGB_PRECOMPILE} from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: 'app', 
    directives: [ NGB_DIRECTIVES ], 
    precompile: [ NGB_PRECOMPILE ], 
    templateUrl: './app.html', 
}) 
export class App { 
    ... 
} 

これは、TS2304が「NGB_PRECOMPILE」という名前を見つけることができないというエラーを修正します。しかし、私はまだアプリケーションで働いているブートストラップを得ることができません。

Answer 2

app.component.tsは、あなたのsystemjs.config.jsファイルにそれを追加しましたか？ https://github.com/ng-bootstrap/ng-bootstrap：

//map tells the System loader where to look for things 
    var map = { 
    ... 
    '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap' 
}; 

    //packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
...  
'@ng-bootstrap/ng-bootstrap': { defaultExtension: 'js', main: 'index.js' } 
    };