安装Angular Datatables后出现jQuery相关错误，求助排查

你按照官方指引安装配置后遇到的两个错误，我帮你逐一分析和解决：

错误1：ERROR TypeError: $(...).DataTable is not a function #

这个错误通常意味着jQuery或DataTables的加载顺序有问题，或者Angular无法识别全局的$对象。结合你的配置来看，可能的原因和解决方式：

• 首先确认你的angular-cli.json里脚本加载顺序是对的：先加载jQuery，再加载DataTables，你当前的配置是符合要求的，但要检查有没有其他地方（比如你加载的get-usuarios.js脚本）重复引入了jQuery，导致全局$被覆盖。
• 在你的UsuariosComponent.ts顶部添加全局jQuery声明，让Angular能识别$：

  declare var $: any;
  

错误2：ERROR Error: NomDatatable element exist. #

这个错误是angular-datatables的核心冲突问题，大概率是因为你手动初始化了DataTable，和angular-datatables的自动初始化指令冲突了。

看你的组件代码，ngAfterViewInit里加载了get-usuarios.js脚本，我猜测这个脚本里有类似这样的代码：

$(document).ready(function() {
  $('table').DataTable();
});

而angular-datatables的datatable指令已经会自动帮你初始化表格，手动调用DataTable()会导致指令找不到预期的元素，从而抛出这个错误。

核心解决步骤： #

1. 移除手动初始化代码
   打开assets/app/base/usuarios/get-usuarios.js，删除所有手动调用$(...).DataTable()的代码，让angular-datatables的datatable指令来完成初始化工作。

2. 调整数据加载逻辑（如果需要）
   如果get-usuarios.js是用来加载表格数据的，建议把数据获取逻辑迁移到Angular组件内部，用Angular的HttpClient来请求数据，这样更符合Angular的架构，也能避免脚本加载顺序的问题。比如：

   // 在UsuariosComponent.ts中添加HttpClient依赖
   import { HttpClient } from "@angular/common/http";
   
   // ...
   constructor(
     private _script: ScriptLoaderService,
     private toastr: ToastrService,
     private http: HttpClient // 注入HttpClient
   ) {}
   
   ngOnInit() {
     // 用HttpClient获取数据
     this.http.get('/api/usuarios').subscribe(data => {
       // 把数据赋值给组件变量，然后在模板中用*ngFor渲染
       this.users = data;
     });
   }
   

   对应的模板修改成动态渲染：

   <table datatable class="row-border hover">
     <thead>
       <tr>
         <th>ID</th>
         <th>First name</th>
         <th>Last name</th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let user of users">
         <td>{{user.id}}</td>
         <td>{{user.firstName}}</td>
         <td>{{user.lastName}}</td>
       </tr>
     </tbody>
   </table>
   

3. 验证配置路径
   最后再检查angular-cli.json里的styles和scripts路径是否正确，确保../node_modules的相对路径和你的项目结构匹配，没有路径错误导致资源未加载。

按照这些步骤调整后，两个错误应该都能解决啦！

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