Angular 5：如何仅为指定组件导入JavaScript且不影响其他组件

搞定这个问题很简单，核心就是要避免静态导入脚本（因为Angular的打包机制会把静态导入的脚本打包进主 bundle 或者共享 chunk，导致不管有没有进入对应路由都会加载）。下面给你几个实用的方案，按需选择：

方案1：组件生命周期内动态加载脚本（最推荐） #

直接在PlayComponent的初始化阶段动态创建<script>标签加载游戏脚本，销毁阶段移除脚本，完全和组件生命周期绑定，不会在其他路由下加载：

import { Component, OnInit, OnDestroy } from '@angular/core';

export class PlayComponent implements OnInit, OnDestroy {
  private gameScriptEl: HTMLScriptElement | null = null;

  constructor() { }

  ngOnInit() {
    // 创建脚本元素并配置
    this.gameScriptEl = document.createElement('script');
    this.gameScriptEl.src = '/assets/js/game.js';
    this.gameScriptEl.type = 'text/javascript';
    
    // 脚本加载完成后可以初始化游戏（如果game.js有全局初始化函数的话）
    this.gameScriptEl.onload = () => {
      // 比如调用游戏的初始化方法
      // (window as any).initGame();
    };

    // 把脚本添加到页面
    document.body.appendChild(this.gameScriptEl);
  }

  ngOnDestroy() {
    // 组件销毁时移除脚本，避免内存泄漏或残留
    if (this.gameScriptEl && this.gameScriptEl.parentNode) {
      this.gameScriptEl.parentNode.removeChild(this.gameScriptEl);
      // 可选：清理游戏相关的全局变量/事件监听
      // delete (window as any).initGame;
    }
  }
}

优点：完全按需加载，只有进入/play路由才会请求脚本，离开时自动清理，逻辑清晰且无冗余加载。

方案2：通过路由事件全局控制脚本加载 #

如果需要在全局层面控制脚本的加载状态，可以在AppComponent中监听路由变化，仅当路由切换到/play时加载脚本，离开时卸载：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  private routerSub: Subscription | null = null;
  private gameScriptEl: HTMLScriptElement | null = null;

  constructor(private router: Router) { }

  ngOnInit() {
    this.routerSub = this.router.events.subscribe(event => {
      // 只处理路由跳转完成的事件
      if (event instanceof NavigationEnd) {
        if (event.urlAfterRedirects === '/play') {
          // 还没加载过脚本才创建
          if (!this.gameScriptEl) {
            this.gameScriptEl = document.createElement('script');
            this.gameScriptEl.src = '/assets/js/game.js';
            document.body.appendChild(this.gameScriptEl);
          }
        } else {
          // 离开play路由时移除脚本
          if (this.gameScriptEl && this.gameScriptEl.parentNode) {
            this.gameScriptEl.parentNode.removeChild(this.gameScriptEl);
            this.gameScriptEl = null;
          }
        }
      }
    });
  }

  ngOnDestroy() {
    // 取消路由订阅，避免内存泄漏
    this.routerSub?.unsubscribe();
    // 确保脚本被移除
    if (this.gameScriptEl && this.gameScriptEl.parentNode) {
      this.gameScriptEl.parentNode.removeChild(this.gameScriptEl);
    }
  }
}

注意：如果你的/play路由带参数（比如/play/:gameId），需要调整路由判断逻辑，比如用event.urlAfterRedirects.startsWith('/play')。

方案3：结合懒加载模块加载脚本 #

把PlayComponent放到单独的懒加载模块中，让脚本和模块一起按需加载，只有当用户第一次访问/play路由时，才会下载模块和脚本：

首先创建PlayModule：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PlayComponent } from './play.component';
import { RouterModule, Routes } from '@angular/router';

// 配置懒加载路由
const routes: Routes = [
  { path: '', component: PlayComponent }
];

// 定义加载游戏脚本的初始化函数
function loadGameScript() {
  return () => new Promise<void>((resolve) => {
    const script = document.createElement('script');
    script.src = '/assets/js/game.js';
    script.onload = () => resolve();
    document.body.appendChild(script);
  });
}

@NgModule({
  declarations: [PlayComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  providers: [
    // 使用APP_INITIALIZER确保模块加载时先加载脚本
    {
      provide: APP_INITIALIZER,
      useFactory: loadGameScript,
      multi: true
    }
  ]
})
export class PlayModule { }

然后在主路由配置中设置懒加载：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  // 配置懒加载
  { path: 'play', loadChildren: () => import('./play/play.module').then(m => m.PlayModule) }
];

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

优点：脚本和模块绑定，第一次访问/play时才会下载，后续访问会利用缓存；缺点是如果需要在离开路由时卸载脚本，还是要结合OnDestroy逻辑。

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