Friday, 28 April 2017

Can't incorporate Angular2 with my Nodejs

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