I am trying to create this very simple meanstack app and its almost running but with an uncaught reference error when it is redirecting to index page. Server is running ok. Browser is showing the text (Loading..) as in the index page. But as the custom tag should have gone along with the selector to app.component.ts and printed "My First Angular App", it doesn't. Instead it is saying in console that "app is not defined".
Can anyone help? I am new to MEAN & Angular, so kindly elaborate. And please excuse my silly mistakes if there are any (or many).
This is my index.html
<html>
<head>
<title>MyTaskList</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>System.import(app).catch(function(err){ console.error(err);});</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
this is my app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: 'My First Angular App'
})
export class AppComponent { }
my index.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next){
res.render('index.html');
});
module.exports = router;
and finally my server.js (starting point)
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var tasks = require('./routes/tasks');
var port = 3000;
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine','ejs');
app.engine('html', require('ejs').renderFile);
app.use(express.static(path.join(__dirname, 'client')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/', index);
app.use('/api', tasks);
app.listen(port, function(){
console.log('Server started on port '+port);
});
Put app in quotes because Javascript thinks app is a variable but it should actually be a string.