I'm extremely new to the Angular 2 and Node.JS and I'm currently struggling with setting up my existing Node.js server, which has a couple of API routes already defined in it to an existing Angular 2 admin dashboard template. Here's a link to the template project:
Angular 2 Dashboard GitHub project
From what I've tried I can't get to include the Angular 2 project and server it with my Node.js server. My Node.js server has only one HTML file, which tries to include the <app></app> tag in it, but it results in tons of errors with elements it can't find.
The project seems to already have Webpack set up and properly running and serving the components, but the question is can I include the Angular 2 project in an already existing Node.js project.
A rough directory structure would look like this:
.
+-- app.js
+-- server.js
+-- views
| +-- index.html
+-- client
| +-- GITHUB PROJECT HERE
app.js
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var expressSession = require('express-session');
var mongoose = require('mongoose');
var hash = require('bcrypt-nodejs');
// mongoose
mongoose.connect('DATABASE');
var index = require('./routes/index');
//////////////////
// OTHER ROUTES //
//////////////////
//////////////////////
// DATABASE SCHEMAS //
//////////////////////
var app = express();
// View Engine
app.set('views', path.join(__dirname, 'views'));
app.set('view_engine', 'ejs');
app.engine('html', require('ejs').renderFile);
// Set Static Folder
app.use(express.static(path.join(__dirname, 'client')));
// Body Parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('express-session')({
secret: 'keyboard cat',
resave: false,
saveUninitialized: false
}));
app.use('/', index);
module.exports = app;
server.js
var debug = require('debug')('passport-mongo');
var app = require('./app');
app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function() {
debug('Express server listening on port ' + server.address().port);
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>How hard can it be</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 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/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.browser.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<div class="wrapper">
<div class="container">
<app>Loading AppComponent content here ...</app>
</div>
</div>
</body>
</html>
via Zomtorg
No comments:
Post a Comment