当前位置: 首页 > 知识库问答 >
问题:

Angular2 ng2-bs3-modal不工作与脚本标记加载

张嘉
2023-03-14

我有一个Angular 2应用程序,可以正常工作,我想向它添加modals,所以我执行了安装说明,就像Doug在这里说的那样:https://github.com/dougludlow/ng2-bs3-modal

说明说要么在索引中使用script标记。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

指数html-正如我所说,在尝试添加模态之前,一切正常。我使用了脚本标记包含,而不是系统版本,并且我已经包含了整个索引。下面是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加载,所以我想知道这是否像说明中提到的那样通过脚本标记加载进行过测试

共有2个答案

左丘曦
2023-03-14

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

傅浩漫
2023-03-14

我将移动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>
 类似资料:
  • 问题内容: 我目前正在尝试从Jenkins Workflow脚本中标记存储库。我尝试使用一个步骤,但是由于未设置凭据而导致问题。 是否有一个现有步骤可用于标记存储库或解决凭据问题? 问题答案: 我已经通过使用凭据绑定插件提供的步骤设法使此工作正常进行。 它不是很好,因为它涉及在URL中全部指定,但是这些值在控制台输出中被屏蔽。

  • 我有一个比较简单的问题,就是尝试将内联脚本添加到React组件中。我目前所掌握的: 我还尝试过: 这两种方法似乎都无法执行所需的脚本。我想我错过的是一件简单的事。有人能帮忙吗? PS:忽略foobar,我有一个真实的id实际上在使用,我不想分享。

  • 为什么onclick不起作用?但是,当我在不同的脚本标记中定义函数时,它是有效的。

  • 我必须使用Fred的ImageMagick脚本创建图像的过渡序列,特别是fx过渡。 在我的PHP代码中,我将所有的图片调整为标准大小,然后我将所有这些图片重命名为pic000001.jpg,pic000002.jpg,pic000003.jpg等(我用$Count计数),那么我做: (这肯定是脚本生成的消息),然后是如下消息: 因为图片没有生成(它揭示了对帧编号的高维是正确的,所以不要专注于此)。

  • LiquiBase:CVC-complex-type.2.4.A:发现以元素'sql'开始的无效内容。应使用“{”http://www.liquibase.org/xml/ns/dbchangelog“:modifysql}”之一。 获取此变更集的错误

  • 我是selenium的初学者,需要以下脚本的帮助,我正在尝试发送vai文本字段的值。下面是代码片段。 显示错误 线程“main”java中出现异常。lang.IllegalStateException:驱动程序可执行文件的路径必须由webdriver设置。铬。驱动系统属性;有关详细信息,请参阅https://github.com/SeleniumHQ/selenium/wiki/ChromeDri