无法在 Angular 模块中加载 .js 文件答案

【问题标题】：Cannot Load .js File in Angular Module无法在 Angular 模块中加载 .js 文件
【发布时间】：2020-06-09 15:40:49
【问题描述】：

我有一个使用本地脚本 sidebar.js 的侧边栏 Angular 组件。在src\app\sidebar\sidebar.component.ts，我尝试加载sidebar.js如下：

  ngAfterViewInit(): void {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'src/app/sidebar/sidebar.js';
    console.log('creating external script: ' + s.src);
    this.elementRef.nativeElement.appendChild(s);
  }

我收到了这个错误：
http://localhost:4201/src/app/sidebar/sidebar.js net::ERR_ABORTED 404（未找到）

是的，我在 angular.json 中也有这一行：

        "scripts": [
...
          "src/app/sidebar/sidebar.js"
        ]

以下也因 404 失败：

s.src = 'sidebar.js';

不幸的是，由于侧边栏组件位于我为客户构建的 Angular 模块中，因此我无法按照 My Local JavaScript file is not loaded in Angular 2 中的建议将 sidebar.js 放入 /assets 中。 /assets 目录位于我客户的代码中。此外，sidebar.js 包含这个逻辑：

const _R = document.querySelector('[type=range]');
_R.style.setProperty('--val', +_R.value);
_R.style.setProperty('--max', +_R.max);
_R.style.setProperty('--min', +_R.min);

这取决于 sidebar.component（位于我的模块中）：

  <input
    class="border-0 slider"
    type="range"
    min="10"
    [title]="scale"
    step="5"
    [(ngModel)]="scale"
    max="200"
    orient="vertical"
    list="tickmarks"
  />

是的，我知道在 SO：
angular2: including thirdparty js scripts in component
script tag in angular2 template / hook when template dom is loaded

上提出了许多类似的问题

但它们都没有解决 sidebar.js 和 index.html 位于两个不同模块中的方面。

【问题讨论】：

标签： javascript angular

【解决方案1】：

您的脚本 sn-p 不“依赖”您示例 sn-p 中的组件。您在整个网页（文档的根目录）中请求任何类型为“范围”的输入，而这不一定是您的组件。（如果您的页面中有 10 个input[type="range"]，脚本必须以某种方式处理它，否则它只会获取第一个）。

做你想做的事情的方法是将它放在资产文件夹中。如果任何项目规则都禁止这样做，您有两种选择：

将您的 sidebar.js 文件上传到不同的服务器或不同的路径并从那里托管。由于您似乎无法控制客户服务器中的文件，因此您不能假设存在 /src/app/ 目录（因为在构建应用程序后不需要运行该应用程序）
将您的 .js 文件转换为 typescript 文件 (.ts) 并导入，以便 typescript 可以编译它。

要将其转换为 .js 文件，只需将文件重命名为 sidebar.ts，然后在要包含它的文件中，import for side effects only

我建议您将文件包装在一个可调用函数中，该函数接收您的组件引用作为参数，以便您可以指定与哪个元素相关，而不是让它在文档根目录中找到，但我怀疑这会涉及弄乱 sidebar.js 文件的内部。但是，如果侧边栏文件是库或模块，这可能太耗时了。

【讨论】：