Angular 5中无法使用第三方jQuery插件typed.js求助

嘿，我刚帮好几个Angular 5新手搞定过类似的问题，别着急，咱们一步步来排查修复：

第一步：先确认angular-cli.json的脚本配置是否正确 #

这是最容易踩坑的地方！因为typed.js依赖jQuery，所以脚本的加载顺序必须是jQuery在前，typed.js在后，不然typed.js加载时找不到jQuery就会直接报错。正确的配置应该是这样的：

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/typed.js/lib/typed.min.js"
]

另外要注意路径是否正确，如果你是用npm安装的依赖，路径要对应node_modules里的文件位置。

第二步：在组件中正确声明全局变量 #

因为我们是通过angular-cli.json全局引入的脚本，TypeScript默认不知道这些全局变量，所以要在你的头部组件顶部加上声明：

declare var $: any;
declare var Typed: any;

这样TypeScript就不会报“$ is not defined”或者“Typed is not defined”的错误了。

第三步：选对时机初始化插件 #

Angular组件有自己的生命周期，绝对不能在constructor里初始化插件！因为此时组件的DOM还没渲染完成，找不到目标元素会报错。你得用ngAfterViewInit钩子，这时候组件的视图已经完全初始化，DOM元素都存在了：

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

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

  ngAfterViewInit(): void {
    // 替换成你自己的目标元素选择器，比如#typed-content
    new Typed('#typed-content', {
      strings: ['我是Angular新手', '正在学习使用typed.js'],
      typeSpeed: 50,
      loop: true
    });
  }
}

容易忽略的小细节 #

• 修改完angular-cli.json后，一定要重启ng serve服务！不然新的脚本配置不会生效，很多新手都容易忘这一步。
• 检查你的DOM元素选择器是否正确，比如id有没有拼写错误，有没有在组件模板里正确定义这个元素。
• 确保你安装的typed.js版本和jQuery兼容，建议用typed.js 2.x版本搭配jQuery 3.x，兼容性最好。

如果按照上面的步骤来，应该就能解决报错问题啦！

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