我是一个菜狗，记录的也只是一个流水账，请各位大佬不要嘲笑我，谢谢O(∩_∩)O
过程记录
ng new sand-search （我也不知道为啥取这么个名字）
cd sand-search
ng g library hzz-sand-search --prefix=hzz
cd projects/hzz-sand-search/src/lib
ng g c search-box（新建需要的组件）
ng add ng-zorro-antd（装组件需要的各种依赖）
ng g c basic-map（另一个新组件）
修改父项目（sand-search）的angular.json，这样就可以用less啦
（同事大佬C：ng new的时候不是可以选吗？我：这不是new的时候没选吗？而且我看的教程也是这样改的！同事大佬C：笑哭.jpg）
"hzz-sand-components": {
"projectType": "library",
"root": "projects/hzz-sand-components",
"sourceRoot": "projects/hzz-sand-components/src",
"prefix": "hzz",
"schematics": {
"@schematics/angular:component": {
"style": "less"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/hzz-sand-components/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/hzz-sand-components/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/hzz-sand-components/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/hzz-sand-components/src/test.ts",
"tsConfig": "projects/hzz-sand-components/tsconfig.spec.json",
"karmaConfig": "projects/hzz-sand-components/karma.conf.js"
}
}
}
}
然后就开始尝试自己引自己了！
在父项目（sand-search）里加上import { HzzSandModule } from 'projects/hzz-sand-components/src/public-api';
结果报错，引不到，后来发现是没有export
public-api.ts也要加上导出
加上之后，在父项目（sand-dearch）的app.component里用，可以看到search-box works!就成功啦！
然后把之前写好的组件的代码复制过来，改吧改吧，search-box比较简单，basic-map用了本地的mapbox-gl.js，因为是同事大佬L改过的所以只能用这个，不能npm install mapbox（啊要是可以的话我三天前就把这个事情弄完了……），一开始我按照通义千问的说法，修改配置文件（详见最后面【和通义千问的聊天记录1】），后来发现打包会报错，找了很久的原因（被通义千问狠狠的骗），最后换了一种方法，也是通义千问给的建议，通过service的方式注入mapboxgl.js
import { Injectable } from "@angular/core";
declare let mapboxgl: any;
declare let script: any;
declare let turf:any;
@Injectable()
export class MapboxGlService {
private mapboxglLoaded = false;
private mapboxglInstance: any;
private turfLoaded = false;
private turfInstance: any;
constructor() { }
public async initMapboxGL(path:string,mapToken:string): Promise<void> {
// 加载Mapbox GL JS库文件
const script = document.createElement('script');
script.src = `${path}/mapbox-gl.js`; // 路径根据实际情况调整
document.head.appendChild(script);
const css = document.createElement('link');
css.href = `${path}/mapbox-gl.css`; // 路径根据实际情况调整
css.rel="stylesheet" ;
css.type="text/css"
document.head.appendChild(css);
// <link href="./pack/css/dicinfo.css" rel="stylesheet" type="text/css" />
// 等待脚本加载完成
await this.waitForScriptLoad(script);
// await this.waitForScriptLoad(css);
// 初始化accessToken
mapboxgl.accessToken = mapToken;
this.mapboxglLoaded = true;
this.mapboxglInstance = mapboxgl;
debugger
}
private async waitForScriptLoad(scriptElement: HTMLScriptElement): Promise<void> {
return new Promise((resolve, reject) => {
scriptElement.onload = () => resolve();
scriptElement.onerror = () => reject(new Error('Failed to load Mapbox GL JS'));
});
}
public async getMapboxGl(path:string,mapToken:string): Promise<any> {
debugger
if (!this.mapboxglLoaded) {
await this.initMapboxGL(path,mapToken);
}
return this.mapboxglInstance;
}
public async initTurf(path:string): Promise<void> {
// 加载Mapbox GL JS库文件
const script = document.createElement('script');
script.src = `${path}turf.min.js`; // 路径根据实际情况调整
document.head.appendChild(script);
// 等待脚本加载完成
await this.waitForScriptLoad(script);
this.turfLoaded = true;
this.turfInstance = turf;
}
public async getTurf(path:string): Promise<any> {
debugger
if (!this.turfLoaded) {
await this.initTurf(path);
}
return this.turfInstance;
}
}
在basic-map.component.ts里
在ngOnit里
mapboxgl = await this.mapboxGlService.getMapboxGl(this.dependencePath, this.mapToken);
turf = await this.mapboxGlService.getTurf(this.dependencePath);
然后就可以正常使用啦！
成功的能获取到mapboxgl后，按照通义千问的建议（又是你！！），用npm link来链接到其他的demo里，结果在build的时候又是一串报错，然后在库项目的ng-package.json里给依赖项们都配了全局umd啥啥啥的（详见和通义千问的聊天记录2）
结果又报错inject()啥啥啥的，又找了很久的原因，最后同事大佬C说是不是npm link的锅，在同事大佬C的建议下，直接ng build了npm publish！直接冲！结果就没有inject相关的报错了，可能就是npm link的问题吧……
ng build hzz-sand-components
cd dist\hzz-sand-components
npm adduser （第一次发布的情况）
npm login （如果没有到官网登录）
以上两个（adduser和login），输密码的时候看不到输入的效果是正常的！
npm publish
在demo中npm install hzz-sand-components拉下来，可以看到地图了，可太激动了，结果发现画面测面积的那个功能用不了，一看报错是没装mapbox-gl-draw，再一看库项目的package.json里没配依赖项相关的信息（什么这个居然需要自己手动写！不应该在装依赖的时候就自动长在这里吗！！）
先npm install @mapbox/mapbox-gl-draw，然后修改package.json
在库的父项目里serve，又报错找不到MapboxDraw的类型，vscode的建议是运行下面这行：
npm i --save-dev @types/mapbox__mapbox-gl-draw
确实能行。
在package.json里加上
"@types/mapbox__mapbox-gl-draw": "1.4.6" （这个版本号是直接在node_modules里去复制的）
然后又报找不到turf……（我怎么什么坑都踩一脚！！）
npm install turf了一下，发现在报错，仔细一看发现是我们用的版本太低了，有些方法新版本不支持了（但是这个方法名官网上又能搜到，奇奇怪怪的，不管了）
把turf.min.js也丢到mapbox-gl.service.ts里，按照mapbox.js的方法一起注入进来。
然后发现mapbox的css忘记带上了，也丢到mapbox-gl.service.ts里带进来……
然后又发现ant的样式打包的时候打不上，最终决定这样解决：
引来引去的也太麻烦了吧！！！！！！就这样了！！！！！！！！不管了！！！！！！！！
现在能行了！！！可以用了！！好耶！！！！！
