错误 TS2304：将 ng-bootstrap 添加到 Angular2 TypeScript 快速入门时找不到名称 'NGB_PRECOMPILE'

Question

我正在尝试按照 https://ng-bootstrap.github.io/#/getting-started 中的说明将 ng-bootstrap 添加到 Angular2 的 TypeScript 快速入门中。当我执行 npm start 时，它给我错误 TS2304 找不到名称 '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);

和 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

您是否将其添加到您的 systemjs.config.js 文件中？

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

Answer 2

我编写的代码遵循网站上的分步说明：https://github.com/ng-bootstrap/ng-bootstrap。但是，底部列出的部分显示了组件作为一个整体应该是什么样子，它在导入中列出了 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' 的错误。但是，我仍然无法在应用程序中运行 bootstrap。

错误 TS2304：将 ng-bootstrap 添加到 Angular2 TypeScript 快速入门时找不到名称 'NGB_PRECOMPILE'

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

typescript

ng-bootstrap

angular