Angular 4集成Mapbox-gl地图组件时出现WDS编译警告问题

嘿，我之前帮不少开发者排查过Angular4整合Mapbox-gl时遇到的WDS编译警告问题，虽然你没贴出完整的警告内容，但结合这类场景的常见坑，给你几个实用的解决步骤：

• 先锁死兼容的Mapbox-gl版本
  Angular4算是比较老的版本了，高版本的Mapbox-gl会用到它不支持的新语法或API，建议把Mapbox-gl降到v0.54.0及以下，执行这两条命令：

  npm uninstall mapbox-gl
  npm install mapbox-gl@0.54.0 --save
  

• 调整TypeScript配置文件
  打开项目根目录的tsconfig.json，在compilerOptions里加上这些配置，让TS能正确解析Mapbox-gl的类型：

  {
    "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "types": ["mapbox-gl"]
    }
  }
  

  要是你用Angular CLI创建的项目，别忘了同步修改src/tsconfig.app.json，把mapbox-gl加到types数组里。

• 给Webpack加全局变量注入
  Mapbox-gl依赖全局的mapboxgl变量，Angular4里可以通过自定义Webpack配置来搞定：

  1. 先装适配Angular4的@angular-builders/custom-webpack（比如v7.3.0版本）
  2. 新建extra-webpack.config.js文件，写这段代码：

  const webpack = require('webpack');
  module.exports = {
    plugins: [
      new webpack.ProvidePlugin({
        mapboxgl: 'mapbox-gl'
      })
    ]
  };
  

  3. 修改.angular-cli.json（Angular4用的是这个配置文件）里的build项，指定这个自定义Webpack文件的路径。

• 修正地图初始化的时机
  别在ngOnInit里初始化地图！一定要放到ngAfterViewInit钩子函数里，因为地图得等DOM元素渲染完才能挂载，示例代码：

  import * as mapboxgl from 'mapbox-gl';
  
  export class MapComponent implements AfterViewInit {
    ngAfterViewInit(): void {
      mapboxgl.accessToken = '你的Mapbox Token';
      const map = new mapboxgl.Map({
        container: 'map-container', // 对应模板里的DOM元素ID
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 10,
        center: [-74.5, 40]
      });
    }
  }
  

• 清缓存重编译试试
  有时候缓存搞出来的奇怪警告，清一下就好：

  rm -rf node_modules package-lock.json
  npm install
  ng cache clean
  ng serve --aot --no-sourcemap
  

要是做完这些还没解决，记得把完整的WDS警告内容贴出来（比如是类型错误、模块找不到还是依赖问题），这样能更精准定位问题~

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