Angular4组件中外部JS文件加载失败问题求助

Hey，我来帮你搞定Angular 4里集成表单向导的问题！你遇到的JS文件加载失败，大概率是因为第三方库在Angular CLI环境下的引入方式没弄对，咱们一步步来解决：

这些表单向导插件依赖jQuery和Bootstrap，优先用npm管理这些依赖，比直接放assets文件夹更稳妥（如果是定制修改版的插件再放assets）：

# 安装生产依赖
npm install jquery bootstrap --save
# 安装TypeScript类型定义，避免编译报错
npm install @types/jquery @types/bootstrap --save-dev

你之前可能配置错了位置或者顺序，Angular CLI会按scripts数组的顺序加载文件，依赖顺序绝对不能乱：
打开angular-cli.json，找到apps数组里的scripts字段，添加这些路径：

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../assets/js/jquery.validate.min.js",
  "../assets/js/material-bootstrap-wizard.js"
]

如果你的Bootstrap样式也需要，别忘了在styles数组里加上：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.css"
]

⚠️ 注意：路径是相对于src文件夹的，所以如果你的插件放在src/assets/js下，路径就写assets/js/xxx.js就行。

你之前在register.component.ts里用import '../../assets/js/xxx.js'的方式不对，Angular模块系统不支持这么导入非UMD的普通JS文件。正确做法是：
在组件顶部声明全局变量，让TypeScript认识它们：

declare var $: any;
declare var jQuery: any;

一定要等DOM渲染完成再初始化插件，所以用ngAfterViewInit钩子：

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

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html'
})
export class RegisterComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 替换成你表单向导容器的选择器，比如#register-wizard
    $('#register-wizard').bootstrapWizard({
      // 这里填插件的配置项，比如：
      onNext: (tab, navigation, index) => {
        // 写下一步的验证或逻辑
        console.log('Going to step', index + 1);
      },
      onPrevious: (tab, navigation, index) => {
        console.log('Going back to step', index);
      }
    });
  }
}

如果还是不行，打开浏览器控制台看报错：

• 要是出现$ is not defined：说明jQuery没加载成功，检查scripts数组里的jQuery路径是否正确，是不是放在最前面。
• 要是插件相关报错：检查插件文件路径是否正确，有没有依赖缺失（比如validate是不是在Bootstrap之后加载）。

内容的提问来源于stack exchange，提问作者Ahsan Alam Siddiqui