Issue encountered while attempting to add .js.map file to AngularJs DateTimepicker within pug template

I am currently using a MEAN stack environment and encountered an issue while attempting to integrate a third-party extension into AngularJS material.

Our main view is based on a PUG template where we define all dependencies. Within it, I have included the following lines:

script(type="text/javascript" src="scripts/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js")
script(type="text/javascript" src="scripts/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js.map")
link(rel="stylesheet" href="scripts/ng-material-datetimepicker/dist/material-datetimepicker.min.css")

The scripts part of the source is directed to our node-modules folder by this directive:

app.use('/scripts', express.static(path.join(__dirname, "./node_modules")));

Despite this configuration, I am encountering an error specifically related to the .map.js file (all other components appear to be working) in the browser's console:

Uncaught SyntaxError: Unexpected token :

While I've come across suggestions about incorrect MIME types or Chrome-related issues, I suspect that there may be a mistake in my setup. Can anyone pinpoint what might be going wrong?

javascriptangularjsexpressangularjs-directiveangularjs-material

Answer №1

Thanks to the assistance of the author, I have managed to solve this issue. It turns out that in this particular scenario, we did not require the .js.map file. Additionally, I made some modifications to the code below (removed the type attribute for the js file and utilized non-minified versions):

script(src="scripts/ng-material-datetimepicker/js/angular-material-datetimepicker.js")
link(rel="stylesheet" type="text/css" href="scripts/ng-material-datetimepicker/css/material-datetimepicker.css")

Here is a link to the conversation on github with the author. I hope that this solution will be beneficial to someone in need in the future :)

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

Creating a series of promises in a structured chain

How can the code structure be improved, especially regarding exception handling within a "promise chain"? $("#save").click(function(e) { e.preventDefault(); let $self = $(this); let profile = {} $self.prop("disabled" ...

javascriptjqueryajaxpromise

Split vue.js templates into individual files

Is there a way to modify this code in Vue.js to achieve the following: <template type="login" /> <template type="subscribe" /> <template id="login"> <label>Username</label> <input placeholder="Enter your username" ke ...

javascriptvue.js

AngularJS is not recognizing the starting number as zero when using ng-pattern

When validating a phone number in Brazil, it must start with zero and be 8 digits long. The input field provided is: <input type="number" name="mobileNo" ng-model="booking.phone" ng-pattern="/^[0-9]{8,8}$/" required placeholder="Phone no"> The vali ...

angularjs

Executing a function from a JavaScript file within Robot Framework

It is possible to run javascript from a file. Run JavaScript ${CURDIR}/js_to_run.js However, I am wondering how to call a function by its name from this file? ...

javascriptseleniumautomated-testsrobotframework

Getting the date from a datetime JSON - here's how!

How can I extract the date from a JSON datetime string like 2013-11-09T00:00:00 using either Jquery or JavaScript? ...

javascriptjqueryjson

What is the most effective way to organize an API structure in ExpressJs for a system with numerous chapters containing various topics, each of which has its own

How should I design the API structure for a system with multiple chapters, each containing multiple topics and one PDF for each topic? I am working with Express. In my database, I have two tables - one for chapters and another for topics and their associa ...

node.jsapiexpress

Issue with Ajax: Value returned from database select is '0' instead of string

Operating a website for a pre-owned car dealership, I have developed a system that showcases all the current vehicles in stock on a single page using a specific SQL query: "SELECT * FROM inventory ORDER BY timestamp ASC". Recently, I've been explorin ...

javascriptphpajaxmysqli

Why is access to fetch from the origin localhost blocked by CORS policy, while posting using ajax does not face this issue?

Let's dive into the difference between AJAX and Fetch without involving CORS. I want to understand why an AJAX POST request works flawlessly while a Fetch POST request fails! Currently, I am using jQuery and AJAX for both GET and POST operations. Whe ...

javascriptjqueryajaxfetch-api

Differentiating between an individual array and an array containing multiple arrays

Can jQuery differentiate between a regular array, an array of arrays, and an array of objects? var a = [1,2,3]; var a2 = [[12,'Smith',1],[13,'Jones',2]]; var a3 = [{val:'12', des:'Smith', num:1}]; //a = regular arr ...

javascriptarrays

Numerical values are not considered by the JavaScript table filter

I'm having trouble with dynamically filtering the content. It works fine for the first two columns, but not for the third one. Maybe I need some additional JavaScript? Here is the link to my snippet: `https://www.w3schools.com/code/tryit.asp?filen ...

javascripthtml

Retrieving information from MongoDB in an Express.js route handler

I'm trying to create a validation function that can check for the existence of a mongo_id. I've managed to write the function, but I'm struggling to pass the result back to the calling route. Below is the code for the function, based on an ...

javascriptnode.jsmongodbexpress

Is it possible to send a variable to a mandatory file?

While working with Express, I am attempting to move my minification process to a required file: app.js: var app = express(); var minify = require("./minify.js"); Within that file, I am trying to set my template engine. minify.js: var app = express(); ...

node.jsexpress

Having trouble with WordPress enqueue causing a noConflict() error - $ is not functioning properly?

After 8 years as a WP developer, the nagging issue of $ is not a function, jQuery is not a function, or foundation is not a function persists and it's driving me crazy. Can someone please help me resolve this once and for all? This is my enqueue.php: ...

javascriptphpjquerywordpresszurb-foundation-5

response cannot be generated outside of the db.query function

router.get('/details/(:id)', (req, res) => { let vehicle_base; db.query("select b.name, count(b.name) AS total_vehicles from base AS b, vehicle AS v where b.id = v.base_id AND b.fleet_id = " + req.params.id , function(err, result){ ...

javascriptnode.jsexpress

Running the Express service and Angular 6 app concurrently

Currently, I am in the process of developing a CRUD application using Angular6 with MSSQL. I have managed to retrieve data from my local database and set up the necessary routes, but I am encountering difficulties when it comes to displaying the data on th ...

javascriptnode.jssql-serverangularexpress

JavaScript HTML Object Manipulation and Templating System

I am searching for a JavaScript library that is capable of performing the following: var items = [1, 2]; var html = div( ul({ id: "some-id", class: "some-class" })(items.each(function(item) { return li(item); })); html == ...

javascripthtmljsondomtemplate-engine

submit the data to the database

How can I successfully pass the value from the Ajax code to the database in this program aimed at displaying user details? There seems to be an error in the code for passing the value. What steps should I take to rectify this issue? function showUser() ...

javascriptphphtmlajax

Enumerate the variable values that are validated using jQuery

I've made good progress with this in jsFiddle, but I can't seem to figure out why the first value isn't displaying a bullet point.. Check out my code on jsFiddle! <div id="checkboxes"> <input id="chkbx_0" type="checkbox" name= ...

javascriptjqueryvariables

A guide to using select2.js to activate a selection based on a data attribute

I'm faced with the following html snippet: <div class='multiWrapper'> <select id="multi" class="js-dropdown-from-code"> <optgroup class='def-cursor' label='Code' data-city ...

javascriptjqueryjquery-select2

Conditionally enable or disable button by comparing textbox values within a gridview using C# programming

Hey there! I'm currently diving into the world of JavaScript and C#. Feel free to correct me if you see any mistakes along the way. Check out my gridview code snippet below: <asp:GridView ID="GridView1" CssClass="table table-hover table-bordered" ...

javascriptc#asp.netgridview