Angular Azure地图未以角度加载

我正在尝试将Azure地图添加到一个简单的Angular应用程序中

我得到下面的错误。你知道为什么会这样吗？我该怎么解决

atlas.min.js:2509 Error: AuthenticationManager finished initializing, but no token is available
    at atlas.min.js:2509
    at ZoneDelegate.invoke (zone-evergreen.js:365)
    at Object.onInvoke (core.js:40794)
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:851
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40772)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)

我添加它的步骤如下：

1-安装Azure地图

npm i azure-maps-control

2-为地图创建组件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { AddressSearchService } from '../address-search.service';
import { AddressSearchJson, AddressSearchResult } from '../address-search-result.model';
import { Map, AuthenticationType, HtmlMarker } from 'azure-maps-control';


@Component({
  selector: 'app-address-search',
  templateUrl: './address-search.component.html',
  styleUrls: ['./address-search.component.css']
})
export class AddressSearchComponent implements OnInit {


  // Azure Active Directory Authentication Client ID
  // or Shared Key Authentication KEY
  // get it from portal.azure.com
  key: 'sharedKeyPrimaryKey';
  map: any;


  ngOnInit(): void { 
        // Initialize a map instance.
    this.map = new Map('mapContainer', {
      authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: this.key
      }
    });

    // Wait until the map resources are ready.
    this.map.events.add('ready', () => {
      // Create a HTML marker and add it to the map.
      this.map.markers.add(new HtmlMarker({
        color: 'DodgerBlue',
        text: '10',
        position: [0, 0]
      }));
    });
   }

  constructor(private adressSearchService: AddressSearchService) { }
}

3-创建视图

    <div id="mapContainer"></div>

5-确保我使用的是正确的Azure Maps密钥共享密钥身份验证-主键

---

嘿，我相信我能帮你！我在让Azure地图与Angular一起工作时遇到了很多麻烦。我是Angular的新手，不知道你的代码为什么会出现这样的错误，但我知道在你的组件中应该做些什么，因为其他的一切都是正确的，我就是这么做的。我复制了用于加载下面地图的组件代码，希望它能帮助您

import { Component, OnInit } from '@angular/core';
import * as atlas from 'azure-maps-control';


@Component({
  selector: 'app-azureMap',
  templateUrl: './azureMap.component.html',
  styleUrls: ['./azureMap.component.css']
})

export class AzureMapComponent implements OnInit {
  // Azure Active Directory Authentication Client ID
  // or Shared Key Authentication KEY
  // get it from portal.azure.com
  key: string = 'your key';
  map: any;

  constructor(
  ) {
  }

  ngOnInit() {
    //Initialize a map instance.
    this.map = new atlas.Map('mapContainer', {
      center: [-122.33, 47.6],
      zoom: 12,
      view: 'Auto',

      authOptions: {
        authType: atlas.AuthenticationType.subscriptionKey,
        subscriptionKey: this.key
      }
    });

    //Wait until the map resources are ready.
    this.map.events.add('ready', () => {
      //Create a HTML marker and add it to the map.
       this.map.markers.add(new atlas.HtmlMarker({
         color: 'DodgerBlue',
         text: '10',
         position: [0, 0]
       }));
    });
  }

}

import { Component, OnInit } from '@angular/core';
import * as atlas from 'azure-maps-control';


@Component({
  selector: 'app-azureMap',
  templateUrl: './azureMap.component.html',
  styleUrls: ['./azureMap.component.css']
})

export class AzureMapComponent implements OnInit {
  // Azure Active Directory Authentication Client ID
  // or Shared Key Authentication KEY
  // get it from portal.azure.com
  key: string = 'your key';
  map: any;

  constructor(
  ) {
  }

  ngOnInit() {
    //Initialize a map instance.
    this.map = new atlas.Map('mapContainer', {
      center: [-122.33, 47.6],
      zoom: 12,
      view: 'Auto',

      authOptions: {
        authType: atlas.AuthenticationType.subscriptionKey,
        subscriptionKey: this.key
      }
    });

    //Wait until the map resources are ready.
    this.map.events.add('ready', () => {
      //Create a HTML marker and add it to the map.
       this.map.markers.add(new atlas.HtmlMarker({
         color: 'DodgerBlue',
         text: '10',
         position: [0, 0]
       }));
    });
  }

}