Issue encountered during angular-cli build: leaflet.browser.print is unrecognized as a module

I recently integrated leaflet.js into my Angular 4.1.1 app to show maps and layers successfully. Now, I'm attempting to incorporate a leaflet plugin known as browserPrint

To import Leaflet into a Component, I use the following code:

import * as L from "leaflet";
import * as browserPrint from "../../../../assets/scripts/leaflet.browser.print.min";

The import statement for Leaflet is functioning properly as I can create and display a map.

An issue arises when adding the second line for browserPrint.

During the angular-cli build process, an error is thrown:

ERROR in /src/app/services/driverLists/driver-lists-map/driverLists.map.component.ts (8,31): File '/src/assets/scripts/leaflet.browser.print.min.js' is not a module.

Steps taken to troubleshoot so far:

  1. I included declare var browserPrint: any; in typings.d.ts

  2. Attempted switching the import to:

    import "../../../../assets/scripts/leaflet.browser.print.min";

    This resulted in multiple errors and caused issues with the maps

  3. Tried changing the import to:

    import * as BrowserPrint from "../../../../assets/scripts/leaflet.browser.print";

    Resulting in the error Cannot find module leaflet.browser.print

  4. Also tried adjusting file paths to utilize files from the leaflet.browser.print node modules folder, but encountered the same errors.

QUERY

Seeking assistance on how to integrate the leaflet browser print plugin with a leaflet map within an Angular 4+ application.

Thank you in advance.

javascriptangulartypescriptleafletangular-cli

Answer №1

When I was going through the documentation on ngx-leaflet, I came across the instruction to create a file named ./src/typings.d.ts and include the code snippet below.

import * as L from 'leaflet';
declare module 'leaflet' {
  namespace control {
    function browserPrint(options?: any): Control.BrowserPrint;
  }
  namespace Control {
    interface BrowserPrint {
      addTo(map: L.Map): any;
    }
  }
}

This method successfully worked for me.

Answer №2

To make sure the file is included in your webpack output without having to import it, add it to the "scripts" array in your angular-cli.json. Since this file doesn't export anything, there's no need to import it anyway.

For more information, you can refer to the documentation available at:

https://github.com/angular/angular-cli/wiki/stories-global-scripts

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to convert a 2D PHP array into a JavaScript array?

I have encountered a problem with a PHP array setup as follows: $output = array(array(1,1,1,1),array(2,2,2,2),array(3,3,3,3)); When I encoded the array to JSON, I received this output: $output = {"1":[1,1,1,1],"2":[2,2,2,2],"3":[3,3,3,3]} My goal is to ...

phpjsonjavascript

javascript if an error occurs, refresh the webpage

Currently, I am inquiring about the most effective method for managing JavaScript errors. Given that my application relies heavily on JavaScript, despite diligent testing efforts, encountering bugs is almost certain. I'm interested in knowing if ther ...

javascripterror-handling

What is causing the bars to move forward on the x-axis starting from the second one?

I have been working on a chart and here is the code I have so far: plot = $.jqplot('SalesChart2', [ [[1,5]], [[1,10]], [[1,15]], [[1,20]], [[2,25]], ...

javascriptjquerychartsjqplot

There is only a single value visible from a concealed input

<?php foreach($_color_swatch as $_inner_option_id){ preg_match_all('/((#?[A-Za-z0-9]+))/', $_option_vals[$_inner_option_id]['internal_label'], $matches); if ( count($matches[0]) > 0 ) { $color_value = $matches[1][count($ma ...

phpjavascriptforms

Why isn't my div displaying in JavaScript?

Currently working on a project for the Odin Project front-end web development. My task involves creating a grid using javascript/jQuery. I attempted to use the createElement method but have encountered an issue in making the div visible within the html. Am ...

javascriptjqueryhtml

There seems to be a missing provider for TemplateRef in the NgIf directive chain

I am attempting to display a checkmark when an answer is marked as the accepted answer: template: `<div ngIf="answer.accepted">&#10004;</div>` However, I encountered this error: EXCEPTION: No provider for TemplateRef! (NgIf ->Template ...

angularangular2-template

Creating a custom colored progress bar in Angular 2 using Bootstrap 4

I've been working on implementing a bootstrap progress bar with ng-bootstrap components. The documentation outlines 4 preset coloring options using the directive "type": "success", "info", "warning", or "danger". (https://ng-bootstrap.github.io/#/comp ...

angularbootstrap-4ng-bootstrap

"Learn how to use the jQuery change() function to update row statuses and display them in the corresponding table

Encountering a significant issue when attempting to change the status of a specific row in a table using the <select> tag. The implementation involves jQuery-Ajax, where upon clicking on a <select within a particular row (e.g., changing the statu ...

javascriptphpjquerymysqlajax

How come the item I just inserted into a JavaScript array is showing up as undefined when I try to retrieve it immediately after adding it?

Apologies for the messy code, but I'm facing an issue with my JavaScript. I can't figure out why the specified child is not considered as a task to derive from: var childrenToOperateOn = []; for (var i = 0; i < $scope.der ...

javascriptangularjs

Safari 11.1 and Angular 9 - config object missing a defined key-value

While using Safari, I have encountered a problem in the Primeng input text field. When I type into the text box, errors are logged into the console. handleKeypress — injected.entry.js:8231TypeError: undefined is not an object (evaluating 'settin ...

angularsafariprimeng

ng-pattern is not throwing any errors

After spending hours on this issue, I realized it was time to seek help here. I have been struggling with setting up an input field that displays a specific message when someone tries to type in a number. My extensive research brought me to ng-pattern as ...

angularvalidationinputng-pattern

Establishing a connection to a website using webosocket without relying on a public

I have limited knowledge about websockets, but I do know how to establish a connection like this: const CHAT_URL = 'ws://echo.websocket.org/'; However, what should be done when a website does not have a public websocket API? How can the data be ...

javascriptnode.jsangularwebsocket

Issue may arise when using custom directive in conjunction with mat-menu-item directive, potentially leading to malfunction. The root

Attempting to create a custom directive that will disable a button within a mat-menu and execute additional logic. Simplifying the code, here is the HTML template: <mat-menu #editMenu="matMenu"> <ng-template matMenuContent> <butto ...

angularangular-material

Using the Node http module to access the request body while intercepting the http.request function

I am in the process of developing an internal logging system that captures Node's http module by replacing the request method. This is my current implementation: const http = require('http'); const oldHttpRequest = http.request; http.req ...

javascriptnode.jshttp

What is your approach to converting this jQuery code to ES6 syntax?

The concept involves gathering all the links and corresponding IDs, and hiding inactive content. When a link is clicked, the associated content should be displayed. The Structure <div class="navbar"> <nav> <ul class="navTabs"> ...

javascriptjqueryecmascript-6

What is the best way to display a skeleton during the video loading process?

Is there a way to display a skeleton or placeholder before the full video content loads? I am struggling to find out how to catch that event. Right now, a default player appears first followed by the actual video with different dimensions. Here is my cust ...

javascriptreactjsnext.js

What is the best way to align a modal with a layout when it appears far down the components hierarchy?

Struggling with creating a React modal and facing some issues. Let's consider the structure below: React structure <ComponentUsingModal> <Left> <ButtonToActivateModal> ... </ButtonToActivateModa ...

javascripthtmlcssreactjs

NextJS is throwing an error stating that the element type is invalid. It was expecting either a string for built-in components or a class/function for composite components, but instead received an object

I encountered the following issue: Error - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but received an object. Here's the code from my \components\LayoutWrapper.js: i ...

javascriptreactjsnext.js

Leveraging Angular's catchError method to handle errors and return

One of my challenges involves a model class that represents the server response: class ServerResponse { code: number; response: string; } Whenever I make api calls, I want the response to always be of type Observable<ServerResponse>, even in ...

javascriptangulartypescriptrxjsobservable

Tips for verifying the types of an Angular component template

I have a specific component that requires two inputs. I am using TypeScript and looking for a way to ensure that the second input is only provided if the first input is also provided. For example: export class MyTestClass implements Test{ @Input() dog?: ...

angulartypescript