Wie verwende ich HTML als Ansichtsmodul in Express?

130

Ich habe diese einfache Änderung aus dem Startwert versucht und die entsprechenden HTML-Dateien (z. B. index.html) erstellt.

//app.set('view engine', 'jade');
app.set('view engine', 'html');

und diese Datei blieb gleich:

exports.index = function(req, res){
  res.render('index');
};

aber beim rennen bekomme ich

500 Fehler: Modul 'html' kann nicht gefunden werden

Ist meine einzige Option, 'ejs' zu verwenden? Meine Absicht war es, einfaches HTML in Verbindung mit AngularJS zu verwenden.

html node.js express Julio
quelle
7
Siehe dieses Thema für eine Antwort: stackoverflow.com/questions/4529586/… Hoffe, das hilft,
Roland
3
app.engine ('html', require ('ejs'). renderFile);
Dinesh Kanivu

Antworten:

91

Die Antworten unter dem anderen Link funktionieren, aber um HTML bereitzustellen, muss keine Ansichts-Engine verwendet werden, es sei denn, Sie möchten ein funky Routing einrichten. Verwenden Sie stattdessen einfach die statische Middleware:

app.use(express.static(__dirname + '/public'));
Dan Kohn
quelle
3
Ich ging voran und kommentierte den Verweis auf app.set ('view engine', html) aus. Ich erhielt dann die Fehlermeldung "Es wurde keine Standard-Engine angegeben und keine Erweiterung bereitgestellt", die erwartet wird. Als ich jedoch res.render ("index") in res.render ("index.html") änderte, wurde der folgende Fehler angezeigt: TypeError: Die Eigenschaft 'engine' von Objekt # <View> ist keine Funktion.
Julio
4
Es gibt keine View Engine mehr, daher denke ich nicht, dass res.render()es mehr funktionieren wird. Fügen Sie stattdessen Ihre rohen HTML-Dateien ein publicund lassen Sie die statische Middleware die Dateien direkt bereitstellen. Wenn Sie ausgefallenere Routen benötigen, können Sie wahrscheinlich Ihre eigene HTML-Ansichts-Engine einrichten.
Nick McCurdy
6
Was schreiben Sie in den Aufruf von app.get ()?
Ajbraus
5
@ajbraus du brauchst gar keinen app.get () -Aufruf. Dies dient nur dazu, alle HTML-Dateien, die Sie im Ordner / public haben, direkt zu bedienen. Also im Browser zeigen Sie einfach direkt auf das HTML und das war's ... im Grunde kein Routing
dm76
Das Problem, das ich dabei bekommen habe, ist, wenn Sie die Seite nach dem Laden aktualisieren, wird eine Fehlermeldung angezeigt: Fehler: Es wurde keine Standard-Engine angegeben und keine Erweiterung angegeben. Wenn Sie dann Auth, {bereitstellen: LocationStrategy, useClass: HashLocationStrategy}] verwenden, wird Ihrer URL ein Hash hinzugefügt, was aus anderen Gründen schmerzhaft ist. Gibt es einen Weg, dies zu umgehen?
Wuno
33

Führen Sie die folgenden Schritte aus, damit die Render-Engine HTML anstelle von Jade akzeptiert.

  1. Installieren Sie Consolidate und wechseln Sie in Ihr Verzeichnis.

     npm install consolidate
 npm install swig

  2. Fügen Sie Ihrer Datei app.js die folgenden Zeilen hinzu

    var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

  3. Fügen Sie Ihre Ansichtsvorlagen als .html im Ordner "Ansichten" hinzu. Starten Sie Ihren Knotenserver neu und starten Sie die App im Browser.

Obwohl dies HTML ohne Probleme rendert, würde ich Ihnen empfehlen, JADE zu verwenden, indem Sie es lernen. Jade ist eine erstaunliche Template-Engine. Wenn Sie dies lernen, können Sie ein besseres Design und eine bessere Skalierbarkeit erzielen.

AnandShanbhag
quelle
hat keine Methode 'Engine' - nach allen Schritten
ImranNaqvi
Welche Express-Version verwenden Sie? Express 4.x enthält die API app.engine. Weitere Informationen finden Sie unter @ expressjs.com/en/api.html#app.engine
AnandShanbhag
Hat super funktioniert! Ich liebe es, wenn eine einjährige Antwort zum ersten Mal funktioniert.
Matthew Snell
warum es mein CSS und andere immer noch nicht rendern kann
exe vor
23

In deine apps.js einfach hinzufügen

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

Jetzt können Sie die ejs-Ansichts-Engine verwenden und gleichzeitig Ihre Ansichtsdateien als .html beibehalten

Quelle: http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

Sie müssen diese beiden Pakete installieren:

`npm install ejs --save`
`npm install path --save`

Und dann benötigte Pakete importieren:

`var path = require('path');`


Auf diese Weise können Sie Ihre Ansichten als .html anstelle von .ejs speichern .
Ziemlich hilfreich bei der Arbeit mit IDEs, die HTML unterstützen, aber EJs nicht erkennen.

Sudhanshu Gupta
quelle
1
app.set ('views', path.join (__ dirname, '/ path / to / your / folder')); app.set ("Ansichtsoptionen", {layout: false}); app.engine ('html', Funktion (Pfad, opt, fn) {fs.readFile (Pfad, 'utf-8', Funktion (Fehler, str) {if (Fehler) return str; return fn (null, str) ;});});
Nilakantha Singh Deo
16

Versuchen Sie dies für Ihre Serverkonfiguration

app.configure(function() {
    app.use(express.static(__dirname + '/public'));         // set the static files location
    app.use(express.logger('dev'));                         // log every request to the console
    app.use(express.bodyParser());                          // pull information from html in POST
    app.use(express.methodOverride());                      // simulate DELETE and PUT
    app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});

Dann sehen Ihre Rückruffunktionen für Routen folgendermaßen aus:

function(req, res) {
    res.sendfile('./public/index.html');
};
Connor Leech
quelle
14

Es ist keine Ansichts-Engine erforderlich, wenn Sie Angular mit einer einfachen HTML-Datei verwenden möchten. So geht's: In Ihrer route.jsDatei:

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});
Ashish Rawat
quelle
1
Absolut die einfachste Lösung. Ich habe keine View Engine installiert / konfiguriert und das HTML wird gesendet.
Newclique
7

Ich empfehle die Verwendung von https://www.npmjs.com/package/express-es6-template-engine - extrem hellwellige und blitzschnelle Template-Engine. Der Name ist etwas irreführend, da er auch ohne expressjs funktionieren kann.

Die für die Integration express-es6-template-enginein Ihre App erforderlichen Grundlagen sind recht einfach und einfach zu implementieren:

const express = require('express'),
  es6Renderer = require('express-es6-template-engine'),
  app = express();
  
app.engine('html', es6Renderer);
app.set('views', 'views');
app.set('view engine', 'html');
 
app.get('/', function(req, res) {
  res.render('index', {locals: {title: 'Welcome!'}});
});
 
app.listen(3000);
Erweitern Sie das Snippet
Hier ist der Inhalt der index.htmlDatei, die sich in Ihrem Verzeichnis "Ansichten" befindet: 

<!DOCTYPE html>
<html>
<body>
    <h1>${title}</h1>
</body>
</html>
Didinko
quelle
4

Die Antwort ist sehr einfach. Sie müssen app.engine ('html') verwenden, um * .html-Seiten zu rendern. Versuchen Sie dies. Es muss das Problem lösen.

app.set('views', path.join(__dirname, 'views'));
**// Set EJS View Engine**
app.set('view engine','ejs');
**// Set HTML engine**
app.engine('html', require('ejs').renderFile);

Die HTML-Datei funktioniert

Dinesh Kanivu
quelle
2
Unvollständige Antwort. Wo werden diese Änderungen vorgenommen? Angenommen, app.js, aber Ihre Antwort muss spezifisch sein. Dies ist wahrscheinlich auch nicht alles, was geändert werden muss, da das Ergebnis nur dieser drei Änderungen / Ergänzungen "Modul 'ejs' kann nicht gefunden werden" ist. Ihre Antwort ist wahrscheinlich nah, aber Sie müssen imho nur ein bisschen mehr Infos hinzufügen.
Newclique
Das Rendern ist auch nicht dasselbe wie das Bereitstellen einer Datei. Beim Rendern muss der Server eine Datei vorverarbeiten und den dynamischen Inhalt hinzufügen, der an die Rendermethode übergeben wird. Vielleicht wollte das OP das, aber einige Leute verbinden Rendering mit Serving. Sehr unterschiedliche Konzepte.
Newclique
@wade its zum Rendern von HTML-Dateien anstelle der ejs-Datei.
Dinesh Kanivu
3

HTML-Dateien können mit der ejs engine gerendert werden:

app.set('view engine', 'ejs');

Und stellen Sie sicher, dass Ihre Dateien unter "/ views" mit ".ejs" benannt sind.

Zum Beispiel "index.ejs".

JerryFZhang
quelle
Es funktioniert, fühlt sich aber etwas hackig an. Wissen Sie, ob es Einschränkungen bei der Verwendung von .ejs anstelle von .html gibt? Prost auf die wahrscheinlich schnellste Lösung, die trotzdem vorgeschlagen wurde!
Mikeym
3

Kommentieren Sie die Middleware für HTML aus, dh

//app.set('view engine', 'html');

Verwenden Sie stattdessen:

app.get("/",(req,res)=>{
    res.sendFile("index.html");
});
Shivam Chhetri
quelle
2

HTML ist keine Ansichts-Engine, aber ejs bietet die Möglichkeit, HTML-Code darin zu schreiben

Wael Chorfan
quelle
1

Um HTML-Seiten durch Routing zu bedienen, habe ich dies getan.

var hbs = require('express-hbs');
app.engine('hbs', hbs.express4({
  partialsDir: __dirname + '/views/partials'
}));
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');

und meine .html-Dateien in .hbs-Dateien umbenannt - Lenker unterstützen einfaches HTML

Avinash
quelle
1

Führen Sie die folgenden Schritte aus, damit die Render-Engine HTML anstelle von Jade akzeptiert.

Install consolidate and swig to your directory.

 npm install consolidate
 npm install swig

add following lines to your app.js file

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.

Das sollte funktionieren

Md Mehadi Hasan Mozumder
quelle
1

Probieren Sie diese einfache Lösung aus, sie hat bei mir funktioniert

app.get('/', function(req, res){
    res.render('index.html')
  });
Kiryamwibo Yenusu
quelle
1
Sie sollten alle Ihre Zeilen hinzufügen, dies allein funktioniert nicht.
MushyPeas
1

Installieren Sie die ejs-Vorlage

npm install ejs --save

Verweisen Sie auf ejs in app.js.

app.set('views', path.join(__dirname, 'views'));`
app.set('view engine', 'ejs');

Erstellen Sie eine EJS-Vorlage in Ansichten wie views / indes.ejs und verwenden Sie EJS-Tempalte im Router

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});
kta
quelle
0

Rendern Sie die HTML-Vorlage mit Hilfe von swig. 

//require module swig    
    var swig = require('swig');

// view engine setup    
    app.set('views', path.join(__dirname, 'views'));
    app.engine('html', swig.renderFile);
    app.set('view engine', 'html');
Harendra Singh
quelle
0

HTML-Dateien müssen nicht gerendert werden.
Eine Render-Engine wandelt eine Datei, die keine HTML-Datei ist, in eine HTML-Datei um.
Um eine HTML-Datei zu senden, gehen Sie einfach wie folgt vor:

res.sendFile("index.html");

Möglicherweise müssen Sie verwenden, __dirname+"/index.html"damit express den genauen Pfad kennt.

GideonMax
quelle