ExpressのビューエンジンとしてHTMLを使用するにはどうすればよいですか？

130

シードからこの簡単な変更を試し、対応する.htmlファイル（index.htmlなど）を作成しました。

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

そしてこのファイルは同じままでした：

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

でも走っている間に

500エラー：モジュール「html」が見つかりません

'ejs'を使用する唯一のオプションはありますか？私の意図は、AngularJSと組み合わせてプレーンHTMLを使用することでした。

html node.js express

— フリオ
ソース

7

回答については、このトピックを参照してください： stackoverflow.com/questions/4529586/… これがお役に立てば

— 幸い

3

app.engine（ 'html'、require（ 'ejs'）。renderFile）;

— Dinesh Kanivu 2017

91

他のリンクでの回答は機能しますが、HTMLを提供するために、ファンキーなルーティングを設定する場合を除き、ビューエンジンを使用する必要はありません。代わりに、静的ミドルウェアを使用してください。

app.use(express.static(__dirname + '/public'));

— ダン・コーン
ソース

3

私は先に進み、app.set（ 'view engine'、html）への参照をコメント化しました。次に、「デフォルトのエンジンが指定されておらず、拡張子が指定されていません」というエラーメッセージが表示されましたが、これは予期されていました。しかし、res.render（ "index"）をres.render（ "index.html"）に変更すると、次のエラーが発生しました。TypeError：オブジェクト＃<View>のプロパティ 'engine'は関数ではありません。

— Julio

4

ビューエンジンはもうないので、これres.render()以上は機能しないと思います。代わりに、生のHTMLファイルを入れてpublic、静的ミドルウェアにファイルの直接提供を処理させます。これよりも洗練されたルートが必要な場合は、おそらく独自のHTMLビューエンジンを設定できます。

— Nick McCurdy 2014年

6

それでは、app.get（）コールで何を書いていますか？

— ajbraus 2015

5

@ajbrausでは、app.get（）呼び出しはまったく必要ありません。これは、/ publicフォルダーにあるhtmlファイルを直接提供するだけです。したがって、ブラウザでは、htmlを直接ポイントするだけで、それだけです...基本的にルーティングはありません

— dm76

私がこれで得ている問題は、ロード後にページを更新すると、「エラー：デフォルトのエンジンが指定されておらず、拡張機能が提供されていない」というエラーが表示されることです。次に、Authを使用する場合、{provide：LocationStrategy、useClass：HashLocationStrategy}]は、URLにハッシュを広告しますが、これは他の理由で面倒です。これを回避する方法はありますか？

— wuno 2016年

33

レンダーエンジンがヒスイではなくhtmlを受け入れるようにするには、次の手順に従います。

あなたのディレクトリにconsolidateとswigをインストールしてください。
```
 npm install consolidate
 npm install swig
```

次の行をapp.jsファイルに追加します

var cons = require('consolidate');

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

「views」フォルダ内にビューテンプレートを.htmlとして追加します。ノードサーバーを再起動し、ブラウザーでアプリを起動します。

これは問題なくhtmlをレンダリングしますが、JADEを学習して使用することをお勧めします。Jadeは素晴らしいテンプレートエンジンであり、これを学ぶことで、デザインとスケーラビリティを向上させることができます。

— アナンドシャンバグ
ソース

「エンジン」メソッドはありません-すべてのステップの後

— ImranNaqvi

Expressのどのバージョンを使用していますか？Express 4.xにはapp.engine APIが含まれています。詳細は@ expressjs.com/en/api.html#app.engine

— AnandShanbhag

よくできました！1年前の回答が初めて機能するときが大好きです。

— マシュースネル2017

なぜそれでも私のcssおよびその他をレンダリングできないのですか

— exe

23

あなたのapps.jsに追加するだけです

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

これで、ビューファイルを.htmlとして保持しながらejsビューエンジンを使用できます

ソース：http : //www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

この2つのパッケージをインストールする必要があります。

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

次に、必要なパッケージをインポートします。

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

このようにして、ビューを.ejsではなく.htmlとして保存できます。 HTMLをサポートしているがejsを認識しないIDEを操作する際には、かなり役に立ちます。

— スーダンシュグプタ
ソース

1

app.set（ 'views'、path.join（__ dirname、 '/ path / to / your / folder'））; app.set（ "view options"、{layout：false}）; app.engine（ 'html'、function（path、opt、fn）{fs.readFile（path、 'utf-8'、function（error、str）{if（error）return str; return fn（null、str） ;}）;}）;

— nilakantha singh deo

16

あなたのサーバー設定にこれを試してください

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'));
});

ルートへのコールバック関数は次のようになります。

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

— コナー・リーチ
ソース

14

単純なプレーンHTMLファイルでAngularを使用する場合、ビューエンジンは必要ありません。これを行う方法は次のとおりroute.jsです。ファイル内：

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});

— アシッシュラワット
ソース

1

絶対に最も簡単なソリューションです。ビューエンジンがインストール/構成されておらず、htmlが送信されます。

— Newclique 2018年

7

https://www.npmjs.com/package/express-es6-template-engine-非常に軽量で、非常に高速なテンプレートエンジンを使用することをお勧めします。この名前は、expressjsがなくても機能するため、少し誤解を招く可能性があります。

express-es6-template-engineアプリに統合するために必要な基本は非常にシンプルで、実装は非常に簡単です。

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);

スニペットを展開

以下は、index.html「views」ディレクトリ内にあるファイルの内容です。

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

— ディディンコ
ソース

4

答えは非常に簡単です。* .htmlページをレンダリングするには、app.engine（ 'html'）を使用する必要があります。問題を解決する必要があります。

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);

.htmlファイルは機能します

— ディネシュ・カニヴ
ソース

2

不完全な答え。これらの変更はどこで行われますか？app.jsを想定していますが、答えは具体的である必要があります。また、これらの3つの変更/追加だけを行った結果は「モジュール 'ejs'が見つかりません」なので、変更が必要なのはこれだけではありません。あなたの答えはおそらく近いですが、もう少し情報を追加する必要がありますimho。

— Newclique

また、レンダリングはファイルを提供することと同じではありません。レンダリングでは、サーバーがファイルを前処理し、renderメソッドに渡される動的コンテンツを追加する必要があります。多分それはOPが欲しかったものですが、一部の人々はレンダリングをサービングと混同しています。非常に異なる概念。

— Newclique 2018年

@wadeは、ejsファイルではなくhtmlファイルをレンダリングするためのものです。

— Dinesh Kanivu

3

HTMLファイルはejsエンジンを使用してレンダリングできます。

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

また、「/ views」の下のファイルには「.ejs」という名前を付けてください。

たとえば、「index.ejs」です。

— JerryFZhang
ソース

それは動作しますが、少しハックを感じます。.htmlの代わりに.ejsを使用することによる警告があるかどうかを知っていますか？おそらく最も迅速な修正への乾杯は、すべて同じことを提案しました！

— mikeym 2017

3

HTMLのミドルウェアをコメントアウトする

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

代わりに：

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

— シヴァム・チェトリ
ソース

2

htmlはビューエンジンではありませんが、ejsはその中にhtmlコードを書き込む可能性を提供します

— ワエル・チョルファン
ソース

1

ルーティングを介してhtmlページを提供するために、私はこれを行いました。

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

.htmlファイルの名前を.hbsファイルに変更-ハンドルバーはプレーンHTMLをサポート

— アビナッシュ
ソース

1

レンダーエンジンがヒスイではなくhtmlを受け入れるようにするには、次の手順に従います。

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.

これはうまくいくはずです

— Md Mehadi Hasan Mozumder
ソース

1

この簡単な解決策を試してみてください、それは私のために働きました

app.get('/', function(req, res){
    res.render('index.html')
  });

— キリヤムウィボイェヌス
ソース

1

すべての行を追加する必要があります。これだけでは機能しません。

— MushyPeas

1

ejsテンプレートをインストールする

npm install ejs --save

app.jsでejsを参照する

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

views / indes.ejsのようなビューでejsテンプレートを作成し、ルーターでejs tempalteを使用する

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

— kta
ソース

0

swigを使用してHTMLテンプレートをレンダリングします。

//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');

— ハレンドラ・シン
ソース

0

HTMLファイルをレンダリングする必要はありません。
レンダリングエンジンが行うことは、HtmlファイルではないファイルをHtmlファイルに変換することです。
HTMLファイルを送信するには、次のようにします。

res.sendFile("index.html");

__dirname+"/index.html"Expressが正確なパスを知るために使用する必要があるかもしれません。

— ギデオンマックス
ソース