"Cannot find module 'html' error" on Express Angular Node Template Render

Question

I'm building a webapp using ui-router for AngularJS to handle my routing through $stateProvider so that only the various states gets rendered in the ui-view.

I have a server.js file hoping to render an initial scaffolding (top-nav, footer..etc.) which the web app is going to based on, and I want all request to be loaded with this template and populate each individual page using templates.

However, I keep getting ERROR: Cannot find module 'html'.

I've dug through stackoverflow and also tried installing EJS so that I can render my index.html page, but it still didn't work.

What would be the best way to serve up a static html template and have angular ui-router do the rest of the routing?

Here are the two files:

server.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var routes = require('server/routes');

// Set Port
var PORT = process.env.PORT || 3000;

// Rendering configuration
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.use(bodyParser.json());

routes(app);

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

app.listen(PORT, function() {
    console.log('Server running on ' + PORT)
});

config.js

import angular from 'angular';
import uiRouter from 'angular-ui-router';

// Factories
import todoFactory from 'factories/todo-factory';

// Controllers
import todosController from 'controllers/todosController';
import profileController from 'controllers/profileController';
import signupController from 'controllers/signupController';
import signinController from 'controllers/signinController';


const app = angular.module('airporter', [uiRouter, todoFactory.name]);

app.config(($stateProvider, $urlRouterProvider, $locationProvider) => {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        // Homepage
        .state('home', {
            url: '/',
            templateUrl: 'views/index.html',
        })

        // Sign Up
        .state('signup', {
            url: '/signup',
            templateUrl: 'views/signup/signup.html',
            controller: signupController
        })

        // Sign In
        .state('signin', {
            url: '/signin',
            templateUrl: 'views/signin/signin.html',
            controller: signinController
        })

        // 
        .state('profile', {
            url: '/profile',
            templateUrl: 'views/profile/profile.html',
            controller: profileController,
            resolve: {
                // logincheck: checkLoggedin
                // if the following dependencies are successfully resolved you can access profile
            }
        })  
        .state('todos', {
            url: '/todos',
            templateUrl: 'views/todos/todos.html',
            controller: todosController
        })
        .state('about', {
            url: '/about',
            templateUrl: 'views/about/about.html'
        });

    $locationProvider.html5Mode(true);

});

export default app;

Why are you setting view engine on EJS and using an HTML for rendering? My advise, switch to pug. A lot easier. I'm not an expert with EJS but you should point towards an HTML page but something like: res.render('pages/index') That is probably why you see that error. — spa900, Nov 14 '16 at 00:07
Is this helpful? http://stackoverflow.com/questions/16111386/node-js-cannot-find-module-html — ppovoski, Nov 14 '16 at 00:16
`app.get('/*', function(req,res) { res.render('index.html'); });` literally tells node that for ***every request*** it should render `index.html`. when ***any other file*** is requested, `index.html` is rendered. That includes requests for scripts, requests for partials, even requests for css files. One of these is likely the file containing the `'html'` module. You need to account for your static directories when setting up your node config, there are multiple questions with answers showing how this is done. — Claies, Nov 14 '16 at 00:49

score 0 · Answer 1 · answered Jan 12 '17 at 09:04

In order to give you a reference, in MEANJS the route /* is defined as:

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

It is like in your config index.html is interpret as module names. Try to remove file extension to 'index'

"Cannot find module 'html' error" on Express Angular Node Template Render

1 Answers1