D3.js nicht definiert, Express Serving statische Dateien

Question

Ich habe Express Serving-up statische js-Dateien, und eine lokale Kopie von d3.js (v4) ist unter ihnen. Alle anderen js-Dateien werden von meinen Tags geladen, aber d3 ist nicht definiert. Ich habe auch versucht, von einer URL zu laden, aber keine Würfel, jquery lädt gut ("https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"), aber nicht d3 ("https://d3js.org/d3.v4.min.js").

Natürlich ist es in der Lage, die Ressource zu finden, weil ich kein 404 bekomme, aber es läuft nie. Wenn ich eine console.log ('Hallo') in die d3-Quelle werfe, wird sie nicht angezeigt.

Ich habe es in Chrome und Firefox versucht .. Ich habe Antworten gesehen, die sagen, http-Server zu verwenden, aber ist nicht der statische Server express das gleiche tun?

Vielen Dank im Voraus, wenn Sie eine Idee haben.

Dateistruktur:

app.js:

const express = require('express'); 
const app = express(); 
const router = express.Router(); 
const mongoose = require('mongoose'); 
const bodyParser = require('body-parser'); 
const path = require('path'); 

const routes = require('./routes'); 
const graph = require('./graph'); 

//urls to use 
const localMongoUrl = "mongodb://localhost:27017/test"; 

const url = localMongoUrl 

//connect to db. make sure mongo daemon is running. 
mongoose.connect(url); 
const connection = mongoose.connection; 

connection.on('error', err => console.err(err)); 
connection.on('open', err => { 
    if (err) console.err(err); 
    else console.log('connected to ' + url); 
}); 

//middleware attaches form info to req.body 
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(bodyParser.json()); 

//set up pug as the templating engine 
app.set('view engine', 'pug'); 

//serve up files in public folder 
app.use(express.static('public')); 

//setup router as middleware 
app.use('/', router); 

//serve up the index page when root is hit 
router.get('/', (req, res) => { 
    connection.db.listCollections().toArray((err, collections) => { 
    if (err) { 
     console.log(err); 
     res.json(err); 
     res.end(); 
    } else { 
     const collectionNames = collections.map(collection => { 
     return collection.name; 
     }) 
     req.collectionNames = collectionNames; 
     res.render('layout', { names: req.collectionNames, url: url }); 
    } 
    }); 
}) 

//route for when user selects which collection in dropdown 
router.use('/collections', routes); 
router.use('/graph', graph); 

//listen for requests 
app.listen(3000,() => { 
    console.log('Listening on 3000'); 
}); 

graph.pug

html 
    head 
    title GateCounts Graph 
    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css") 
    link(rel="stylesheet" href="/css/styles.css") 
    link(rel="stylesheet" href="/css/barchart.css") 
    link(rel="stylesheet" href="/css/pikaday.css") 
    body 
    .page-wrapper 
     .row 
     .col-md-2 
      h1 D3 Graph w/ Mongodb 
      .form-wrapper#graph-query 
      form(method="POST" action="/graph/getgraph") 
       fieldset.form-group 
       legend Date Range 
        input.form-control(type="text" id="fromDate" name="fromDate" placeholder="From:") 
        input.form-control(type="text" id="toDate" name="toDate" placeholder="To:") 
       fieldset.form-group 
       div.form-check 
        label.form-check-label(for="sunday") Sunday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="sunday" name="weekdays" value="1" checked) 
       div.form-check 
        label.form-check-label(for="monday") Monday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="monday" name="weekdays" value="2" checked) 
       div.form-check 
        label.form-check-label(for="tuesday") Tuesday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="tuesday" name="weekdays" value="3" checked) 
       div.form-check 
        label.form-check-label(for="wednesday") Wednesday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="wednesday" name="weekdays" value="4" checked) 
       div.form-check 
        label.form-check-label(for="thursday") Thursday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="thursday" name="weekdays" value="5" checked) 
       div.form-check 
        label.form-check-label(for="friday") Friday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="friday" name="weekdays" value="6" checked) 
       div.form-check 
        label.form-check-label(for="saturday") Saturday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="saturday" name="weekdays" value="7" checked) 
       fieldset.form-group 
       div.form-check 
        label.form-check-label(for="sunday") Include Closed Days?&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="includeClosed" name="includeClosed" value="true" checked) 
       button.btn(type="submit") Submit 
       hr 
      .summaryBox 
      h4 Summary 
      ul.list-group#summary-list 
     .col-md-10 
      h4 GateCounts Graph 
      .graphBox 
      #graph 
script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js") 
script(scr="js/d3.js") 
script(src="js/barchart.js") 
script(src="js/pikaday.js") 
script(src="js/initGraph.js") 
script(src="js/events.js") 

Answer 1

Sie liefern Ihre statischen Dateien aus Ihrem Verzeichnis ./public unter demselben Verzeichnis, in dem sich app.js befindet. Unter diesem Ordner müssen Sie ein Verzeichnis js mit darunter haben. Wenn Sie D3 from npm installiert haben, dann wird es in Ihrem <project root>/node_modules sein und Sie müssen das d3.js von dort finden und es kopieren. Sie können Build-Aufgaben dazu bringen, dies mit einer Menge von Tools zu tun, um sie zu automatisieren.

Stellen Sie sicher, dass sich die Datei in public/js befindet und dass sie korrekt ist. Dann versuche es noch einmal.

EDIT: Um das hinzuzufügen, wenn Sie überprüfen Ihre Netzwerk-Registerkarte in Dev Tools und Sie nicht 404'ing dies, gehen Sie zu der Zeile, die nach d3.js fragt und klicken Sie auf, dann auf die Registerkarte "Antwort" Sehen Sie, was Sie tun bekommen, denn das kann viel über das, was falsch ist, sagen.

EDIT # 2: Könnte auch ein Tippfehler sein Vielleicht in script(scr="") :)