ng-bootstrap指令未编译

时间:2018-01-25 08:58:41

标签: angular ng-bootstrap

您好我已经创建了一个带有角度cli的新角度(5.2)应用程序 我已经添加了ng-bootstrap(1.0.0-beta.9)和bootstrap(4.0.0)作为依赖。

这是我的package.json文件的缩写

  "dependencies": {
   "@angular/animations": "^5.2.0",
   "@angular/common": "^5.2.0",
   "@angular/compiler": "^5.2.0",
   "@angular/core": "^5.2.0",
   "@angular/forms": "^5.2.0",
   "@angular/http": "^5.2.0",
   "@angular/platform-browser": "^5.2.0",
   "@angular/platform-browser-dynamic": "^5.2.0",
   "@angular/router": "^5.2.0",
   "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
   "bootstrap": "^4.0.0",
   "core-js": "^2.4.1",
   "rxjs": "^5.5.6",
   "zone.js": "^0.8.19"
 }

在.angular-cli.json文件中我添加了这个

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js"
  ]

在我的根模块中我就是这个

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我的app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  currentRate = 8;
}

在我的app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ngb-rating [(rate)]="currentRate"></ngb-rating>

指令ngb-rating没有显示任何内容

你能帮我吗?

由于

0 个答案:

没有答案