Menu
I haven't figure out exactly why it didn't work, but I started from scratch and got a working version. It does not appear necessary to put system.src.js before the angular script tags, pace one of the answers below. See both the working version and the Angular 2 tutorial.
I am trying to learn Angular 2 and Express. I am generally following this guide. I am receiving the following error:
ReferenceError: require is not defined(…) angular2-polyfills.js:1243
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480
lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451
lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:401
(anonymous function) @ angular2-polyfills.js:123
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
Edit: here is the broken version of the project on GitHub.
My project is structured like so:
application
|__client
|__app
|__main.ts
|__main.js
|__tsconfig.json
|__typings/ (...)
|__index.html
|__typings.json
|__server
|__server.ts
|__server.js
|__tsconfig.json
|__typings.json
|__node_modules/ (...)
The file server.ts is like this:
import * as express from "express";
let path = require("path");
let app = express();
let PORT = 8080;
app.use("/node_modules", express.static(__dirname + "/../node_modules"));
app.use("/app", express.static(__dirname + "/../client/app"));
app.get("/", (req, res) => {
res.sendFile(path.resolve(__dirname, "..", "client", "index.html"));
});
app.listen(PORT, () => { console.log("Listening on port " + PORT)});
The main.ts file is like this:
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
@Component({
selector: "app",
template: "<h1>Hello world</h1>"
})
export class AppComponent {}
bootstrap(AppComponent);
The index.html file is like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<!-- <script src="node_modules/systemjs/dist/system.src.js"></script> -->
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: "register",
defaultExtension: "js"
}
}
});
System.import("app/main")
.then(null, console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
</html>
And the tsconfig.json files are both pretty much like this:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": false,
"noImplicitAny": true,
"removeComments": false,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules",
"typings/browser",
"typings/browser.d.ts"
],
"compileOnSave": true,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
Thanks.
848
The angular2-polyfills.js is a SystemJs bundle, so it needs SystemJs to have already been installed.
This what the message require is not defined means, because require is the function that systemjs uses to import modules. To fix this, move the system.src.js to the top and make it the first script of the page:
<script src="node_modules/systemjs/dist/system.src.js"></script>
... other script tags
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
