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文件夹中查找。

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

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

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

list.index()

Answer 2

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

angular2 ng2-bs3-modal无法使用脚本标记加载

2 个答案: