angular2 ng2-bs3-modal not working with script tag load

Question

I have an Angular 2 app that works fine as is and I wanted to add modals to it, so I performed the installation instructions exactly like Doug said here: https://github.com/dougludlow/ng2-bs3-modal

The instructions say to either use the script tag in the index.html page to load the library or use the system loader. Since all the other modules are loaded via script tags I did the script tag load for this one as well.

Inside of my component, the import appears to get recognized okay in VSCode, as it is displaying the various items that the ng2-bs3-modal has and not showing any errors in the edit mode.

However when I try to run the app, it doesn't run, and the developer tool shows that it is trying to make an http call to /ng2-bs3-modal/ng2-bs3-modal. All imported modules are contained in the node_modules folder, so I'm not sure why 1) this http call is being made from the component, and 2) why it would be looking from the root folder instead of the node_modules folder.

On page load the error shown in dev tools console log is :

GET http://localhost:3000/ng2-bs3-modal/ng2-bs3-modal 404 (Not Found)   angular2/polyfills.js
Error: XHR error (404 Not Found) loading http://localhost:3000/ng2-bs3-modal/ng2-bs3-modal(…)  angular2/polyfills.js

index.html - As I said, everything works fine before trying to add the modal. I used the script tag inclusion, not the system version, and I have included the entire index.html file below.

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<base href="/">

<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">   </script>


<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js">
</script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="public/js/bundle.js"></script>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/local.css" rel="stylesheet">

<script>
    System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('main')
        .then(null, console.error.bind(console));
</script>

<script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

</head>
<base href="/">
<body>
<app>Loading...</app>
</body>

</html>

browse-component.ts

import {Component, ViewChild} from 'angular2/core';
import {Injectable} from 'angular2/core';
import {RecipientListComponent} from './recipient-list.component';
import {RecipientService} from './recipient.service';
import {RouteParams, ROUTER_DIRECTIVES} from 'angular2/router';
import { MODAL_DIRECTIVES, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';

If I remove the ng2-bs3-modal import from the component, everything runs normally as before

All the demos and examples have the index.html file with the js file being loaded via the system.config, so I'm wondering was this ever tested with the script tag loading as mentioned in the instructions.

Could you add your SystemJS configuration and the content of your HTML entry file in your question? Thanks! — Thierry Templier
The post has been updated showing the existing working system config. — Shar

Thierry Templier Thierry Templier · Accepted Answer · 2016-05-14T06:42:57

I would move the script element for the ng2-bs3-modal.js file before script block containing System.config and System.import:

<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="public/js/bundle.js"></script>

<script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/local.css" rel="stylesheet">

<script>
    System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('main')
        .then(null, console.error.bind(console));
</script>

angular2 ng2-bs3-modal not working with script tag load

2 Answers