在 Angular 6 中导入“ngx-bootstrap/datepicker”模块时出现错误

Posted

技术标签:

【中文标题】在 Angular 6 中导入“ngx-bootstrap/datepicker”模块时出现错误【英文标题】:I'm getting an error while importing the "ngx-bootstrap/datepicker" module in Angular 6 【发布时间】:2019-02-12 14:22:24 【问题描述】:

我正在尝试在我的 Angular 应用程序中导入 ngx Bootstrap 日期选择器 为此,我遵循了以下步骤

    到 npm 安装 ngx-bootstrap

    npm install ngx-bootstrap --save

    已安装引导程序 3

    npm install bootstrap@3 --save

    在 angular-cli.json 文件中,并在样式属性中指定 Bootstrap 样式表 (bootstrap.min.css) 的路径

    “样式”:[ “../node_modules/bootstrap/dist/css/bootstrap.min.css”, “样式.css” ]

    在 Angular 中使用 ngx-bootstrap 日期选择器:

    在 app.module.ts 文件中,导入 BsDatepickerModule

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

    html中使用

    bsDatepicker

    class="表单控制" />

      在 .angular-cli.json 文件中包含对 bs-datepicker.css 文件的引用。

      “样式”:[ “../node_modules/bootstrap/dist/css/bootstrap.min.css”, "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", “样式.css” ]

但我在运行 Angular 应用程序时遇到错误

ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css

../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css ./src/styles.css

Module not found: Error: Can't resolve '/Users/user/Projects/node_modules/bootstrap/dist/css/bootstrap.min.css'

在 '/Users/user/Projects/CRUD' 错误中多 ../node_modules/bootstrap/dist/css/bootstrap.min.css ../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css ./src/styles.css

Module not found: Error: Can't resolve '/Users/user/Projects/node_modules/ngx-bootstrap/datepicker/bs-datepicker.css'

在'/Users/user/Projects/CRUD'中

我将代码的所有信息放在下面-:

我将 angular.json 文件代码放在下面


  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": 
    "CRUD": 
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": ,
      "architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist/CRUD",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "../node_modules/bootstrap/dist/css/bootstrap.min.css",
              "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "src/styles.css"
            ],
            "scripts": []
          ,
          "configurations": 
            "production": 
              "fileReplacements": [
                
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            
          
        ,
        "serve": 
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": 
            "browserTarget": "CRUD:build"
          ,
          "configurations": 
            "production": 
              "browserTarget": "CRUD:build:production"
            
          
        ,
        "extract-i18n": 
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": 
            "browserTarget": "CRUD:build"
          
        ,
        "test": 
          "builder": "@angular-devkit/build-angular:karma",
          "options": 
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          
        ,
        "lint": 
          "builder": "@angular-devkit/build-angular:tslint",
          "options": 
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          
        
      
    ,
    "CRUD-e2e": 
      "root": "e2e/",
      "projectType": "application",
      "architect": 
        "e2e": 
          "builder": "@angular-devkit/build-angular:protractor",
          "options": 
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "CRUD:serve"
          ,
          "configurations": 
            "production": 
              "devServerTarget": "CRUD:serve:production"
            
          
        ,
        "lint": 
          "builder": "@angular-devkit/build-angular:tslint",
          "options": 
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          
        
      
    
  ,
  "defaultProject": "CRUD"

Package.json 代码 - :


  "name": "crud",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "ngx-bootstrap": "^3.0.1",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  ,
  "devDependencies": 
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  

App.module.ts 代码

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  RouterModule , Routes  from '@angular/router';
import  FormsModule  from '@angular/forms';


import  AppComponent  from './app.component';

import  ListEmployeesComponent  from './employees/list-employees.component';
import  CreateEmployeeComponent  from './employees/create-employee.component';


import  BsDatepickerModule  from 'ngx-bootstrap/datepicker';

const appRoutes: Routes = [
   path: 'list', component: ListEmployeesComponent ,
   path: 'create', component: CreateEmployeeComponent ,
   path: '', redirectTo: '/list', pathMatch: 'full' 
];

@NgModule(
  declarations: [
    AppComponent,
    ListEmployeesComponent,
    CreateEmployeeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,
    BsDatepickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

【问题讨论】:

您从错误的位置导入 css 文件。编辑angular.json文件like(删除../:"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.css" ], 感谢@suhailvs .. 【参考方案1】:

更正导入 css 文件位置后,我的错误得到修复。我编辑了 angular.json 文件,如下所示

(remove ../: "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.css" ],

【讨论】:

【参考方案2】:

你可以试试这个命令:

ng add ngx-bootstrap 

【讨论】:

请改进格式并添加一些解释为什么这个命令有用:)

以上是关于在 Angular 6 中导入“ngx-bootstrap/datepicker”模块时出现错误的主要内容,如果未能解决你的问题,请参考以下文章

在 Angular 6 中导入“ngx-bootstrap/datepicker”模块时出现错误

找不到在 Angular 中导入 Firebase 身份验证

在 Angular 项目中导入 2 个同名的 JavaScript 函数

在 index.html 中导入 css 和在 Angular 5 中导入 styleUrls 的区别

如何使用 Angular cli 在 Angular 2 中导入电子

在打字稿Angular 5中导入json文件