I have a fine working server-side node application and I want to build the front-end now, with Angular2.
To put the required files for Angular2 fast, I use the angular2-quickstart method from github. So if my task was only to experiment with front end, I would just type: npm install npm start and whola, the angular2-quickstart front end would start perfectly (at port 3000).
But now, I want to start my serverside also along side with angular2. So I mix the files of angular2 with the files of my serverside node code but I am confused. If I type "npm start", then the angular2 front-end starts (at port 3000) and if I type "nodemon server.js", then the serverside node code starts (at a port I set at 8080).
I know that I must change something at package.json but I can't figure what. I have already defined the main entry point to be server.js.
My structure is like this:
-my_cool_app
---app (server-side stuff)
------models
------routes
---node_modules
---src (angular2 stuff)
------app (angular2 components modules etc)
------index.html
------main.js
------main.js.map
------main.ts
------styles.css
------systemjs.config.extra.js
------systemjs.config.js
------systemjs-angular-loader.js
------tsconfig.json
---bs-config.json
---config.js
---npm-debug.log
---package.json
---server.js
---tslint.json
My package.json is this: (my main entry is at server.js)
{
"name": "angular-quickstart",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"dependencies": {
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.17.1",
"core-js": "^2.4.1",
"express": "^4.15.2",
"jsonwebtoken": "^7.4.0",
"mongoose": "^4.9.6",
"morgan": "^1.8.1",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.1.0",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"@types/jasmine": "2.5.36"
}
}
My server.js is like this:
// BASE SETUP
// ======================================
// CALL THE PACKAGES
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var morgan = require('morgan');
var mongoose = require('mongoose');
var config = require('./config');
var path = require('path');
// APP CONFIGURATION ==================
// ====================================
// use body parser so we can grab information from POST requests
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// configure our app to handle CORS requests
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, \
Authorization');
next();
});
// log all requests to the console
app.use(morgan('dev'));
// connect to our database (hosted locally)
// mongoose.Promise = global.Promise;
mongoose.connect(config.database);
// set static files location
// used for requests that our frontend will make
app.use(express.static(__dirname + '/public'));
// ROUTES FOR OUR API =================
// ====================================
// API ROUTES ------------------------
var apiRoutes = require('./app/routes/api')(app, express);
app.use('/api', apiRoutes);
// MAIN CATCHALL ROUTE ---------------
// SEND USERS TO FRONTEND ------------
// has to be registered after API ROUTES
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
// START THE SERVER
// ====================================
app.listen(config.port);
console.log('Magic happens on port ' + config.port);
My index.html is like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 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.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
And here is the error I get after entering "npm start"
> angular-quickstart@1.0.0 prestart /home/tacos/Desktop/bigtest
> npm run build
> angular-quickstart@1.0.0 build /home/tacos/Desktop/bigtest
> tsc -p src/
error TS5058: The specified path does not exist: 'src/'
npm ERR! Linux 4.8.0-49-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! node v6.10.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart@1.0.0 build: `tsc -p src/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 build script 'tsc -p src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc -p src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/tacos/Desktop/bigtest/npm-debug.log
npm ERR! Linux 4.8.0-49-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v6.10.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart@1.0.0 prestart: `npm run build`
npm ERR! Exit status 1
via Tasos
No comments:
Post a Comment