shim.min.js:1 Uncaught SyntaxError: Unexpected token < - Angular 4 - node.js

Good day Folks,
I included shim.min.js as per this link here. This was needed in order to be able to support IE 11. But now i am getting the strange error:
Can some one help me to understand this error please.
This is how I included as per below:
<head>
<meta charset="utf-8">
<title>At2</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="node_modules/core-
js/client/shim.min.js"></script>
<body>
<app-root>Loading...</app-root>
See my node server:
let express = require("express");
var path = require('path');
let app = require('express')();
let http = require('http').Server(app);
const bodyParser = require('body-parser');
// // Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
const port = process.env.PORT || '3000';
app.set('port', port);
http.listen(port, function() {
console.log('listening on *:3000');
});

Related

app.set('view engine','ejs'); ^ TypeError: app.set is not a function

Problem in the template engine in express validation
I m expecting to resolve my problem
app.js
const express=require('express')
const app= express;
const port = 5000;
//set template engine
app.set('view engine','ejs')
//navigation
app.get('',(req,res)=>{
res.render('index')
})
app.get('/resgiter',(req,res)=>{
res.render('resgiter')
})
app.listen(port,() =>
console.info(`App listening on port:${port}`)
)
error in the template engine
You missed to invoke express in second line of Your code:
Instead of:
const app = express;
You should provide:
const app = express();
and forward slash / in this snippet:
app.get("/", (req, res) => {
res.render("index");
});
app.js
const express = require("express");
const app = express();
const port = 5000;
//set template engine
app.set("view engine", "ejs");
//navigation
app.get("/", (req, res) => {
res.render("index");
});
app.get("/resgiter", (req, res) => {
res.render("resgiter");
});
app.listen(port, () => console.info(`App listening on port:${port}`));
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>ejs it's Awesome! ;-)</h1>
</body>
</html>
folder&file structure and console output:
browser output:

Why does my styles get rejected when i change route inside my express nodejs app?

This is my index.js file
const express = require('express')
const bodyParser = require('body-parser')
const getRouter = require('./routes/getRoute')
const path = require('path');
const expressHbs = require('express-handlebars');
const app = express();
app.engine('hbs', expressHbs({
defaultLayout: false
}));
app.set('view engine', 'hbs');
// app.set('views', 'views');
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/get',getRouter.router);
app.listen(3000, ()=>{
console.log('server has started on port: 3000')
})
And this is my getRouter.js file
const express = require('express')
const router = express.Router();
const path = require('path');
const data = require('./data');
let message = `It's Working`;
router.get('/', (req,res,next)=>{
res.render(path.join(__dirname, '..', 'views/index'), {msg: data.data.codename});
});
exports.router = router;
exports.message = message;
And finally, this is my index.hbs file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>{{msg}}</h1>
</body>
</html>
Now whenever i change the route from / to basically anything like /codename inside getRouter.js , the styles inside index.hbs gets turned off somehow and only pain html is rendered.
Can someone help me figure this out as which part of the code is causing this? Thank you

Could not get the Express route path using node.js and Angular.js

I am not getting the external path while using node.js with the front end. My code is below:
app.js:
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '/public')));
app.use('/', indexRouter);
routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.sendFile(__dirname + '/index.html');
});
module.exports = router;
public/index.html:
<!DOCTYPE html>
<html lang="en" ng-app="SSMS">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Chinmaya Sahu">
<title>...:::WELCOME:::...</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="/javascript/angularjslatest.js" type="text/javascript"></script>
<script src="/javascript/angularuirouterlatest.js" type="text/javascript"></script>
<script src="/javascript/route.js" type="text/javascript"></script>
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div ui-view>
</div>
<script src="/javascript/bootstrap.min.js"></script>
<script src="/controller/dashboardController.js"></script>
<!--<base href="/cab/admin/"> -->
</body>
</html>
Here my issue is in index.html the external files are not coming. Here I need to access those files present inside public/javascript path.
you are setting app.use(express.static(path.join(__dirname, '/public'))); and i think your index.html is in the public folder, so in the route you dont need to use __dirname like this res.sendFile(__dirname + '/index.html'); . I think the right way is res.sendFile('index.html');

MEAN stack app not working on Ubuntu (works in local)

I have developed a simple MEAN stack app (with Angular 4 for UI).
It works fine in my local Node, but when I deploy the same on Ubuntu it gives
Uncaught SyntaxError: Unexpected token < : in browser console
Here is my app.js content
const app = express();
const users = require('./routes/users');
const client = require('./routes/client');
// Port Number
//const port = 3000;
// Port Number
const port = process.env.PORT || 3001;
// CORS Middleware
app.use(cors());
// Set Static Folder
app.use(express.static(path.join(__dirname, 'public')));
// Body Parser Middleware
app.use(bodyParser.json());
// Passport Middleware
app.use(passport.initialize());
app.use(passport.session());
require('./config/passport')(passport);
app.use('/users', users);
app.use('/client', client);
// Index Route
app.get('/', (req, res) => {
res.send('Invalid Endpoint');
});
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
// Start Server
app.listen(port, () => {
console.log('Server started on port '+port);
});
My index.html under public folder
<html lang="en">
<head>
<meta charset="utf-8">
<title>MEAN</title>
<base href=".">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Bootstrap and jQuery online links-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- For login Html -->
<link rel="stylesheet" href="assets/icons/simple-line-icons.css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
Try changing: 'public' to: '/public', maybe the relative path helps?

Express not serving static files correctly for react build

I'm new to react. I've been trying to convert my MEAN stack app to an express and reactjs app but I'm having problems getting my build files to come in correctly. It looks like my server is loading my index.html file in place of my js files. Can anyone help me figure out why?
I've got the following error in my main.js in the browser: Uncaught SyntaxError: Unexpected token <
My files are built into a build folder which is a sibling to my server.js file.
mywebsite (root)
-src (f)
-build (f)
-server.js
-public (f)
Here's my server.js
require('./server/config/config');
// Get dependencies
const express = require('express');
const morgan = require('morgan');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
const api = require('./server/routes/api');
const compression = require('compression')
const app = express();
app.use(compression());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url
HTTP/:http-version" :status :res[content-length] :response-time ms'));
// Serve static assets
app.use(express.static(path.join(__dirname, 'build')));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/api', api);
app.get('/robots.txt', function (req, res) {
res.type('text/plain');
res.send("User-agent: *\nDisallow: /");
});
// Always return the main index.html
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
});
const port = process.env.PORT || '3001';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`API running on
localhost:${port}`));
module.exports = app;
here's the generated index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-
fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/brookeclonts/brookeclonts.com/manifest.json">
<link rel="shortcut
icon" href="/brookeclonts/brookeclonts.com/favicon.ico">
<title>React App
</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/brookeclonts/brookeclonts.com/static/js/main.9ffbadeb.js">
</script>
</body>
</html>
Let me know if you see something I'm not seeing. I'm going in circles. Thanks in advance!
You can also merge directories as:
// Serve static assets
app.use('public', express.static(path.join(__dirname, 'build')));
app.use('public', express.static(path.join(__dirname, 'public')));
// Always return the main index.html
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'index.html'));
});
What was posted here was close to the answer. Thank you for your help everyone! My real problem was that I had forgotten about the .htaccess file. See: https://github.com/facebook/create-react-app/issues/1171 and https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

Resources