angular2 ng2-bs3-modal 不适用于脚本标签加载答案

【问题标题】：angular2 ng2-bs3-modal not working with script tag loadangular2 ng2-bs3-modal 不适用于脚本标签加载
【发布时间】：2016-09-09 22:22:00
【问题描述】：

我有一个 Angular 2 应用程序可以正常工作，我想向它添加模式，所以我按照 Doug 在这里所说的方式执行了安装说明：https://github.com/dougludlow/ng2-bs3-modal

说明说要么使用 index.html 页面中的脚本标记加载库或使用系统加载器。由于所有其他模块都是通过脚本标签加载的，所以我也为这个模块加载了脚本标签。

在我的组件内部，导入似乎在 VSCode 中可以正常识别，因为它显示了 ng2-bs3-modal 具有的各种项目，并且在编辑模式下没有显示任何错误。

但是，当我尝试运行该应用程序时，它没有运行，并且开发人员工具显示它正在尝试对 /ng2-bs3-modal/ng2-bs3-modal 进行 http 调用。所有导入的模块都包含在 node_modules 文件夹中，所以我不确定为什么 1）这个 http 调用是从组件进行的，以及 2）为什么它会从根文件夹而不是 node_modules 文件夹中查找。

在页面加载时，开发工具控制台日志中显示的错误是：

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 - 正如我所说，在尝试添加模式之前一切正常。我使用的是脚本标签包含，而不是系统版本，并且我在下面包含了整个 index.html 文件。

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

浏览组件.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';

如果我从组件中删除 ng2-bs3-modal 导入，一切都会像以前一样正常运行

所有的演示和示例都有 index.html 文件，其中 js 文件是通过 system.config 加载的，所以我想知道这是否曾经使用说明中提到的脚本标签加载进行过测试。

【问题讨论】：

您能否在问题中添加您的 SystemJS 配置和 HTML 条目文件的内容？谢谢！
帖子已更新，显示现有的工作系统配置。

标签： angular modal-dialog ng2-bootstrap

【解决方案1】：

我会将 ng2-bs3-modal.js 文件的脚本元素移动到包含 System.config 和 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>

【讨论】：

是的，这就是我最初拥有它的地方，但是把它放在那里除了其他错误之外还会出现这个错误。 : ReferenceError: 系统未定义（匿名函数）@ ng2-bs3-modal.js:10
我已经在 index.html 文件中上下移动了脚本加载器行 severla 的位置，它给出了不同的错误，但从来没有工作过。我注意到其他人对此模块有疑问，他们最终使用了系统加载器。我不确定这个模块是否已经使用说明中提到的脚本标签加载器进行了全面测试。
于是我放弃了脚本加载器，继续使用系统加载器。它似乎在 index.html 中很好地加载了模块，并且在组件中得到了识别。但是 ng2-bs3-modal 模块本身抱怨它找不到自己的 require ./component/modal。 :: ReferenceError: require is not defined(...) 显示： : at eval (localhost:3000/ng2-bs3-modal/ng2-bs3-modal.js:5:15) 即： var modal_1 = require('./components/modal');

【解决方案2】：

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

【讨论】：