Angular 4“未捕获的错误：区域已加载。”使用模态对话框引导程序答案

【问题标题】：Angular 4 “Uncaught Error: Zone already loaded.” using modal dialog bootstrapAngular 4“未捕获的错误：区域已加载。”使用模态对话框引导程序
【发布时间】：2018-04-19 15:37:51
【问题描述】：

我尝试使用带有路由器出口角 4 的模态对话框引导程序并得到错误“未捕获的错误：区域已加载。”

这是我的脚本： master-golongan.component.ts

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-master-golongan',
  templateUrl: './master-golongan.component.html',
  styleUrls: ['./master-golongan.component.css'],
})
export class MasterGolonganComponent implements OnInit {

  golList: any;
  constructor(private title: Title) {
    this.title.setTitle('Daftar Golongan | Inventory Management System');
  }

  ngOnInit() {
  }

}

master-golongan.component.html

    <a class="btn btn-success  btn-xs " data-toggle="modal" data-target="#myModal" routerLinkActive="active"
      routerLink="new-edit-golongan">
      <i class="fa fa-plus"></i> Golongan Baru</a>


<div class="modal" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

new-edit-golongan.component.html

<div class="modal-body">
  <p>Some text in the modal.</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

并且有如下图所示的错误

如何在模态对话框引导程序中调用路由器出口角 4？如何解决？

【问题讨论】：

关注answer

标签： angular

【解决方案1】：

我在 Angular 应用程序中遇到了同样的模态弹出问题，我找到了解决方案：您需要将代码更改为 master-golongan.component.html 文件：

不要使用“routerLink”而不是“href”作为数据切换模式，只需更改“href”而不是“routerLink”并检查其工作情况：

<a class="btn btn-success  btn-xs " data-toggle="modal" data-target="#myModal" routerLinkActive="active"
  href="new-edit-golongan">
  <i class="fa fa-plus"></i> Golongan Baru</a>

【讨论】：

【解决方案2】：

遇到了同样的问题，https://github.com/angular/angularfire2/issues/1597 帮助我消除了这个错误。只需从 node_modules/angularfire2/angularfire2.d.ts 中评论或删除 import 'zone.js';。它对我有用。

问题是，一旦 angular 全局定义了 zone.js，就没有必要再次导入 zone.js。我正在使用："angularfire2": "5.0.0-rc.4"。

【讨论】：

【解决方案3】：

在您的node_modules/angularfire2/angularfire2.d.ts 中，删除以下行 import 'zone.js/dist/zone'; 它会工作:)

【讨论】：