[英]NgbModule.forRoot() giving error "Property 'forRoot' does not exist on type 'typeof NgbModule'.ts"
I want to add Bootstrap modal to my Angular Project.我想将 Bootstrap 模式添加到我的 Angular 项目中。 So I installed ng bootstrap using "npm install --save @ng-bootstrap/ng-bootstrap" and then bootstrap using "npm install bootstrap@4.5.2".所以我使用“npm install --save @ng-bootstrap/ng-bootstrap”安装了ng bootstrap,然后使用“npm install bootstrap@4.5.2”进行引导。
When I add this sentence "NgbModule.forRoot()" under imports in app.module.ts it gives an error "Property 'forRoot' does not exist on type 'typeof NgbModule'."当我在 app.module.ts 中的导入下添加这句话“NgbModule.forRoot()”时,它给出了一个错误“属性 'forRoot' 在类型 'typeof NgbModule' 上不存在。”
I however tried to remove forRoot() and imported only NdbModule and ran my application.但是,我尝试删除 forRoot() 并仅导入 NdbModule 并运行我的应用程序。 But it gives the following error但它给出了以下错误
enter image description here在此处输入图片说明
When I searched online about how to remove the above error, the solution I got is to add forRoot().当我在网上搜索如何消除上述错误时,我得到的解决方案是添加forRoot()。 But it is giving error "Property 'forRoot' does not exist on type 'typeof NgbModule'."但它给出了错误“类型'typeof NgbModule'上不存在属性'forRoot'。”
app.module.ts: app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
login.component.ts:登录.component.ts:
import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
title = 'appBootstrap';
closeResult: string;
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
ngOnInit() {
}
}
login.component.html:登录.component.html:
<h1>Modal Popup Example</h1>
<button class="btn btn-lg btn-outline-primary" (click)="open(mymodal)">Open My Modal</button>
<ng-template #mymodal let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Bootstrap Modal</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a sample modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
</div>
</ng-template>
index.html:索引.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testproject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Angular Version: Angular CLI: 8.0.6 Node: 12.19.0 OS: win32 x64 Angular: 8.0.3 Angular 版本:Angular CLI:8.0.6 节点:12.19.0 操作系统:win32 x64 Angular:8.0.3
This is the first time I am posting a question in Stackoverflow.这是我第一次在 Stackoverflow 中发布问题。 Please suggest if I missed any details.如果我错过了任何细节,请提出建议。
Seems to be a compatibility issue between Angular, Bootstrap and NgBootstrap.似乎是 Angular、Bootstrap 和 NgBootstrap 之间的兼容性问题。 Please ensure you're using the correct dependencies as per NgBootstraps documentation请确保根据 NgBootstraps 文档使用正确的依赖项
I had the same issue while trying to install bootstrap for my angular project created using angular/cli我在尝试为使用 angular/cli 创建的 angular 项目安装引导程序时遇到了同样的问题
I followed the 'manual installation' method mentioned in https://ng-bootstrap.github.io/#/getting-started (Click on the link "Click here to hide detailed instructions" for step by step instructions)我遵循了https://ng-bootstrap.github.io/#/getting-started中提到的“手动安装”方法(单击链接“单击此处隐藏详细说明”以获取分步说明)
The main thing is checking the dependencies - ng bootstrap dependencies主要是检查依赖项 - ng bootstrap 依赖项
Explanation of what I did:我所做的解释:
As mentioned here( ng bootstrap dependencies ), for Angular 10, the dependencies are ng-bootstrap - 8.xx
and Bootstrap CSS - 4.5.0
正如这里提到的( ng bootstrap 依赖项),对于 Angular 10,依赖项是ng-bootstrap - 8.xx
和Bootstrap CSS - 4.5.0
npm install bootstrap@4.5.0 npm install @ng-bootstrap/ng-bootstrap@8.0.0
Note: Use --legacy-peer-deps
switch if you get dependency errors注意:如果出现依赖错误,请使用--legacy-peer-deps
开关
Since I was using SCSS, added the below line in src/styles.scss
由于我使用的是 SCSS,因此在src/styles.scss
添加了以下行
@import "~bootstrap/scss/bootstrap";
Add ng-localize添加 ng-localize
ng add @angular/localize
Regarding the NgbModule.forRoot()
, I can confirm that it is not required in newer versions of ng-bootstrap(I tried 8.0.0) as I have got bootstrap working in my angular project without it as shown below:关于NgbModule.forRoot()
,我可以确认在较新版本的 ng-bootstrap 中不需要它(我尝试了 8.0.0),因为我的 angular 项目中没有引导程序,如下所示:
file: app.module.ts文件:app.module.ts
import {NgbModule.NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations:[AppComponent], imports: [NgbModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.