Angular 2: ReferenceError: require is not defined(…), angular2-polyfills

Question

Edit:

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.

Original question:

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.

Looks like a dup of stackoverflow.com/questions/34730010/… or stackoverflow.com/questions/34874490/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 26, 2016 at 15:25
Hmm. I had seen those, but changing the path to ../app.component.js did not work, as in the first link, and I already have system.src.js in my index.html file. So I'm not sure those work, unless I misunderstood the answers. — Ethan Kent
– Ethan Kent, Commented Feb 26, 2016 at 15:36

Angular University · Accepted Answer · 2016-02-26 15:37:41Z

6

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

answered Feb 26, 2016 at 15:37

Angular University

43.2k15 gold badges79 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

messerbill Over a year ago

this does not change anything at my place...same error

stack user · Accepted Answer · 2017-03-29 13:58:16Z

0

I just started with angular 4 today (upgraded from angular2).

Just before my injectable auth class, I added this:

// declare var Auth0Lock: any;
declare let require: any;
let Auth0Lock = require('auth0-lock').default;

answered Mar 29, 2017 at 13:58

stack user

8632 gold badges10 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular 2: ReferenceError: require is not defined(…), angular2-polyfills

Edit:

Original question:

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit:

Original question:

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related