在 生产环境 模式angular5中未触发jquery点击事件

我在我的angular 5应用程序中使用jquery这个plugin . 我在左侧嵌套了手风琴菜单 . 当我在 development mode 中运行app时，菜单工作正常，它会按照预期的方式打开并关闭，但是当我通过运行命令在 生产环境 模式下运行应用程序时

ng build --prod

然后单击事件仅在打开菜单后触发，然后永远不会被触发（菜单保持打开状态） . 我使用angular cli在我的角应用程序中包含menu js脚本 . 什么可以解决这个问题 . 在此先感谢这是组件ts文件

import { Component, Inject, OnInit, AfterViewInit } from '@angular/core';
import * as $ from 'jquery'
declare var ace :any;
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html'
})

export class SidebarComponent {
currentDate:Date;
constructor( @Inject('Window') window: Window) { }
ngOnInit() {
$("#sidebar-collapse").on("click", function () {
  $('body').toggleClass('menumin');
});
this.currentDate=new Date();
 }
 ngAfterViewInit() {

ace.demo.init();

}
}

这是html文件

<div id="sidebar" class="sidebar responsive ace-save-state">

  <ul class="nav nav-list">
    <li class="productname">
      <a  class="mjms_nav">

        <span class="menu-text"> MJMS </span>
        <em>
         {{currentDate | date:'MMM-dd-yyyy'}}</em>
      </a>

      <b class="arrow"></b>
    </li>
    <li>
      <a [routerLink]="['/home/dashboard']">
        <i class="menu-icon fa fa-tachometer"></i>
        <span class="menu-text"> Dashboard </span>
      </a>

      <b class="arrow"></b>
    </li>

    <li routerLinkActive="open">
      <a href="#" class="dropdown-toggle">
        <i class="menu-icon fa fa-graduation-cap"></i>
        <span class="menu-text">
          Education Management
        </span>

        <b class="arrow fa fa-angle-down"></b>
      </a>

      <b class="arrow"></b>

      <ul class="submenu">
        <li class="open">
          <a href="#0" class="dropdown-toggle">
            <i class="menu-icon fa fa-caret-right"></i>

            Admission Information
            <b class="arrow fa fa-angle-down"></b>
          </a>

          <b class="arrow"></b>

          <ul class="submenu">

            <li routerLinkActive="active">
              <a [routerLink]="['/education/admission/applicants/new']">
                <i class="menu-icon fa fa-caret-right"></i>
                New Applications
              </a>

              <b class="arrow"></b>
            </li>
            <li routerLinkActive="active">
              <a [routerLink]="['/education/admission/confirmed']">
                <i class="menu-icon fa fa-caret-right"></i>
                Confirmed Applicant
              </a>

              <b class="arrow"></b>
            </li>
            <!-- <li class="">
              <a href="entry_test_list.html">
                <i class="menu-icon fa fa-caret-right"></i>
                Entry Test List
              </a>

              <b class="arrow"></b>
            </li>
            <li class="">
              <a href="final_batch.html">
                <i class="menu-icon fa fa-caret-right"></i>
                Final Batch
              </a>

              <b class="arrow"></b>
            </li> -->
          </ul>
        </li>

        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Class Activity
          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Results
          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Co-Curricular activities
          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Class Scheduling /Time table
          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Course Upload
          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Attendance
          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Examination and results

          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Hostel management
          </a>

          <b class="arrow"></b>
        </li>
      </ul>
    </li>
  
    <li routerLinkActive="open">
      <a href="#" class="dropdown-toggle">
        <i class="menu-icon fa fa-pie-chart"></i>
        <span class="menu-text"> Financial Management </span>

        <b class="arrow fa fa-angle-down"></b>
      </a>

      <b class="arrow"></b>

      <ul class="submenu">
        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Payroll

          </a>

          <b class="arrow"></b>
        </li>

        <li routerLinkActive="open">
          <a href="#" class="dropdown-toggle">
            <i class="menu-icon fa fa fa-caret-right"></i>
            <span class="menu-text">
              Manage Fee
            </span>

            <b class="arrow fa fa-angle-down"></b>
          </a>

          <b class="arrow"></b>

          <ul class="submenu">


            <li routerLinkActive="active">
              <a [routerLink]="['/finance/fee/group']">
                <i class="menu-icon fa fa-caret-right"></i>
                Fee Group
              </a>

              <b class="arrow"></b>
            </li>

            <li routerLinkActive="active">
              <a [routerLink]="['/finance/fee/category']">
                <i class="menu-icon fa fa-caret-right"></i>
                Fee Category
              </a>

              <b class="arrow"></b>
            </li>

            <li routerLinkActive="active">
              <a [routerLink]="['/finance/fee/structure']">
                <i class="menu-icon fa fa-caret-right"></i>
                Fee Structure
              </a>
              <b class="arrow"></b>
            </li>
          </ul>
        </li>
        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            General Ledger


          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Balance Sheet
          </a>
          <b class="arrow"></b>
        </li>
        <li class="">
          <a >
            <i class="menu-icon fa fa-caret-right"></i>
            Income Statement
          </a>
          <b class="arrow"></b>
        </li>
      </ul>
    </li>

    <li class="">
      <a href="#" class="dropdown-toggle">
        <i class="menu-icon fa fa-cube"></i>
        <span class="menu-text"> Assets Management </span>

        <b class="arrow fa fa-angle-down"></b>
      </a>

      <b class="arrow"></b>

      <ul class="submenu">
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Inventory
          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Assets Assignment
          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Assets Tracking
          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Procurement
          </a>

          <b class="arrow"></b>
        </li>



      </ul>
    </li>

    <li class="">
      <a href="#" class="dropdown-toggle">
        <i class="menu-icon fa fa-th"></i>
        <span class="menu-text"> HR Management </span>

        <b class="arrow fa fa-angle-down"></b>
      </a>

      <b class="arrow"></b>


      <b class="arrow"></b>
      <ul class="submenu">
        <li class="">
          <a href="HR_emp_personalInfo.html">
            <i class="menu-icon fa fa-caret-right"></i>
            Employee Profile
          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Attendance
          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Leaves
          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Benefit & incentives
          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Promotion Management
          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Performance management
          </a>

          <b class="arrow"></b>
        </li>

      </ul>
    </li>

    <li class="#">
      <a href="#" class="dropdown-toggle">
        <i class="menu-icon fa fa-envelope"></i>

        <span class="menu-text">
          Communication Management

        </span>
        <b class="arrow fa fa-angle-down"></b>
      </a>


      <b class="arrow"></b>

      <ul class="submenu">
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Notice Board
          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Notification
          </a>

          <b class="arrow"></b>
        </li>





      </ul>
    </li>

    <li class="#">
      <a href="#" class="dropdown-toggle">
        <i class="menu-icon fa fa-th-large"></i>

        <span class="menu-text">
          Administrative Management

        </span>
        <b class="arrow fa fa-angle-down"></b>
      </a>


      <b class="arrow"></b>

      <ul class="submenu">
        <li class="">
          <a href="Dashboard-Admin.html">
            <i class="menu-icon fa fa-caret-right"></i>
            Directors Dashboard
          </a>

          <b class="arrow"></b>
        </li>
        <li class="">
          <a href="Dashboard-teacher.html">
            <i class="menu-icon fa fa-caret-right"></i>
            Teachers Dashboard
          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a href="Dashboard-student.html">
            <i class="menu-icon fa fa-caret-right"></i>
            Students Dashboard
          </a>

          <b class="arrow"></b>
        </li>

        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Parents Dashboard
          </a>

          <b class="arrow"></b>
        </li>





      </ul>
    </li>

    <li class="#">
      <a href="#" class="dropdown-toggle">
        <i class="menu-icon fa fa-check"></i>

        <span class="menu-text">
          User Rights Management

        </span>
        <b class="arrow fa fa-angle-down"></b>
      </a>


      <b class="arrow"></b>

      <ul class="submenu">
        <li class="">
          <a href="#0">
            <i class="menu-icon fa fa-caret-right"></i>
            Portal Admin
          </a>

          <b class="arrow"></b>
        </li>










      </ul>
    </li>

    <li class="">
      <a href="#" class="dropdown-toggle">
        <i class="menu-icon fa fa-power-off"></i>
        <span class="menu-text"> Logout </span>

      </a>

      <b class="arrow"></b>


    </li>


  </ul>
  <!-- /.nav-list -->

  <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
    <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left"
      data-icon2="ace-icon fa fa-angle-double-right"></i>
  </div>
</div>