I am new to angular 2 and systemjs, and I have a sample node.js project where I'm trying to map an angular 2 app in the subfolder './client/dashboard' to a sub URL 'localhost:3000/dashboard' using the express.static middleware:
app.use('/dashboard', express.static(__dirname + '/client/dashboard', { maxAge: 86400000 }));
angular 2 app folder structure
my index.html has the following code:
<base href="/dashboard">
<link rel="stylesheet" href="dashboard/styles.css">
<script src="dashboard/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="dashboard/node_modules/systemjs/dist/system.src.js"></script>
<script src="dashboard/node_modules/rxjs/rx.js"></script>
<script src="dashboard/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="dashboard/node_modules/angular2/bundles/router.dev.js"></script>
<script src="dashboard/node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
baseURL: '/dashboard',
// paths: {
// '*': 'dashboard/*'
// },
map: {
app: '/dashboard/app',
rxjs: '/dashboard/node_modules/rxjs',
angular2: '/dashboard/node_modules/angular2'
},
packages: {
app: { format: 'register', defaultExtension: 'js' },
rxjs: { defaultExtension: 'js' },
angular2: { defaultExtension: 'js' }
}
});
System.import('app/main').then(null, console.error.bind(console));
</script>
The only errors I'm getting are a 'require is not defined' on rx.ts and a 404 on a css file (see attached pic chrome errors)
If I simply map the angular 2 app directory to '/', I still get the arbitrary 'require is not defined' error on rx.ts, but the page loads properly, so I'm pretty sure that isn't the issue. The only other error I'm seeing is the css error. Any ideas what the issue could be? tia
Perhaps it's because you included twice rxjs and angular2: one using script elements and one within the SystemJS configuration.
Why do you need to define them in the SystemJS configuration?
Edit
This should be enough:
<base href="/dashboard">
<link rel="stylesheet" href="dashboard/styles.css">
<script src="dashboard/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="dashboard/node_modules/systemjs/dist/system.src.js"></script>
<script src="dashboard/node_modules/rxjs/rx.js"></script>
<script src="dashboard/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="dashboard/node_modules/angular2/bundles/router.dev.js"></script>
<script src="dashboard/node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
baseURL: '/dashboard',
map: {
app: '/dashboard/app'
},
packages: {
app: {
format: 'register', defaultExtension: 'js'
}
}
});
System.import('app/main').then(null, console.error.bind(console));
</script>
Related
I am having the issue with trying to use .ejs files with Webpack. I have tried numerous packages and haven't managed to figure it out. I have five files that I want to render and have a layout.ejs which acts as a base for my application. I am using ejs-loader as it is the most popular. When I run webpack, I get the following error:
ERROR in Template execution failed: ReferenceError: body is not defined
I am relatively new to module bundling and have tried to follow the docs as close as possible.
webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const nodeExternals = require('webpack-node-externals')
const config = {
target: 'node',
mode: 'development',
entry: './app.js',
externals: [nodeExternals()],
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.ejs$/,
loader: 'ejs-loader?variable=data'
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './views/layout.ejs',
hash: true,
}),
new webpack.ProvidePlugin({
_: "underscore"
})
]
}
module.exports = config;
layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css" />
<title>MyApp</title>
</head>
<body>
<div class="container">
<%- body %>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="../dist/bundle.js"></script>
</body>
</html>
I have a ReactJS project with Node/Express serving my server. On my front end (React) is serving port 3312 and on my server it's serving port (5000). When I load my front end through port 3312, everything looks great and my react router routes works fine. (My api's work everything is great). However, when I try and serve static files and see if I get the same result through my server (port 5000) I only see the styles on my page. (I have a background color) I don't see any of the html whatsoever that the static files should be serving?
I get no errors in the console when I look at localhost:5000. However, my css styles are displaying on the page correctly (cause I have a background color set on my body). However, I cannot see any of my front end React displaying html code. I went inside my index.html file and put a simple test in the root div and it's displaying but I don't understand why my React code isn't displaying on my server.
I most likely think the problem is with the express static files not serving my images or React Router code. I should also note that I'm not using create-react-app I'm using webpack dev server react no cli.
Also, I'm not using create-react-app I'm using no cli for custom webpack.
Here is my code:
(Node Server)
const express = require("express");
const path = require("path");
const router = express.Router();
const app = express();
const port = 5000;
// Serve static files on server
app.use("/public", express.static(__dirname + "/../public"));
app.get("*", function(request, response) {
response.sendFile(path.join(__dirname + "/../public/index.html"));
});
if (app.get("env") === "development") {
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
} else {
app.listen(port, "171.33.4.126", () => {
console.log(`Server started on port ${port}`);
});
}
routes.js
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/homepage";
import AboutPage from "./components/aboutpage";
import Contactpage from "./components/contactpage";
export default (
<Router>
<div>
<Switch>
<Route exact path="/" component={Landingpage} />
<Route exact path="/about" component={AboutPage} />
<Route exact path="/contact" component={Contactpage} />
</Switch>
</div>
</Router>
);
index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Routes from "./routes";
ReactDOM.render(<div>{Routes}</div>, document.getElementById("root"));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link
href="/public/assets/css/styles.css"
rel="stylesheet"
type="text/css"
/>
<title>Site</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Webpack Configuration Development
const webpack = require("webpack");
const path = require("path");
// const HtmlWebPackPlugin = require("html-webpack-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
devServer: {
historyApiFallback: true,
port: 3312,
proxy: {
"/api": "http://localhost:5000"
}
},
entry: ["babel-polyfill", __dirname + "/src/index.js"],
output: {
path: path.join(__dirname, "/public"),
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
// new HtmlWebPackPlugin({
// template: "./public/index.html"
// }),
new BrowserSyncPlugin({
host: "localhost",
port: 3312,
files: [
"./public/*.html",
"./public/assets/scss/*.scss",
"./public/assets/variables/*.scss",
"./public/assets/mixins/*.scss",
"./public/assets/reset/*.scss"
],
proxy: "http://localhost:3312/"
})
]
};
Here is a screenshot of my folder structure:
Screenshot of network status in console:
Your react code is not showing up because index.html is not including it. Is public/bundle.js your transpiled react code? If so, add the following line to index.html, right after <div id="root"></div>:
<script src="/public/bundle.js"></script>
If not, then change the path pointed by src to the correct one.
You can see your css styles just fine because you are already including those in index.html.
UPDATE: a couple of points based on your webpack config:
Change the port in which you are running webpack-dev-server to 3000. You will also have to change BrowserSyncPlugin's proxy to http://localhost:3000/. You can then go to localhost:3312 in your browser and requests will be proxied to the webpack-dev-server running on port 3000.
Correct me if I'm wrong, but you have not posted your index.html in its entirety. I'm guessing you already have a line that looks like <script src="/bundle.js"></script> somewhere in that .html file -- based on your latest comment, it seems it is being added by HtmlWebPackPlugin. webpack-dev-server is serving bundle.js through /, the publicPath you've specified in webpack's output option. This works just fine as long as you access your site through localhost:3312 or localhost:3000. However, your express.js server running on port 5000 has no idea webpack-dev-server is serving bundle.js at /; as a result of that, you end up seeing none of your react code when you go to localhost:5000. As for the styles, you are already serving them correctly through /public/assets/css, which the express.js server understands because you've specified that in this line: app.use("/public", express.static(__dirname + "/../public")). The solution is to change the line <script src="/bundle.js"></script> in your .html file to:
<script src="http://localhost:3312/bundle.js"></script>
Also, in webpack's output option, change the publicPath to http://localhost:3312/. Now, as long as you have webpack-dev-server running (with BrowserSyncPlugin), you can access
your site at localhost:5000 and your bundle.js file should be
served just fine.
Try the following:
Webpack Config
module.exports = {
devServer: {
contentBase: path.join(__dirname, "/public"),
historyApiFallback: true,
port: 3000,
proxy: {
"/api": "http://localhost:5000"
}
},
entry: ["babel-polyfill", __dirname + "/src/index.js"],
output: {
path: path.join(__dirname, "/public"),
filename: "bundle.js",
publicPath: "http://localhost:3312/"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
new BrowserSyncPlugin({
host: "localhost",
port: 3312,
files: [
"./public/*.html",
"./public/assets/scss/*.scss",
"./public/assets/variables/*.scss",
"./public/assets/mixins/*.scss",
"./public/assets/reset/*.scss"
],
proxy: "http://localhost:3000/"
})
]
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link
href="/assets/css/styles.css"
rel="stylesheet"
type="text/css"
/>
<title>Site</title>
</head>
<body>
<div id="root"></div>
<script src="http://localhost:3312/bundle.js"></script>
</body>
</html>
Oh sorry, it looks like the problem is in index.js. Change {Routes} to <Routes />
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Routes from "./routes";
ReactDOM.render(<div><Routes/></div>, document.getElementById("root"));
You have another problem in routes.js. Export a component like
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/homepage";
import AboutPage from "./components/aboutpage";
import Contactpage from "./components/contactpage";
// make this a component
export default ()=>(
<Router>
<Switch>
<Route exact path="/" component={Landingpage} />
<Route exact path="/about" component={AboutPage} />
<Route exact path="/contact" component={Contactpage} />
</Switch>
</Router>
);
I have a completed project done on my local machine and am currently learning how to deploy it to production. I figured out a lot of things in the documentation for production and such but I have been stuck for awhile now on the part on how to tell my server to serve my static assets that contain my build files that I executed with web pack. For the record, I'm not using create-react-app I'm using the webpack-dev-server cli.
I've only ever connected to my server successfully and ran routes through it using MySQL but I never tested serving the static files on the server when my development was ready for production. I'm getting an error in the console when I try to serve my static build files. I can't tell if the error is because I have my routes being served wrong on my server or there is an issue in my index.html build.
Here is my code the server file is big so I'll only show the relevant parts pertaining to the issue I'm stuck on:
Server file:
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const cors = require("cors");
const router = express.Router();
const app = express();
const port = 5000;
app.use(cors());
// Body Parser Middleware
app.use(bodyParser.json({ limit: "50mb" }));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
app.get("*", function(request, response) {
response.sendFile(path.join(__dirname + "/../public/index.html"));
});
// Serve static files on server
app.use("../", express.static(__dirname + "public/index.html"));
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
Build Index.html File
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/v4-shims.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link rel="stylesheet" href="/public/assets/css/pignose.calendar.min.css">
<link href="/public/assets/css/styles.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/public/assets/js/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!-- Ck Editor Library -->
<script src="/public/assets/js/plugins/ckeditor/ckeditor.js"></script>
<!-- Pignose Calendar -->
<script src="/public/assets/js/pignose.calendar.full.min.js"></script>
<script type="text/javascript" src="/public/assets/js/scripts.js"></script>
</body>
</html>
Webpack Production
const webpack = require("webpack");
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
const HtmlWebPackPlugin = require("html-webpack-plugin");
var browserConfig = {
entry: ["babel-polyfill", __dirname + "/src/index.js"],
output: {
path: path.resolve(__dirname + "/build"),
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
new CompressionPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
minRatio: 0.8,
threshold: 8192
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
}),
new HtmlWebPackPlugin({
template: "./public/index.html"
})
]
};
var serverConfig = {
target: "node",
externals: [nodeExternals()],
entry: __dirname + "/server/main.js",
output: {
path: path.resolve(__dirname + "/build"),
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"]
}
}
}
]
}
};
module.exports = [browserConfig, serverConfig];
Folder Architecture
Error log I'm getting when I try to connect to my port for my build files:
second error:
In express middleware configurations order matters, since app.get("*", function(request, response) is in the top every request will go through that and send the index.html. Change the order like this
// Serve static files on server
app.use('/public', express.static(__dirname + "/../public"));
app.get("*", function (request, response) {
response.sendFile(path.join(__dirname + "/../public/index.html"));
});
and it should work
Edit
As your request to extend my answer, what was happening here is since you haven't configured the public direcotry, express server will get to the next request handler which is app.get("*" , ... which sends the index.html as the response. So when you request this javascript file
<script type="text/javascript" src="/public/assets/js/jquery-3.3.1.min.js"></script>
It will send the index.html as i mentioned without sending the jquery-3.3.1.min.js and same for every js and css files, but your browser is expecting a javascript file and try to parse it so the file <!doctype> .. is parsing and since it is not a valid javascript, it prints the error. Hope that helps
So i have an Angular 2 app that runs locally without problems. When deploying my app using heroku i get following errors:
>SyntaxError: expected expression, got '<'
><!DOCTYPE html>
>shim.min.js (Zeile 1)
>
>SyntaxError: expected expression, got '<'
><!DOCTYPE html>
>zone.js (Zeile 1)
>
>SyntaxError: expected expression, got '<'
><!DOCTYPE html>
>Reflect.js (Zeile 1)
>
>SyntaxError: expected expression, got '<'
><!DOCTYPE html>
>system.src.js (Zeile 1)
>
>ReferenceError: System is not defined
>systemj...nfig.js (Zeile 6, Spalte 3)
>
>ReferenceError: System is not defined
>mean1nv...app.com (Zeile 24, Spalte 7)
There are similar posts that suggest all kind of changes but i dont know where it breaks in my code. I feel kind of blind, i deployed a similar app before without problems and I cant find the difference.
server.js
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var items = require('./routes/items');
var app = express();
app.set('port', (process.env.PORT || 3000));
app.use(express.static(path.join(__dirname,'client')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/api', items);
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile(path.join(__dirname, './client', 'index.html'));
});
app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
});
package.json (server side)
{
"name": "namex",
"version": "1.0.0",
"description": "descx",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"ejs": "^2.5.5",
"express": "^4.14.0",
"mongojs": "^2.4.0",
"ng2-pagination": "^1.0.1"
}
}
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#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',
// other libraries
'ng2-pagination': 'npm:ng2-pagination/dist/',
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
'angular2-jwt': {
"defaultExtension":'js'
},
rxjs: {
defaultExtension: 'js'
},
'ng2-pagination': {
defaultExtension: 'js', main: 'ng2-pagination.js'
}
}
});
})(this);
index.html
<!DOCTYPE html>
<html>
<head>
<title>ngAuth0 App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet" type="text/css">
<script src="https://cdn.auth0.com/js/lock/10.6/lock.min.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/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<base href="/">
<my-app>Loading ...</my-app>
</body>
</html>
You should copy polyfills with the app when deployed node_modules is not available.
if you copy them to the same folder where systemjs.config.js
<script src="shim.min.js"></script>
<script src="zone.js"></script>
<script src="Reflect.js"></script>
<script src="system.src.js"></script>
I am trying to run my angularjs2 project locally using nodejs. I can run it using npm start but I need to have it working using node app.js.
The problem is that it gives an error "systemjs.config.js:1 Uncaught SyntaxError: Unexpected token <". I am not sure where this problem is occuring as I am not familiar enough with systemjs to be able to debug this issue.
Thanks in advance.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Fischer Hopkins</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href=".">
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/normalize.css">
<link rel="stylesheet" href="stylesheets/custom-material.css" type="text/css">
<link rel="stylesheet" href="stylesheets/screen.css" media="screen, projection" type="text/css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="/core-js/client/shim.min.js"></script>
<script src="/zone.js/dist/zone.js"></script>
<script src="/reflect-metadata/Reflect.js"></script>
<script src="/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app/main').catch(function(err){
console.error(err);
});
</script>
</head>
<!-- 3. Display the application -->
<body>
<c-main>Loading...</c-main>
</body>
app.js
var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, '/app')));
app.use(express.static(path.join(__dirname, '/node_modules')));
app.use('/*', function(req, res)
{
res.sendFile(__dirname + '/index.html');
});
var portVar = process.env.PORT || 3000;
app.set('port', portVar);
var server = app.listen(app.get('port'), function() {
var port = server.address().port;
console.log('Listening on port: ' + port);
});
Here is my systemjs.config.js:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['#angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
if (pkgName == "router") {
packages['#angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
} else {
packages['#angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
The files structure:
|-app
|-main.ts
|
|-app.js
|-index.html
|-package.json
|-tsconfig.json
|-typings.json
|-systemjs.config.js
The error says:
systemjs.config.js:1 Uncaught SyntaxError: Unexpected token <
The systemjs.config.js file is not valid javascript.
This typically happens because a server gave you HTML (which begins with <) instead of JS, perhaps in response to a bad URL (say, a 404 page instead of a script).
Try to enter the URL manually (take the root URL in the address bar and append systemjs.config.js to it) and see what happens. Are you sure you're not missing a leading slash (/), or a full URL?