Angular 4 “Uncaught Error: Zone already loaded.” using modal dialog bootstrap

Question

i try to using modal dialog bootstrap with router-outlet angular 4 and get error “Uncaught Error: Zone already loaded.”

Here my script: 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>

and has an error like picture below

How to call router-outlet angular 4 in modal dialog bootstrap ? how to solve it ?

Answer 1

I faced same problem for modal-popup in angular app, I found a solution for that: You need to change code into master-golongan.component.html file:

Don't use 'routerLink' instead of 'href' for data-toggle modal, Just change 'href' instead of 'routerLink' and check its working:

<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>

Answer 2

got the same issue, https://github.com/angular/angularfire2/issues/1597 helped me to remove this error. just comment or delete import 'zone.js'; from node_modules/angularfire2/angularfire2.d.ts. It worked for me.

The problem was that once angular have globally defined zone.js then it's unnecessary to import zone.js again. I was using : "angularfire2": "5.0.0-rc.4".

Answer 3

In your node_modules/angularfire2/angularfire2.d.ts, remove the following line import 'zone.js/dist/zone'; It'll work :)