Question

我对角度和前端网络开发很新，所以也许我错过了一些东西基本但我没有成功搜索该问题的解决方案。

根据答案：Call pure javascript function from Angular 2 component

我正在尝试将外部.js文件导入我的角度组件：

import '../../../src/Plugin/codemirror/mode/custom/custom.js'

@Component({
    selector: 'txt-zone',
    templateUrl: 'app/txtzone/Txtzone.component.html',
    styleUrls: ['app/txtzone/TxtZone.css'],


})

路径是正确的相对路径，我知道这是因为如果它通过浏览器[http://localhost:50371/src/Plugin/codemirror/mode/custom/custom.js]从网址文本框中加载。我可以看到文件内容......

这是chrome调试器抛出的例外：

zone.js：2263 GET http://localhost:50371/src/Plugin/codemirror/lib/codemirror 404（不是实测值）

你可以看到路径被改变了（不明白为什么？）

1.我该如何解决这个问题？ 2.为什么.js文件的路径不是引用的路径？
3.也许有更好的方法将外部.js文件加载到我的组件中？

它看起来很简单但是经过几个小时的搜索我找不到任何答案。

Answer 1

在Angular 4项目中包含自定义javascript函数的一种简单方法是将项目包含在assets文件夹中，然后使用require将其导入到组件打字稿中。

<强>的src /资产/ example.js

export function test() {
    console.log('test');
}

<强>的src /应用程序/ app.component.ts

（@Component(...)之前）

declare var require: any;
const example = require('../assets/example');

（在export class AppComponent implements OnInit { ...内）

ngOnInit() {
  example.test();
}

如何从角度2组件访问外部JavaScript文件

1 个答案: