0

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.

4

2 回答 2

2

我会在包含 System.config 和 System.import 的脚本块之前移动 ng2-bs3-modal.js 文件的脚本元素：

<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>
于 2016-05-14T06:42:57.403 回答
1

我终于找到了问题所在。ng2-bs3-modal npm 在构建期间尝试运行 tslint，即使 tslint 不包括在内。因此，在查看 npm 日志并看到构建错误之后，我继续安装 tslint 并重新安装了 ng2-bs3-modal npm，一切正常。

于 2016-05-19T19:06:46.443 回答