typescript - Angular 2: ReferenceError: require är inte definierad(…), angular2-polyfills

Redigera :

Jag har inte riktigt listat ut varför det inte fungerade, men jag började från början och fick en fungerande version. Det verkar inte nödvändigt att sätta system.src.js före angular-script-taggarna, trots ett av svaren nedan. Se både den fungerande versionen och Angular 2-handledningen.

Ursprunglig fråga:

Jag försöker lära mig Angular 2 och Express. Jag följer i allmänhet denna guide. Jag får följande fel:

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

Redigera: här är den trasiga versionen av projektet på GitHub.

Mitt projekt är strukturerat på följande sätt:

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/ (...)

Filen server.ts ser ut så här:

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)});

Filen main.ts ser ut så här:

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";

@Component({
  selector: "app",
  template: "<h1>Hello world</h1>"
})
export class AppComponent {}

bootstrap(AppComponent);

Filen index.html ser ut så här:

<!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>

Och tsconfig.json-filerna är båda ganska mycket så här:

{
    "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
    }
}

Tack.

Svar #1

angular2-polyfills.js är ett SystemJs-paket, så det behöver att SystemJs redan har installerats.

Detta är vad meddelandet require is not defined betyder, eftersom require är funktionen som systemjs använder för att importera moduler. För att åtgärda detta, flytta system.src.js till toppen och gör den till den första skriptet på sidan:

<script src="node_modules/systemjs/dist/system.src.js"></script>
... other script tags

Svar #2

Jag började precis med Angular 4 idag (uppgraderade från Angular 2).

Strax innan min injicerbara autentiseringsklass lade jag till detta:

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

Relaterade artiklar