Search code examples
javascriptangularjsexpressangularjs-directiveangularjs-material

AngularJs DateTimepicker - error when trying to include .js.map file in pug template


I am running a MEAN stack environment, and ran into an issue when trying to include a third party addon to angularjs material.

We have a PUG template acting as our main view, and are declaring all dependencies there. In it, I have this line:

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 portion of the src is set to our node-modules folder using this line:

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

With that setup, I am getting the following error in the dev console, in reference to the .map.js file only (everything else seems to work):

Uncaught SyntaxError: Unexpected token :

I have seen some answers regarding the MIME type being incorrect, or this being an issue with chrome, but I'm starting to lean towards something of mine being set up incorrectly. What am I doing wrong?


Solution

  • With the help of the author, i have this figured out. In this specific case, the .js.map file was not needed. Also changed the below lines a bit (removed the type attribute for the js file, and used 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 github exchange with the author. Hopefully this answer helps a random browser in the future :)