Azure Maps tag not working

[KanupriyaGoel]

Hi, I am creating the project as explained in the readme file but tag doesnt work and isnt recognized. error message : 'azure-map' is not a known element:

1. If 'azure-map' is an Angular component, then verify that it is part of this module.
2. If 'azure-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Angular version used - 10

Also, I cannot understand how the solution on git is supposed to work, should I create a new project and then add parts of it because it does not run in its current state and I tried running from 3-4 folders being the root solution and angular cannot find target project.

It will be great help as I am working on a solution that needs azure map usage extensively.

[arnaudleclerc]

Hi @KanupriyaGoel

Could it be that the call to AzureMapsModule.forRoot is missing ? I just tried it locally with the latest version of the library from npm and it looks fine to me. Here's my app.module if you need an example :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AzureMapsModule } from 'ng-azure-maps';
import { AuthenticationType } from 'azure-maps-control';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AzureMapsModule.forRoot({
      authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: '<your-subscription-key>',
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Concerning the git repository, the code of the library itself can be found under /projects/ng-azure-maps. That's the only project uploaded to npm. All the other folders under /projects are sample using the library once it is built. For example, you could do ng b ng-azure-maps | ng s sample-simple-map to build the library and start the sample project. I personally use an ènvironment.local.tscontaining my subscription keys on each project and use a-c local` flag to start the sample, so the subscription keys are not in this repository.

Let me know if it solves your issue.

[KanupriyaGoel]

Thank you, that was very helpful. The mistake I was making was in The way i passed authType.

Thank you so much.

On Tue, Sep 29, 2020, 10:12 AM Arnaud Leclerc notifications@github.com wrote:

Hi @KanupriyaGoel https://github.com/KanupriyaGoel

Could it be that the call to AzureMapsModule.forRoot is missing ? I just tried it locally with the latest version of the library from npm and it looks fine to me. Here's my app.module if you need an example :

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AzureMapsModule } from 'ng-azure-maps';

import { AuthenticationType } from 'azure-maps-control';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

AzureMapsModule.forRoot({

  authOptions: {

    authType: AuthenticationType.subscriptionKey,

    subscriptionKey: '<your-subscription-key>',

  }

})

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Concerning the git repository, the code of the library itself can be found under /projects/ng-azure-maps. That's the only project uploaded to npm. All the other folders under /projects are sample using the library once it is built. For example, you could do ng b ng-azure-maps | ng s sample-simple-map to build the library and start the sample project. I personally use an ènvironment.local.tscontaining my subscription keys on each project and use a-c local` flag to start the sample, so the subscription keys are not in this repository.

Let me know if it solves your issue.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/arnaudleclerc/ng-azure-maps/issues/16#issuecomment-700422386, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJXRFJ7PPPUKXTSKM44R4J3SIFQSXANCNFSM4R5F4HXA .

[KanupriyaGoel]

Hey,

Though map started coming up but I can still see issues in my html where I am using azure map and layer tags. This works fine mostly but intermittently it fails the build and solution does not work.

HTML <azure-map mapStyle="grayscale_dark" [dataSources]="[dataSource, Isochronedata]" (onReady)="mapReady($event)" (onClick)="MapClicked($event)"> <map-symbol-layer dataSourceId="search" [iconOptions]="iconOptions"> <map-polygon-layer dataSourceId="Isochronedata" [fillColor]="fillColor" [fillOpacity]="fillOpacity">

_Error example:

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
src/app/app.component.html:4:75 - error NG8002: Can't bind to 'fillOpacity' since it isn't a known property of 'map-polygon-layer'.
1. If 'map-polygon-layer' is an Angular component and it has 'fillOpacity' input, then verify that it is part of this module.
2. If 'map-polygon-layer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

4   <map-polygon-layer dataSourceId="Isochronedata" [fillColor]="fillColor" [fillOpacity]="fillOpacity"></map-polygon-layer>_

[arnaudleclerc]

Hmm, that's weird. It looks like your application doesn't find the library anymore while building. I would assume that's an issue with your build process, as it happens apparently randomly. Can you reproduce it easily and pinpoint something which might cause the build to fail ?

I've been trying to reproduce the error with the map-polygon-layer, but without any success. Here's an example which builds for me every time :

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

@Component({
  selector: 'app-root',
  template: '<azure-map [zoom]="zoom" [dataSources]="[dataSource]" (onReady)="mapReady()">' +
    '<map-polygon-layer dataSourceId="source" [fillColor]="fillColor" [fillOpacity]="fillOpacity"></map-polygon-layer>' +
    '</azure-map>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public dataSource: atlas.source.DataSource;
  public fillOpacity = 0.5;
  public fillColor = '#1a73aa';

  public zoom = 2;

  mapReady() {
    this.dataSource = new atlas.source.DataSource('source');
    this.dataSource.add(new atlas.data.Polygon([
      [-50, -20],
      [0, 40],
      [50, -20],
      [-50, -20]
    ]));
  }

}

[arnaudleclerc]

I'll close this one as I don't have any more info and I think it is more related to your build. Feel free to reopen it if you need any assistance.

[gridpatrik]

I'm seeing the same issue with the azure-map tag not being recognized in vs code.

Hi, I am creating the project as explained in the readme file but tag doesnt work and isnt recognized. error message : 'azure-map' is not a known element:

1. If 'azure-map' is an Angular component, then verify that it is part of this module.
2. If 'azure-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Angular version used - 10

The map renders but the tag isn't recognized. From my app.module...

AzureMapsModule.forRoot({
      authOptions: environment.mapAuthOptions
})

package.json

"azure-maps-control": "^2.0.31",
"azure-maps-drawing-tools": "^0.1.4",
"azure-maps-rest": "^2.0.5",
"ng-azure-maps": "^2.0.3",

PS: Using subscription key option in the environment file.

[arnaudleclerc]

@gridpatrik Could you please provide the content of your environment.mapAuthOptions without the subscription key or any sensitive information ?

[gridpatrik]

@gridpatrik Could you please provide the content of your environment.mapAuthOptions without the subscription key or any sensitive information ?

Here's my environment file content:

import { AuthenticationType } from 'azure-maps-control';

export const environment = {
  production: false,
  mapAuthOptions: {
    authType: AuthenticationType.subscriptionKey,
    subscriptionKey: '<stripped for obvious reasons>'
  }
};

[arnaudleclerc]

@gridpatrik Sorry, I missed the part where you said the map was rendering. I just created locally a new angular 10 app and referenced the v2.0.3 of the library, still don't have any build issue and the map renders. The azure-map tag is always recognized so far. Could you maybe please setup a git repo with your current solution (and without the subscription key and other secrets you may have) so I can clone it and see if I face the issue ?

[RobARichardson]

Really wanted to use this library but I'm encountering similar issues as @gridpatrik within an Angular 11 App. In addition to Angular not recognizing the directives/components, the biggest problem I was seeing today was that I couldn't get the azure-map directive to initialize on a page when importing the AzureMapsModule from within a lazy loaded Feature Module. Once I moved the import into the App Root Module, the map started working but that kinda defeats the purpose of being able to load Features and their dependencies lazily.

[arnaudleclerc]

@RobARichardson @gridpatrik Can one of you please set up a git repo where I could reproduce the issue? I will gladly take another look at it. I will also dig into the lazy loading whenever I find time to do so

[jonlighthill]

@arnaudleclerc @RobARichardson @gridpatrik

I am experiencing this as well. I am trying to import the AzureMapsModule in a lazy loaded feature module and not the app module. This package along with all its dependencies adds at least 1.4mb to the initial load, which is why I want to lazy load it. When importing a module in a lazy loaded module you are not able to use the forRoot, and must use the forChild.

Here is a git repo: https://github.com/jonlighthill/azure-maps-lazy-loaded

If you go to /map you can see that the map is not rendering.

[arnaudleclerc]

@jonlighthill Thanks a lot for your input! I took a look at your example and have been reworking the library accordingly in order to support lazy loading. You now have a forChild method available which you can call with the configuration as parameter. Which gives something like this :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MapComponent } from './map/map.component';
import { AzureMapsModule } from 'ng-azure-maps';
import { environment } from '../../environments/environment';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [{ path: "", component: MapComponent }];

@NgModule({
  declarations: [MapComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    AzureMapsModule.forChild({
      authOptions: environment.authOptions
    })
  ]
})
export class MapModule { }

I published a version 3.1.0-alpha.2 of the package. Could you check if this version works for you ? I will publish a stable version as soon as I have some feedback.

[jonlighthill]

@arnaudleclerc Just checked it out and it is looking good. With all the dependencies, it is now adding an initial load of around 1.1MB, still a bit high but a lot better.

Wish there was a way to lazy load the azure-maps-control(or the other 2 dependencies) even more since that unpacked size is a whopping 6.7mb.

Thanks for doing this!

[arnaudleclerc]

Thanks for checking this out. I just published a stable 3.1.0.

I totally agree that the unpacked size is too high. I will take a look at it later and see if I find something to trim out from the package.

[jonlighthill]

@arnaudleclerc Anyway to load the azure-maps-control dynamically via CDN or by some other means? Before using your library that's what I was doing, it wasn't the prettiest but kept the initial load down.

[arnaudleclerc]

I could simply assume that developers add a script tag to reference the atlas.min.js library and develop directly with the atlas namespace, but that is definitely less comfortable and that is not really the vision I have of a modern web application. Luckily, the unpacked size of a package is not what your application will load at runtime. If you take a look at the unpacked version of azure-maps-control, atlas.js and atlas.min.js are delivered within the package, one of them is always useless, often the non minified version.

For ng-azure-maps, the problem is more linked to the fact that the Angular CLI builds in 3 different modules formats : fesm2015, esm2015 and umd. Those 3 builds are available inside the library, but your angular application should consume only the fesm2015 I think. You can find more information on how the Angular CLI generates packages here : https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

I published a version 3.2.0 which removes half of the file contained in the library (which was due to a wrong configuration during the build on my side), the size of the package is slightly smaller. What may have an effect on your application is that the services used to communicate with the REST API are now provided in the AzureMapsModule directly and should now not be removed from your application's bundles via tree shaking if you do not need them.

[jonlighthill]

@arnaudleclerc Got it, makes sense. Really wish azure would optimize their library :D. Thanks for all the support and quick updates! Using this library has been a breeze.