Angular Cli Webpack中如何添加外部js文件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (100)

在将Angular Cli从SystemJs切换到Webpack之后,我不确定如何添加JS文件。

例如:

选项A

我有一些通过npm安装的js文件。代码如下:

<head>
   <script src="node_modules/some_package/somejs.js">
</head>

//With systemJs I could do this

<head>
   <script src="vendor/some_package/somejs.js">
</head>

选项B.

包含这些js文件作为webpack包的一部分。这似乎是它可能应该完成的方式。不过我不确定如何做到这一点,因为所有的webpack代码似乎都隐藏在angular-cli-webpack节点包的后面。我想也许有另一个我们可能有权访问的webpack配置。但我不确定,因为我在创建一个新的angular-cli-webpack项目时没有看到它。

更多信息:

我想包括的js文件需要包含在Angular项目之前。例如jQuery和第三方js库,它不是真正为模块加载或打字机设置的。

参考资料

https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

提问于
用户回答回答于

使用angular-cli 1.0.0和Angular 4.0.0进行测试。

代码:

{
  "project": {
    "version": "1.0.0",
    "name": "my-project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

如果你更改styles(或scripts!)属性的值,则应该:

如果你正在运行它,请重新启动服务。

通过scripts.bundle.js文件查看在** globalcontext中执行的脚本。

用户回答回答于

代码:

ng new testapp
cd testapp
npm install --save-dev angular-cli@webpack
npm install --save @types/jquery
npm install --save jquery

然后在下面添加代码 app.component.ts

import { Component } from '@angular/core';
import * as jQuery from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';

  public test(){
    jQuery('h1').text('Magic');
  }
}

将下面的html添加到 app.component.html

<h1 (click)="test()">
  {{title}}
</h1>

然后运行它:

ng serve

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动