5

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.

Community
  • 1
  • 1
Ethan Kent
  • 381
  • 1
  • 4
  • 20
  • Looks like a dup of http://stackoverflow.com/questions/34730010/angular2-5-minute-install-bug-require-is-not-defined or http://stackoverflow.com/questions/34874490/uncaught-referenceerror-require-is-not-defined-in-angular2 – Günter Zöchbauer Feb 26 '16 at 15:25
  • 1
    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 Feb 26 '16 at 15:36

2 Answers2

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
Angular University
  • 42,341
  • 15
  • 74
  • 81
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;
stack user
  • 835
  • 1
  • 9
  • 28