Unexpected value NgxLeafletFullscreenModule. Please add a @NgModule annotation.

ashokpal100 commented 2 years ago

Hi All,

Faced the issue below please HELP ME!

I have do the following steps below:

My node=v12.20.2 and angular cli= version
npm install @runette/ngx-leaflet-fullscreen and npm install @runette/leaflet-fullscreen
My package json { "name": "", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve --live-reload false", "build": "ng build --prod", "deploy": "npm run build && npm run c8y-deploy", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@agm/core": "^1.1.0", "@agm/drawing": "^3.0.0-beta.0", "@agm/js-marker-clusterer": "^1.1.0", "@angular/animations": "~8.2.0", "@angular/cdk": "^8.2.3", "@angular/common": "~8.2.0", "@angular/compiler": "~8.2.0", "@angular/core": "~8.2.0", "@angular/elements": "^14.0.3", "@angular/forms": "~8.2.0", "@angular/google-maps": "^11.0.0", "@angular/material": "^8.2.3", "@angular/platform-browser": "~8.2.0", "@angular/platform-browser-dynamic": "~8.2.0", "@angular/router": "~8.2.0", "@angular/upgrade": "~2.4.0", "@asymmetrik/ngx-leaflet": "^6.0.1", "@c8y/client": "^1007.0.34", "@juggle/resize-observer": "^3.3.1", "@luxedo/heatmap": "^1.2.1", "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "^4.0.0", "@runette/leaflet-fullscreen": "^1.0.6", "@runette/ngx-leaflet-fullscreen": "^1.0.6", "@runette/ngx-leaflet-loading": "^1.0.4", "@types/google-maps": "^3.2.2", "@types/leaflet": "^1.5.8", "agm-direction": "^0.8.9", "agm-overlays": "^2.0.0", "angular-dplayer": "^1.0.8", "angular-ng-autocomplete": "^2.0.5", "bootstrap": "^4.6.0", "chart.js": "^3.3.2", "core-js": "^3.10.1", "echarts": "^5.1.2", "eva-icons": "^1.1.3", "file-saver": "^2.0.5", "flv.js": "^1.6.2", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "heatmap.js": "^2.0.5", "intl-tel-input": "^17.0.13", "jquery": "^3.6.0", "js-marker-clusterer": "^1.0.0", "leaflet": "^1.6.0", "leaflet-geosearch": "^3.6.1", "leaflet-loading": "^0.1.24", "moment": "^2.29.1", "ng-circle-progress": "^1.6.0", "ng-multiselect-dropdown": "^0.3.4", "ng-table-virtual-scroll": "^1.3.8", "ng-zorro-antd": "^8.3.2", "ng2-search-filter": "^0.5.1", "ng2-tel-input": "^2.3.0", "ngx-chips": "^2.1.0", "ngx-echarts": "^5.2.2", "ngx-slimscroll": "^12.2.0", "ngx-spinner": "^8.1.0", "ngx-toastr": "^11.3.3", "resize-observer-polyfill": "^1.5.1", "rxjs": "~6.4.0", "saturn-datepicker": "^8.0.5", "tslib": "^1.10.0", "xlsx": "^0.18.5", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "^0.803.8", "@angular/cli": "~8.2.0", "@angular/compiler-cli": "~8.2.0", "@angular/language-service": "~8.2.0", "@c8y/cli": "1006.6.4", "@types/googlemaps": "^3.43.3", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "autoprefixer": "^7.1.1", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "node-sass": "^4.14.1", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.5.3" } }

PLEASE LET ME KNOW WHERE AM I WRONG

runette commented 2 years ago

I think that there are a few things going on:

I notice that there are some errors also relating to the Loading Control. Those should be cleared first - but they look like they re caused by the same problem.
It looks like you are using Angular 8 - which is quite a few years old and, crucially, is the wrong side of the change to the Ivy compiler!
The current versions of the packages for the Fullscreen Control and Loading Control will only work with versions of Angular later than 12.0.0 since they use the Ivy Compiler partial build (as noted in the readme:

NOTE - after version 1.0.6 - this library is built using ng-packagr and an Ivy partial compile. This should allow compatibility with any version of Angular.io >v12.0.0 (according to the Angular docs).

It looks like I have become lazy about putting that dependency in the package.json file - which is my bug and is why you did not get an error when trying to run on Angular 8! I will fix that.

I would recommend that you update to a version of Angular later than 12 to get the full benefit of the Ivy compiler - the current version is 14! Note that, if you upgrade the version for an existing project then you have to do it one major version bump at a time (i.e. from 8 -> 9 then from 9 -> 10 etc)

ashokpal100 commented 2 years ago

thanks for the response runette

i had found the working demo with ngx-leaflet-fullscreen and that demo is using the angular version 8
https://stackblitz.com/edit/angular-leaflet-advanced?file=package.json
Can you check that above url

runette commented 2 years ago

Yep - I wrote that demo. That was when Angular 8 was the current version.

If you want to use Angular 8 - then you need to downgrade the package versions as follows as per that demo

    "@runette/leaflet-fullscreen": "^1.0.4",
    "@runette/ngx-leaflet-fullscreen": "^1.0.4",
    "@runette/ngx-leaflet-loading": "^1.0.3",
    "@runette/ngx-leaflet-locate": "^2.0.0",
    "@runette/ngx-leaflet-sidebar": "^1.0.3",

runette / ngx-leaflet-fullscreen

Unexpected value NgxLeafletFullscreenModule. Please add a @NgModule annotation. #9