Question

使用Angular 5和Bootstrap创建网站4.我正在使用Pixinvent的stack-admin-2.1模板：https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/angular-starter-kit/ltr/vertical-modern-menu-template/2-columns-layout

zone.js:196 Uncaught TypeError: Cannot read property 'stop' of null
at scripts.bundle.js:140
at ZoneDelegate.invokeTask (zone.js:425)
at Zone.runTask (zone.js:192)
at ZoneTask.invokeTask (zone.js:499)
at ZoneTask.invoke (zone.js:488)
at timer (zone.js:2040)

我已经大量编辑了模板，但它“开箱即用”我认为问题可能源于节奏的使用。这是我的index.html我认为问题来自哪里？

（代码段不起作用）

<!doctype html>
<html lang="en" data-textdirection="ltr" class="loading">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="Stack admin is super flexible, powerful, clean &amp; modern responsive Angular 5 bootstrap admin template with unlimited possibilities.">
  <meta name="keywords" content="admin template, stack admin template, dashboard template, flat admin template, responsive admin template, web app">
  <meta name="author" content="PIXINVENT">
  <title>Customer Portal</title>
  <base href="/">
  <link rel="apple-touch-icon" href="assets/app/images/ico/apple-icon-120.png">
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i%7COpen+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
  <link rel="stylesheet" href="assets/app/vendors/pace/themes/black/pace-theme-flash.css"/>
  <style type="text/css">
    .pace .pace-activity {
      top: 19px;
      right: 19px;
      display: none;
    }
    .page-loading {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
      background-color: #F5F7FA;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      z-index: -1;
    }
    .loading-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 38px;
      height: 38px;
      margin-left: -19px;
      margin-top: -19px;
    }
    app-root:empty ~ .page-loading {
      opacity: 1;
      z-index: 1;
    }
  </style>
  <script src="assets/app/vendors/pace/pace.min.js"></script>
  <script type="text/javascript">
    (function (window) {
      // Polyfills DOM4 MouseEvent only on IE11
      // Fixes ngx-charts line-chart hover
      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent#Polyfill
      if (!!window.MSInputMethodContext && !!document.documentMode || document.documentMode === 10) {
        function MouseEvent(eventType, params) {
          params = params || { bubbles: false, cancelable: false };
          var mouseEvent = document.createEvent('MouseEvent');
          mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

          return mouseEvent;
        }

        MouseEvent.prototype = Event.prototype;

        window.MouseEvent = MouseEvent;
      }

      // Initialize PACE
      window.paceOptions = {
        document: true,
        eventLag: true,
        restartOnPushState: true,
        restartOnRequestAfter: true,
        ajax: {
          trackMethods: [ 'POST','GET']
        }
      };
    })(window);
  </script>
</head>
<body data-open="click" data-menu="vertical-menu" data-col="" class="vertical-layout vertical-menu  menu-expanded fixed-navbar">
  <app-root></app-root>
  <div class="page-loading">
    <img src="assets/app/images/oval.svg" class="loading-icon" />
  </div>
</body>
</html>

Answer 1

解决：添加相关的.js get脚本导入到.ts文件。

ngOnInit() {
    $.getScript('./assets/app/js/core/app-menu.js');
    $.getScript('./assets/app/js/core/app.js');
}

保留问题以防其他人遇到此问题。

未捕获的TypeError：无法读取null的属性“stop”

1 个答案: