Angularjs 无法将angular datepicker导入我的应用程序

我正在尝试将angular ui引导日期选择器导入到我的应用程序中，但我不确定如何做到这一点

我正在使用ES6，这就是我所拥有的：

map/src/app.js

import angular from 'angular';
import timeCtrl from './time.controller';
import timeComp from '../../../components/angular-components/time.component.js';
import mapComp from '../../../components/angular-components/map.component.js';
import mapHeaderComp from '../../../components/angular-components/map-header.component.js';
import mapViewstate from '../../../components/angular-components/map-viewstate.component.js';

export default angular.module('mymap', [])
  .component('ppmapHeader', mapHeaderComp)
  .component('ppmapViewstate', mapViewstate)
  .component('pptime', timeComp)
  .component('ppmap', mapComp)
  .controller('app', timeCtrl)

组件/角度组件/map.component.js

  export default {
    bindings: {
      ctrl: "<"
    },
    template: `
    <div>
      <div style="position: relative; height: 750px">
          <pp-map-viewstate
             viewstate="$ctrl.ctrl.viewstate"
             on-viewstate-change="$ctrl.ctrl.onViewstateChange(type, args)">
          </pp-map-viewstate>
      </div>
    </div>
    `
   }

function headerCtrl () {
  const self = this;

self.$onInit = () => {
  self.datePicker = {
    opened: false
  };

  self.targetDate = null;
  self.dateOptions = {
    showWeeks: 'false',
    formatYear: 'yyyy',
    startingDay: 1,
    altInputFormats : ['d!/M!/yyyy','dd/MM/yyyy']
  };

  self.openDatePicker = function() {
    self.datePicker.opened = true;
  };

  self.formats = ['dd, MMMM yyyy'];
  self.format = self.formats[0];

  self.uiConfig = {
    calendar:{
      firstDay: 1,
      timeFormat: 'HH:mm',
      dateFormat: 'ddmm',
      displayEventEnd: true
    }
   };

  self.changeDuration = () => {
    self.onDurationChange({
      duration: self.duration,
      zoom: self.zoom
    })
  }
}
}

export default {
  bindings: {
   duration: "<",
   zoom: "<",
   onDurationChange: "&"
  },
  controller: headerCtrl,
  template: `
  <div class="pp-header-container">
    <div class="pp-sch-header-item-input-label"><span class="pp-sch-label">Date</span></div>
    <input class="map-header pp-sch-header-item"
         type="text"
         uib-datepicker-popup="{{$ctrl.format}}"
         ng-model="$ctrl.targetDate"
         ng-click="$ctrl.openDatePicker()"
         is-open="$ctrl.datePicker.opened"
         datepicker-options="$ctrl.dateOptions"
         show-button-bar="false"
         ng-required="false"
         close-text="Close" alt-input-formats="altInputFormats"
         ng-change="$ctrl.gotoDate()" readonly />
    <div class="pp-sch-header-item-input-label"><span class="pp-sch-label">Zoom</span></div>
    <div class="map-header pp-sch-header-item">
      <select ng-model="$ctrl.zoom" ng-change="$ctrl.changeDuration()">
          <option value="0">1</option>
          <option value="1">2</option>
      </select>
    </div>
    <div class="pp-sch-header-item-input-label"><span class="pp-sch-label">Duration</span></div>
    <div class="map-header pp-sch-header-item">
    <select class="pp-sch-filter-container-col-1"  ng-model="$ctrl.duration" ng-change="$ctrl.changeDuration()">
      <option value="0">Day</option>
      <option value="1">1 week</option>
    </select>
  </div>
  </div>
  `
}

导出默认值{
绑定：{
ctrl:“您需要从节点\模块/dist文件夹导入模板版本为（ui-bootstrap-tpls-2.5.0.min.js）的ui引导

然后你可以把它注入你的应用程序模块

angular.module('mymap', [ui.bootstrap])

您可以从node_modules/dist文件夹中获取。
您需要使用模板版本（ui-bootstrap-tpls-2.5.0.min.js）导入ui引导

然后你可以把它注入你的应用程序模块

angular.module('mymap', [ui.bootstrap])

您可以获得。
我终于解决了问题-我一点一点地设法让日历显示出来，但是CSS丢失了，所以我必须安装：
css加载器
url加载器
文件加载器

我已将此导入添加到我的app.js中

import Bootstrap from '../../../node_modules/bootstrap/dist/css/bootstrap.css'

然后在heatmap-header.component.js文件中用div更改了日历中使用的输入元素，如下所示：

<div uib-datepicker 
         ng-model="$ctrl.targetDate" 
         is-open="$ctrl.datePicker.opened" 
         datepicker-options="dateOptions" 
         class="heatmap-header pp-sch-header-item"
         ng-required="true" 
         close-text="Close" 
         alt-input-formats="altInputFormats"
         ng-change="$ctrl.gotoDate()"/></div>

const webpack = require('webpack');
const path = require('path');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: ['whatwg-fetch', './heatmap/src/index.js'],
  output: {
  ...
  },
  devtool: 'cheap-eval-source-map',
  resolve: {
    alias: {
      constants: resolve('config/constants-develop')
    }
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader?cacheDirectory',
        include: [
          resolve( 'heatmap'),
          resolve( 'components'),
          resolve( 'node_modules/access-timeline-control')
        ]
      }, {
        ...
      }, {
        test: /\.css$/,
        loaders: 'style-loader!css-loader'
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
  plugins: [
  ...
  ]
};

希望这能帮助其他有类似问题的人-谢谢大家的帮助；）
我终于解决了这个问题-我一点一点地设法让日历显示出来，但是CSS丢失了，所以我不得不安装：
css加载器
url加载器
文件加载器

我已将此导入添加到我的app.js中

import Bootstrap from '../../../node_modules/bootstrap/dist/css/bootstrap.css'

然后在heatmap-header.component.js文件中用div更改了日历中使用的输入元素，如下所示：

<div uib-datepicker 
         ng-model="$ctrl.targetDate" 
         is-open="$ctrl.datePicker.opened" 
         datepicker-options="dateOptions" 
         class="heatmap-header pp-sch-header-item"
         ng-required="true" 
         close-text="Close" 
         alt-input-formats="altInputFormats"
         ng-change="$ctrl.gotoDate()"/></div>

const webpack = require('webpack');
const path = require('path');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: ['whatwg-fetch', './heatmap/src/index.js'],
  output: {
  ...
  },
  devtool: 'cheap-eval-source-map',
  resolve: {
    alias: {
      constants: resolve('config/constants-develop')
    }
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader?cacheDirectory',
        include: [
          resolve( 'heatmap'),
          resolve( 'components'),
          resolve( 'node_modules/access-timeline-control')
        ]
      }, {
        ...
      }, {
        test: /\.css$/,
        loaders: 'style-loader!css-loader'
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
  plugins: [
  ...
  ]
};

希望这将帮助其他有类似问题的人-感谢所有人的帮助；）
我已经按照你说的做了，或者至少尝试了，因为即使没有错误，它也不起作用-我已经在map-header.component.js导入angularUIBootstrap从“AngularUI bootstrap”导入angularUIBootstrap；从“angul”导入angularUIBootstrapar'；angular.module（'PeoplePlanner热图'，[angularUIBootstrap]）；我还做错了什么？也许我需要导入datepicker？我希望看到类似的东西我已经按照你说的做了，或者至少尝试了，因为即使没有错误，它也不起作用-我已经在map-header.component.js import angularUIBootstrap的“angularUIBootstrap”顶部添加了这段代码；从“angular”导入angular；angular.module（'peopleplannerHeatmap'，[angularUIBootstrap]）；我还做错了什么？也许我需要导入日期选择器？我希望看到类似的情况