【问题标题】:Cannot find module 'ngx-bootstrap'找不到模块“ngx-bootstrap”
【发布时间】:2020-07-19 20:56:36
【问题描述】:

我在使用 ngx-bootstrap 的应用程序中遇到问题,除非您指定路径,否则它现在无法检测到模块

例如:

import { BsModalService, BsModalRef } from 'ngx-bootstrap';

产生“找不到模块'ngx-bootstrap'”。

删除参考并检查快速修复只是将参考替换为:

import { BsModalService, BsModalRef} from 'ngx-bootstrap/modal/public_api';

显然这并不理想,因为它们应该可以通过 ngx-bootstrap 获得而无需指定文件夹,而且我将不得不通过几十个组件并更改这些不必要的引用。以前有人遇到过这个问题吗?

我已经试过了:

  • npm install
  • npm update 以防最近的提交有更新
  • 删除 node_modules 文件夹并再次执行npm install
  • 自行重新安装 ngx-bootstrap - npm install ngx-bootstrap --save
  • npm cache clean
  • 我什至重新开始并将我的应用程序克隆到另一个位置,运行npm install,同样的事情发生了

昨天运行良好。我不确定我错过了什么。

更多信息:

Angular CLI: 9.0.2
Node: 12.16.1
OS: win32 x64
Angular: 9.0.1

package.json:

    "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular-devkit/build-angular": "^0.900.7",
    "@angular/animations": "9.0.1",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "9.0.1",
    "@angular/compiler": "9.0.1",
    "@angular/core": "9.0.1",
    "@angular/forms": "9.0.1",
    "@angular/platform-browser": "9.0.1",
    "@angular/platform-browser-dynamic": "9.0.1",
    "@angular/router": "9.0.1",
    "@auth0/angular-jwt": "^4.0.0",
    "@microsoft/signalr": "^3.1.3",
    "@ng-select/ng-select": "^3.7.3",
    "@ngx-progressbar/core": "^5.3.2",
    "@ngx-pwa/local-storage": "^9.0.3",
    "@types/date-fns": "^2.6.0",
    "angular-9-datatable": "^0.1.1",
    "angular-calendar": "^0.28.2",
    "angular-gauge": "^3.1.2",
    "angular-gridster2": "^9.0.1",
    "angular-resize-event": "^1.2.1",
    "bootstrap": "^4.4.1",
    "chartjs-plugin-annotation": "^0.5.7",
    "ckeditor4-angular": "^1.1.0",
    "core-js": "^3.6.4",
    "crypto-js": "^4.0.0",
    "echarts": "^4.7.0",
    "file-saver": "^2.0.2",
    "html2canvas": "^1.0.0-rc.5",
    "jspdf": "^1.5.3",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "ng-dynamic-component": "^6.1.0",
    "ng2-dragula": "^2.1.1",
    "ng4-charts": "^1.0.2",
    "ngx-bootstrap": "^5.3.2",
    "ngx-color": "^4.1.1",
    "ngx-echarts": "^4.2.2",
    "ngx-image-compress": "^8.0.4",
    "ngx-image-cropper": "^3.1.5",
    "ngx-infinite-scroll": "^8.0.1",
    "ngx-material-timepicker": "^5.5.1",
    "ngx-pagination": "^5.0.0",
    "ngx-swiper-wrapper": "^9.0.1",
    "ngx-toastr": "^12.0.1",
    "pluralize": "^8.0.0",
    "rxjs": "6.5.4",
    "rxjs-compat": "6.5.4",
    "time-ago-pipe": "^1.3.2",
    "tslib": "^1.10.0",
    "valid-url": "^1.0.9",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular/cli": "9.0.2",
    "@angular/compiler-cli": "9.0.1",
    "@angular/language-service": "9.0.1",
    "@types/echarts": "^4.4.4",
    "@types/file-saver": "^2.0.1",
    "@types/googlemaps": "^3.39.2",
    "@types/jasmine": "3.5.3",
    "@types/jasminewd2": "2.0.8",
    "@types/jspdf": "^1.3.3",
    "@types/node": "^13.9.8",
    "@types/pluralize": "0.0.29",
    "@types/valid-url": "^1.0.3",
    "codelyzer": "^5.2.2",
    "ie-shim": "^0.1.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.3",
    "node-sass": "^4.13.1",
    "protractor": "~5.4.3",
    "ts-node": "~8.6.2",
    "tslint": "~6.0.0",
    "typescript": "3.7.5",
    "webpack-bundle-analyzer": "^3.6.1"
  },

如果有人有任何想法,请告诉我

谢谢!

【问题讨论】:

    标签: node.js angular typescript npm ngx-bootstrap


    【解决方案1】:

    基于ngx-bootstrap documentationangular9 不支持这种导入。如果你想使用 BsModalServiceButtonsModule 等等,你必须将它们导入如下:

    // RECOMMENDED
    import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
    import { ButtonsModule } from 'ngx-bootstrap/buttons';
    

    而不是:

    // NOT RECOMMENDED
    import { BsModalService, BsModalRef , ButtonsModule } from 'ngx-bootstrap';
    

    【讨论】:

      【解决方案2】:

      我今天遇到了同样的问题,尝试从 Angular 9.0.2 更新到 Angular 9.1.0

      我猜是因为你的 package.json 中有:"ngx-bootstrap": "^5.3.2",所以 npm 正在使用最新版本在 ngx-bootrap 标签上:5.6.0。 (至少我今天的版本是这样)

      我已经解决了只是替换我的代码中的导入,从 'ngx-bootstrap''ngx-bootstrap/someBootstrapComponent'

      例如,我之前的导入是:

      import { BsModalRef, BsModalService } from 'ngx-bootstrap';
      

      我的新导入看起来像:

      import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
      

      我知道这不是一个理想的解决方案,但同时至少您可以正确编译您的应用程序。

      希望对你有帮助。

      最好的问候, 耶稣。

      【讨论】:

      • 谢谢耶稣。这很奇怪,因为我在一个开发团队中与其他 5 个使用同一个项目的人一起工作,而且他们中的任何一个都没有发生这种情况。我们大约一个月前升级了 Angular,所以不要认为它与任何类型的更新有关。很奇怪!如果一切都失败了,我将不得不更换所有的进口,但我可能会推迟,看看其他人是否有任何想法!谢谢!
      【解决方案3】:

      根据https://github.com/valor-software/ngx-bootstrap/issues/5753

      更新的文档:https://valor-software.com/ngx-bootstrap/#/modals

       // RECOMMENDED
      import { ModalModule } from 'ngx-bootstrap/modal';
      // NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
      import { ModalModule } from 'ngx-bootstrap';
      
      @NgModule({
        imports: [ModalModule.forRoot(),...]
      })
      export class AppModule(){}
      

      这是一个理想的解决方案,因为它是由 repo 的维护者记录的。

      【讨论】:

        【解决方案4】:

        所以看起来这可能是更高版本的 ngx-bootstrap 的问题。在我的 package.json 中,我将 "ngx-bootstrap": "^5.3.2" 替换为 "ngx-bootstrap": "5.3.2",然后运行 ​​npm install,它的构建没有任何问题。

        【讨论】:

          【解决方案5】:

          从 'ngx-bootstrap/modal' 导入 { ModalModule };

          这一定有效..简单的解决方案

          【讨论】:

            【解决方案6】:

            由于某种原因,之前运行的相同 package.json 现在不起作用。上面的建议就像一个魅力。 解决方法:去掉^。 “ngx-bootstrap”:“^5.3.2”到“ngx-bootstrap”:“5.3.2”

            【讨论】:

              【解决方案7】:

              我目前正在使用 Angular 9 和最新版本的 ngx-bootstrap。 我相信最新的实现是像这样在 app.module.ts 文件中导入 BsDatepickerModule

              app.module.ts 代码中的导入语句:

              import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
              import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
              

              在 app.module.ts 中导入:

                imports: [
              BrowserAnimationsModule,
              BsDatepickerModule.forRoot()
              

              ]

              组件代码:

              import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
              import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
              
              @Component({ selector: 'app-', templateUrl: './register.component.html', styleUrls: ['./register.component.css'],
              })
              export class RegisterComponent implements OnInit {
              
              
              bsConfig: Partial<BsDatepickerConfig>;
              
              
              
              constructor() {}
              
              ngOnInit() {
              
              this.bsConfig = Object.assign({}, { containerClass: 'theme-blue' });
              
              }
              }
              

              package.json

              "@angular/core": "~9.1.7", “引导程序”:“^4.5.0”, "ngx-bootstrap": "^5.6.1", “@angular/cli”:“~9.1.6”

              来自官方网站:

              用法

              从 '@angular/platform-b​​rowser/animations' 导入 { BrowserAnimationsModule };

              // 推荐

              从 'ngx-bootstrap/datepicker' 导入 { BsDatepickerModule };

              // 不推荐(Angular 9 不支持这种导入)

              从 'ngx-bootstrap' 导入 { BsDatepickerModule };

              @NgModule({

              进口:[

              BrowserAnimationsModule,
              
              BsDatepickerModule.forRoot(),
              
              ...
              

              ] })

              导出类 AppModule(){}

              https://valor-software.com/ngx-bootstrap/#/datepicker

              techjunkieblog.com

              【讨论】:

                猜你喜欢
                • 2019-04-26
                • 1970-01-01
                • 2020-10-05
                • 2021-10-06
                • 2020-09-22
                • 1970-01-01
                • 2019-07-18
                • 1970-01-01
                • 2020-11-02
                相关资源
                最近更新 更多