Angular2中JS重复加载失败求助：已配置angular.cli仍仅初始化时加载

我之前也碰到过一模一样的情况——Angular是单页应用，通过angular.json配置的全局JS只会在应用启动时加载执行一次，当路由切换回组件时，不会重新触发加载逻辑。下面是几个经过验证的解决方案，你可以按需选用：

方法1：组件内动态创建脚本标签加载 #

最直接的方式就是在组件初始化时，手动创建并插入脚本标签，甚至可以先移除旧脚本避免冲突。

在你的组件代码里这么写：

import { OnInit } from '@angular/core';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.css']
})
export class TargetComponent implements OnInit {

  ngOnInit(): void {
    // 每次进入组件都重新加载脚本
    this.reloadExternalScript('assets/your-custom-script.js');
  }

  private reloadExternalScript(url: string) {
    // 先清理已存在的脚本标签，防止重复加载报错
    const existingScript = document.getElementById('custom-dynamic-script');
    if (existingScript) {
      existingScript.remove();
    }

    // 创建新的脚本标签并插入DOM
    const script = document.createElement('script');
    script.src = url;
    script.id = 'custom-dynamic-script';
    script.type = 'text/javascript';
    // 可选：脚本加载完成后执行回调
    script.onload = () => {
      console.log('脚本重新加载完成，可以执行依赖逻辑了');
    };
    document.body.appendChild(script);
  }
}

这个方法的核心是每次组件初始化时都重新生成脚本标签，强制浏览器重新请求并执行JS文件。

方法2：封装成服务复用逻辑 #

如果多个组件都需要这个功能，把加载逻辑封装成Angular服务会更优雅，也方便统一维护：

先写一个脚本加载服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DynamicScriptLoaderService {

  /**
   * 加载/重新加载指定脚本
   * @param url 脚本路径
   * @param scriptId 脚本标签ID，用于后续清理
   */
  loadScript(url: string, scriptId: string = 'dynamic-script'): Promise<void> {
    // 清理旧脚本
    const oldScript = document.getElementById(scriptId);
    if (oldScript) {
      oldScript.remove();
    }

    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = url;
      script.id = scriptId;
      script.onload = () => resolve();
      script.onerror = () => reject(new Error(`加载脚本失败：${url}`));
      document.body.appendChild(script);
    });
  }
}

然后在组件里注入这个服务，在ngOnInit中调用：

import { OnInit } from '@angular/core';
import { DynamicScriptLoaderService } from '../services/dynamic-script-loader.service';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.css']
})
export class TargetComponent implements OnInit {

  constructor(private scriptLoader: DynamicScriptLoaderService) { }

  ngOnInit(): void {
    this.scriptLoader.loadScript('assets/your-custom-script.js')
      .then(() => {
        // 脚本加载完成，这里可以执行依赖该脚本的业务逻辑
        console.log('脚本加载成功');
      })
      .catch(err => {
        console.error(err);
        // 处理加载失败的情况，比如提示用户
      });
  }
}

方法3：用路由守卫实现路由级加载 #

如果希望每次进入某个路由时自动加载脚本，可以用Angular的路由守卫CanActivate：

先写守卫类：

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { DynamicScriptLoaderService } from '../services/dynamic-script-loader.service';

@Injectable({
  providedIn: 'root'
})
export class ScriptLoadGuard implements CanActivate {

  constructor(private scriptLoader: DynamicScriptLoaderService) { }

  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    try {
      // 等待脚本加载完成后再进入路由
      await this.scriptLoader.loadScript('assets/your-custom-script.js');
      return true;
    } catch (err) {
      console.error('脚本加载失败，无法进入路由', err);
      return false; // 也可以根据需求改为true，允许进入但提示错误
    }
  }
}

然后在路由配置中使用这个守卫：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TargetComponent } from './target-component/target-component.component';
import { ScriptLoadGuard } from './guards/script-load.guard';

const routes: Routes = [
  {
    path: 'your-route-path',
    component: TargetComponent,
    canActivate: [ScriptLoadGuard] // 进入该路由前触发脚本加载
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

额外提示 #

• 如果你的JS脚本有全局变量或方法，重复加载可能导致变量冲突，这时候可以考虑在脚本内部暴露一个重置方法，比如window.resetScriptLogic()，这样不需要重新加载整个脚本，只需要在组件初始化时调用这个方法即可。
• 对于体积较大的JS文件，频繁重新加载会影响性能，优先考虑重置逻辑而非重新加载文件。

内容的提问来源于stack exchange，提问作者gaurav