Angular 2 static file delivery

Jerry Laudat

unread,

Feb 22, 2017, 9:27:13 AM2/22/17

to Angular and AngularJS discussion

I'm a complete newbie to Angular and Node. In the console I can see a GET request for this URL:

/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js

Since I don't have a router/ handler for that URL, it results in a 404 Not Found error. How do I return Angular library-files to the client? I did create a handler for static files:

app.use("/public",express.static("public"));

but I don't think it will help me with Angular library-files. I'm lost.

Jerry Laudat

unread,

Feb 22, 2017, 11:42:43 PM2/22/17

to Angular and AngularJS discussion

I'm using SystemJs as the module-loader. I suppose there's a way to bundle the static files but I haven't learned how to do that yet. So for the moment I'm handling each static folder separately (a separate app.use() call for each one). Here's what I ended up with (server.js):

var express = require('express');

var path = require('path');

//Store the full path to the project folder in a global variable.

global.appRootObtainedFromServerJs = path.resolve(__dirname);

var logger = require('morgan');

var cookieParser = require('cookie-parser');

var bodyParser = require('body-parser');

var app = express();

//Handle static files in the /app folder

var strAppFolder = path.join(__dirname, '/app');

app.use('/app', express.static(strAppFolder));

//Handle any static files in the folder /public

var strPublicFolder =path.join(__dirname, '/public');

app.use(express.static(strPublicFolder));

//Handle any static files in the folder /node_modules/@angular

var strAngularFolder = path.join(__dirname, '/node_modules/@angular');

app.use("/node_modules/@angular", express.static(strAngularFolder));

//Handle static files in /node_modules/rxjs

var strRxJsFolder = path.join(__dirname, '/node_modules/rxjs');

app.use("/node_modules/rxjs", express.static(strRxJsFolder));

//Set the folder for storing html files (Views)

app.set('views', path.join(__dirname, 'views'));

//For Views use an html templating-engine named 'ejs'.

app.set('view engine', 'ejs');

app.engine('html', require('ejs').renderFile);

app.use(logger('dev'));

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({

extended: false

}));

app.use(cookieParser());

var controllerForIndexPage = require('./routes/index');

var controllerForTo_Do_Page = require('./routes/todos');

app.use('/', controllerForIndexPage);

app.use('/api/v1/', controllerForTo_Do_Page);

app.use('/favicon.ico', function(req, res, next) {

res.writeHead(200, {

'Content-Type':'image/x-icon'

})

});

var server = app.listen(3000, function() {

var host = 'localhost';

var port = server.address().port;

console.log('App listening at http://%s:%s', host, port);

});

module.exports = app;

I handled main.js manually instead of putting it in the public folder.

router.get('/mainjs*',  function(req, res,  next){
    var strPathToFile = path.join(appRootObtainedFromServerJs, 'main.js');
    res.sendFile(strPathToFile);
});

index.html

<!DOCTYPE html>
	<html>
	  <head>
		<title>Router Sample</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.css"/>
		<!-- Polyfill(s) for older browsers -->
		<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
		<script src="https://unpkg.com/zon...@0.6.23?main=browser"></script>
		<script src="https://unpkg.com/reflect-...@0.1.3"></script>
		<script src="https://unpkg.com/syst...@0.19.27/dist/system.src.js"></script>
		<script src="systemjs.config.js"></script>
		<script>
			System.import('mainjs').catch(function(err) {console.error(err)});
		</script> 
	  </head>
	  <body>
		<my-app>loading this stuff now today...</my-app>
	  </body>
	</html>

systemjs.config.js

	(function (global) {
	  System.config({
		paths: {//Set up 'npm' as a short name for the 'node_modules/' folder. 
		  'npm:': 'node_modules/'  
		},
		map: {
		  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
		  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
		  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
		  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
		  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
		  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
		  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
		  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
		  'rxjs':                       'npm:rxjs',
		},
		packages: {
		  app: {
				defaultExtension: 'js'
		  },
		  rxjs: {
				defaultExtension: 'js'
		  },
		}
	  });
	})(this);

I don't think my Angular versions are up to date, I will need to check on it.

package.json

{
  "name": "ng2do-mean-app",
  "version": "1.0.0",
  "description": "Web App",
  "main": "server.js",
  "author": "jal",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "body-parser": "^1.16.1",
    "cookie-parser": "^1.4.3",
    "ejs": "^2.5.6",
    "express": "^4.14.1",
    "mongojs": "^2.4.0",
    "morgan": "^1.8.1",
    "path": "^0.12.7",
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "concurrently": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.0.0",
    "gulp-less": "^3.3.0",
    "gulp-typescript": "^3.1.5",
    "typescript": "^2.0.2"
  },
  "scripts": {
    "postinstall": "typings install"
  }
}

Sander Elias

unread,

Feb 23, 2017, 6:30:13 AM2/23/17

to Angular and AngularJS discussion

Hi Jerry,

configuring systemJS is not that easy. You seem to have problems with getting started.

U would recommend using the angular-cli that makes it a whole lot easier for you to get started.