首页 文章

如何在Angular项目中使用第三方JS模块?

提问于
浏览
0

我目前正在开发一个Angular(Angular 4.2.5)项目,并且能够添加一些第三方模块 . 但是,在大多数情况下,如果第三方模块要求我包含脚本(如.js文件),我必须将其添加到我的index.html文件中 .

例如,这是我的index.html for Bootstrap中的内容:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

这也是我的CSS文件的情况,但最近发现我可以将它们导入我的style.css . 以下是该文件中存在的bootstrap内容的示例:

@import '~bootstrap/dist/css/bootstrap.min.css';

现在,当我查看在线时,我发现我应该能够将相关脚本的路径添加到我的angular-cli.json文件中,但每次我这样做时,第三方组件都会失败 . 只有当我将该组件的[script]标签添加到index.html中时,它才有效 .

我已经尝试了几个在线指南,但似乎没有工作 . 我确定我在某个地方缺少一些小设置,以确保我使用的是angular-cli.json路径,但我似乎无法找到它 .

您需要的一些细节:

  • @ angular / cli:1.2.0

  • node:6.10.0

  • os:win32 x64

  • @ angular / animations:4.2.5

  • @ angular / common:4.2.5

  • @ angular / compiler:4.2.5

  • @ angular / core:4.2.5

  • @ angular / forms:4.2.5

  • @ angular / http:4.2.5

  • @ angular / material:2.0.0-beta.7

  • @ angular / platform-browser:4.2.5

  • @ angular / platform-browser-dynamic:4.2.5

  • @ angular / router:4.2.5

  • @ angular / compiler-cli:4.2.5

[编辑07/08/2017]为了清楚起见,我的angular-cli.json中确实有以下内容,但除非我将它包含在我的index.html中,否则它仍然无效 .

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "ang2-crm",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/bootstrap/dist/bootstrap.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

2 回答

  • 0

    您可以使用链接通过styles.css或index.html导入它们 . 此外,您可以在 scripts: [] 下的angular-cli.json中导入脚本

  • 0

    您可以在.angular-cli.jaon中的脚本数组中添加所有脚本,在样式数组中添加css文件 .

    例如,如果要添加jquery.min.js.:-

    • npm install jquery --save 安装jquery包

    • 然后在脚本数组中添加条目: -

    脚本:[../节点模块/ jquery的/ DIST / jquery.min.js]

相关问题