ng-bootstrap 初始安装不工作
ng-bootstrap not working on initial install
我刚刚安装了 npm bootstrap4、font awesome 和 ng-bootstrap，我正在尝试一些 ng-bootstrap 演示代码。没有任何效果。
第一次 posting 并且对 Angular 世界还很陌生。如果我没有以正确的格式 post 或者以错误的方式提问 'area'，请放轻松 'area'。
我只是想了解 ng-bootstrap 的用法。
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { CustomersModule } from './customers/customers.module';
import { WelcomeComponent } from './welcome/welcome.component';
@NgModule({
declarations: [
AppComponent,
WelcomeComponent
],
imports: [
BrowserModule,
HttpClientModule,
AngularFontAwesomeModule,
RouterModule.forRoot([
{ path: 'home', component: WelcomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: '**', redirectTo: 'home', pathMatch: 'full'}
]),
CustomersModule
],
bootstrap: [`enter code here`AppComponent, WelcomeComponent]
})
export class AppModule { }
app.main.html:
<div class="container">
<ngb-tabset>
<ngb-tab title="Bacon">
<ng-template ngbTabContent>
<p class="mt-4">Content for tab 1.
<button type="button" class="btn btn-secondary" placement="bottom" ngbPopover="A popover in tab 1" popoverTitle="Bacon is good">
Click me
</button>
</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Lettuce">
<ng-template ngbTabContent>
<p>Content for tab 2</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Tomatoes">
<ng-template ngbTabContent>
<p>Content for tab 3</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'pm-root',
styleUrls: ["./shared/app.css"],
templateUrl: './app.main.html'
})
export class AppComponent {
pageTitle: string = 'MeLo 2';
}
angular-cli:
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"api"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "pm",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js"
]
}
package.json:
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"angular-font-awesome": "^2.3.7",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"popper.js": "^1.12.3",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
},
错误：
compiler.es5.js:1694 Uncaught Error: Template parse errors:
Can't bind to 'dismissible' since it isn't a known property of 'ngb-alert'.
1. If 'ngb-alert' is an Angular component and it has 'dismissible' input, then verify that it is part of this module.
2. If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<div class="jumbotron">
<div class="container">
<ngb-alert type="success" [ERROR ->][dismissible]="false">
Bootstrap is working!
</ngb-alert>
"): ng:///AppModule/AppComponent.html@20:30
'ngb-alert' is not a known element:
1. If 'ngb-alert' is an Angular component, then verify that it is part of this module.
2. If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<div class="jumbotron">
<div class="container">
[ERROR ->]<ngb-alert type="success" [dismissible]="false">
Bootstrap is working!
</ngb-alert>
"): ng:///AppModule/AppComponent.html@20:4
Can't bind to 'value' since it isn't a known property of 'ngb-progressbar'.
1. If 'ngb-progressbar' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ngb-progressbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<p>
A progress bar:
<ngb-progressbar showValue="true" type="success" [ERROR ->][value]="65">
</ngb-progressbar>
</p>
"): ng:///AppModule/AppComponent.html@34:53
'ngb-progressbar' is not a known element:
1. If 'ngb-progressbar' is an Angular component, then verify that it is part of this module.
2. If 'ngb-progressbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<p>
A progress bar:
[ERROR ->]<ngb-progressbar showValue="true" type="success" [value]="65">
</ngb-progressbar>
</p>
"): ng:///AppModule/AppComponent.html@34:4
'ngb-tab' is not a known element:
1. If 'ngb-tab' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<div class="container">
<ngb-tabset>
[ERROR ->]<ngb-tab title="Bacon">
<ng-template ngbTabContent>
<p class="mt-4">Content for tab 1"): ng:///AppModule/AppComponent.html@41:4
'ngb-tab' is not a known element:
1. If 'ngb-tab' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ng-template>
</ngb-tab>
[ERROR ->]<ngb-tab title="Lettuce">
<ng-template ngbTabContent>
<p>Content for tab 2</p>
"): ng:///AppModule/AppComponent.html@50:4
'ngb-tab' is not a known element:
1. If 'ngb-tab' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ng-template>
</ngb-tab>
[ERROR ->]<ngb-tab title="Tomatoes">
<ng-template ngbTabContent>
<p>Content for tab 3</p>
"): ng:///AppModule/AppComponent.html@55:4
'ngb-tabset' is not a known element:
1. If 'ngb-tabset' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tabset' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<div class="container">
[ERROR ->]<ngb-tabset>
<ngb-tab title="Bacon">
<ng-template ngbTabContent>
"): ng:///AppModule/AppComponent.html@40:2
at syntaxError (compiler.es5.js:1694)
at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12791)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:26994)
at compiler.es5.js:26913
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:26913)
at compiler.es5.js:26800
at Object.then (compiler.es5.js:1683)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26799)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26728)
仔细阅读installation guide。
如果你的组件在根模块中被引用你必须写在 root.module.ts
imports: [NgbModule.forRoot(), ...],
如果你的组件在其他模块中被引用你必须写在module.module.ts
imports: [NgbModule, ...]
我刚刚安装了 npm bootstrap4、font awesome 和 ng-bootstrap，我正在尝试一些 ng-bootstrap 演示代码。没有任何效果。
第一次 posting 并且对 Angular 世界还很陌生。如果我没有以正确的格式 post 或者以错误的方式提问 'area'，请放轻松 'area'。
我只是想了解 ng-bootstrap 的用法。
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { CustomersModule } from './customers/customers.module';
import { WelcomeComponent } from './welcome/welcome.component';
@NgModule({
declarations: [
AppComponent,
WelcomeComponent
],
imports: [
BrowserModule,
HttpClientModule,
AngularFontAwesomeModule,
RouterModule.forRoot([
{ path: 'home', component: WelcomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: '**', redirectTo: 'home', pathMatch: 'full'}
]),
CustomersModule
],
bootstrap: [`enter code here`AppComponent, WelcomeComponent]
})
export class AppModule { }
app.main.html:
<div class="container">
<ngb-tabset>
<ngb-tab title="Bacon">
<ng-template ngbTabContent>
<p class="mt-4">Content for tab 1.
<button type="button" class="btn btn-secondary" placement="bottom" ngbPopover="A popover in tab 1" popoverTitle="Bacon is good">
Click me
</button>
</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Lettuce">
<ng-template ngbTabContent>
<p>Content for tab 2</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Tomatoes">
<ng-template ngbTabContent>
<p>Content for tab 3</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'pm-root',
styleUrls: ["./shared/app.css"],
templateUrl: './app.main.html'
})
export class AppComponent {
pageTitle: string = 'MeLo 2';
}
angular-cli:
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"api"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "pm",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js"
]
}
package.json:
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"angular-font-awesome": "^2.3.7",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"popper.js": "^1.12.3",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
},
错误：
compiler.es5.js:1694 Uncaught Error: Template parse errors:
Can't bind to 'dismissible' since it isn't a known property of 'ngb-alert'.
1. If 'ngb-alert' is an Angular component and it has 'dismissible' input, then verify that it is part of this module.
2. If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<div class="jumbotron">
<div class="container">
<ngb-alert type="success" [ERROR ->][dismissible]="false">
Bootstrap is working!
</ngb-alert>
"): ng:///AppModule/AppComponent.html@20:30
'ngb-alert' is not a known element:
1. If 'ngb-alert' is an Angular component, then verify that it is part of this module.
2. If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<div class="jumbotron">
<div class="container">
[ERROR ->]<ngb-alert type="success" [dismissible]="false">
Bootstrap is working!
</ngb-alert>
"): ng:///AppModule/AppComponent.html@20:4
Can't bind to 'value' since it isn't a known property of 'ngb-progressbar'.
1. If 'ngb-progressbar' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ngb-progressbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<p>
A progress bar:
<ngb-progressbar showValue="true" type="success" [ERROR ->][value]="65">
</ngb-progressbar>
</p>
"): ng:///AppModule/AppComponent.html@34:53
'ngb-progressbar' is not a known element:
1. If 'ngb-progressbar' is an Angular component, then verify that it is part of this module.
2. If 'ngb-progressbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<p>
A progress bar:
[ERROR ->]<ngb-progressbar showValue="true" type="success" [value]="65">
</ngb-progressbar>
</p>
"): ng:///AppModule/AppComponent.html@34:4
'ngb-tab' is not a known element:
1. If 'ngb-tab' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<div class="container">
<ngb-tabset>
[ERROR ->]<ngb-tab title="Bacon">
<ng-template ngbTabContent>
<p class="mt-4">Content for tab 1"): ng:///AppModule/AppComponent.html@41:4
'ngb-tab' is not a known element:
1. If 'ngb-tab' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ng-template>
</ngb-tab>
[ERROR ->]<ngb-tab title="Lettuce">
<ng-template ngbTabContent>
<p>Content for tab 2</p>
"): ng:///AppModule/AppComponent.html@50:4
'ngb-tab' is not a known element:
1. If 'ngb-tab' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ng-template>
</ngb-tab>
[ERROR ->]<ngb-tab title="Tomatoes">
<ng-template ngbTabContent>
<p>Content for tab 3</p>
"): ng:///AppModule/AppComponent.html@55:4
'ngb-tabset' is not a known element:
1. If 'ngb-tabset' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tabset' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<div class="container">
[ERROR ->]<ngb-tabset>
<ngb-tab title="Bacon">
<ng-template ngbTabContent>
"): ng:///AppModule/AppComponent.html@40:2
at syntaxError (compiler.es5.js:1694)
at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12791)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:26994)
at compiler.es5.js:26913
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:26913)
at compiler.es5.js:26800
at Object.then (compiler.es5.js:1683)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26799)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26728)
仔细阅读installation guide。 如果你的组件在根模块中被引用你必须写在 root.module.ts
imports: [NgbModule.forRoot(), ...],
如果你的组件在其他模块中被引用你必须写在module.module.ts
imports: [NgbModule, ...]