2016-07-27 62 views
0

我正在嘗試按照https://ng-bootstrap.github.io/#/getting-started上的說明將ng-bootstrap添加到Angular2的TypeScript快速入門中。當我做npm啓動時,它給了我錯誤TS2304找不到名稱'NGB_PRECOMPILE'。錯誤TS2304:將ng-bootstrap添加到TypeScript的Angular2快速入門時找不到名稱'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" 
    } 

回答

1

我寫的代碼如下網站上的一步一步的指示: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'。但是,我仍然無法在應用程序中獲得引導程序。

0

你將它添加到您的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' } 
    }; 
+1

感謝您的回覆。我沒有把代碼放到那個文件中,但是我的錯誤在我的答案中得到了澄清。當你迴應時,我再次看着它,所以謝謝你的迴應,因爲我仍然無法獲得bootstrap的工作,這可能會有所幫助。 – ryegrammer

相關問題