实现Angular Calendar时遇CSS问题，请求技术协助

这问题我之前踩过坑！核心根源是你加载了Bootstrap的.less源码文件而非编译后的CSS文件，加上浏览器同源策略限制，才引发了后续一系列问题。下面是具体的解决步骤：

• 替换错误的样式表引用
  你当前引用的是https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/less/normalize.less，这是Less源码文件，CDN提供的这类文件通常会被浏览器限制跨域访问其样式规则。直接换成Bootstrap 3.3.7编译好的完整CSS文件即可：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  

  不需要单独引用normalize.less，因为Bootstrap的CSS已经包含了normalize的重置样式。

• 理解错误触发逻辑
  浏览器的同源策略会阻止JavaScript访问跨域CSS样式表的cssRules属性，而你使用的日期选择器组件（依赖ng-template）大概率会尝试读取样式表规则来做界面适配，这个跨域访问被拦截后，就抛出了ERROR DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet错误，进而导致ng-template相关的渲染逻辑异常。

• 本地项目的最优方案（如果适用）
  如果你是在本地前端项目中开发，建议通过包管理器安装Bootstrap，避免CDN跨域风险：

  1. 安装指定版本：

     npm install bootstrap@3.3.7 --save
     

  2. 在项目的主样式文件或入口HTML中引入本地编译好的CSS：

     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     

替换完样式表后，刷新页面测试日期输入框，应该不会再出现错误，ng-template的功能也能恢复正常了。

内容的提问来源于stack exchange，提问作者Pinko Yellow Facesm