Angular5中ngx-bootstrap的BsDatepicker在子组件中无法显示

我之前在Angular 5项目里集成ngx-bootstrap的bsDatepicker时，也碰到过完全一样的情况——只有开发警告，没有报错，但日期选择器就是不渲染。那个警告只是官方提示该模块还在迭代、可能存在破坏性变更，和你遇到的不显示问题无关，下面给你几个亲测有效的排查和解决步骤：

• 匹配正确的ngx-bootstrap版本
  Angular 5只兼容ngx-bootstrap的2.x版本，如果你装了更高版本（比如3.x及以上），会因为版本不兼容导致组件无法正常初始化。执行下面的命令安装适配版本：

  npm install ngx-bootstrap@2 --save
  

• 导入必要的依赖模块
  除了BsDatepickerModule，bsDatepicker还依赖Angular的动画模块。打开app.module.ts，补充导入BrowserAnimationsModule并正确初始化日期选择器模块：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
  
  @NgModule({
    imports: [
      // ...其他已导入的模块
      BrowserAnimationsModule,
      BsDatepickerModule.forRoot()
    ]
  })
  export class AppModule { }
  

  注意一定要调用forRoot()方法，否则模块无法正确初始化全局配置。

• 检查模板使用是否规范
  确保模板中的输入框正确绑定了bsDatepicker指令，建议同时绑定ngModel（即使暂时不需要双向绑定）：

  <input type="text" bsDatepicker [(ngModel)]="selectedDate" placeholder="选择日期">
  

  另外检查父元素是否有display: none、visibility: hidden这类隐藏样式，避免日期选择器容器被意外遮挡。

• 验证CSS资源是否加载成功
  打开浏览器开发者工具的「网络」面板，检查你添加的CDN CSS是否成功加载。如果加载失败，可以换成本地导入：在angular-cli.json（Angular 5使用的配置文件）的styles数组里添加：

  "styles": [
    // ...其他样式
    "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
  ]
  

• 清除缓存重启开发服务
  有时候Angular的构建缓存会导致模块未正确加载，执行以下操作强制刷新：

  ng serve --no-cache
  

  或者直接删除node_modules和dist文件夹，重新执行npm install和ng serve。

内容的提问来源于stack exchange，提问作者rufatZZ