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

Question

我有一个 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>

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

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

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

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

Answer 2

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

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

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

modal-dialog

ng2-bootstrap

angular