error TS2304: Cannot find name 'NGB_PRECOMPILE' when adding ng-bootstrap to Angular2 quick start for TypeScript

Question

I am trying to add ng-bootstrap to Angular2's quick start for TypeScript by following the instructions at https://ng-bootstrap.github.io/#/getting-started . When I do npm start it gives me the error TS2304 cannot find name 'NGB_PRECOMPILE'.

app.component.ts

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

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

and dependencies in package.son

"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

The code I wrote follows the step-by-step instructions on the site: https://github.com/ng-bootstrap/ng-bootstrap . However, the section listed at the bottom shows what the component should look like as a whole and it lists both NGB_DIRECTIVES and NGB_PRECOMPILE in the import where the step-by-step instructions do not. This was my mistake of not having read the code entirely.

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 {
    ...
}

This fixes the error TS2304 cannot find name 'NGB_PRECOMPILE'. However, I still cannot get bootstrap working in the application.

Answer 2

Did you add it to your systemjs.config.js file?

  //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' }
  };