在Angular CLI 7.1.4中无法直接加载外部的JavaScript文件,因为Angular CLI默认使用webpack作为打包工具,它只能处理JavaScript模块。但是你可以通过以下方法解决这个问题:
external-script.service.ts
,并在其中导入外部的JavaScript文件。import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ExternalScriptService {
loadScript(url: string): Promise {
return new Promise((resolve, reject) => {
const scriptElement = document.createElement('script');
scriptElement.src = url;
scriptElement.onload = resolve;
scriptElement.onerror = reject;
document.body.appendChild(scriptElement);
});
}
}
loadScript
方法来加载外部脚本。import { Component, OnInit } from '@angular/core';
import { ExternalScriptService } from './external-script.service';
@Component({
selector: 'app-example',
template: `
Example Component
`,
})
export class ExampleComponent implements OnInit {
constructor(private externalScriptService: ExternalScriptService) { }
ngOnInit() {
this.externalScriptService.loadScript('https://example.com/external.js')
.then(() => {
// 外部脚本已加载
})
.catch(() => {
// 加载外部脚本失败
});
}
}
这样就可以通过Angular服务的方式加载外部的JavaScript文件了。