Question

我有一个使用本地脚本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"
  />

是的，我知道许多类似的问题被问到并回答了：
angular2: including thirdparty js scripts in component
script tag in angular2 template / hook when template dom is loaded

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

感谢您的帮助。

Answer 1

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

执行您要执行的操作的方法是将其放入资产文件夹中。如果任何项目规则都禁止这样做，则有两种选择：

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

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

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

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

1 个答案: