Angular2 5 minute install bug - require is not defined

Question

I'm doing the Angular2 5 minute quick start.

About half way through the tutorial now, I have the following files setup correctly:

index.html,
app.component.ts
app/boot.ts
package.json
tconfig.json

Ran npm start and am getting this error:

Uncaught ReferenceError: require is not defined(anonymous function) @ boot.js:1 angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefinedreadMemberExpression @ system.src.js:1456(anonymous function) @ system.src.js:3224(anonymous function) @ system.src.js:3749complete @ system.src.js:2487run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111

I found this link about using the es6 shim and I included <script src="node_modules/es6-shim/es6-shim.js"></script>.

However I'm still getting the Uncaught ReferenceError: require is not defined error.

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

(app/boot.ts)

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/es6-shim/es6-shim.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>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

tconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

The compiled app/boot.js

Last log from `npm start`

They dont mention it but if you follow the guide it will get compiled for you, did you add the tsconfig.json and the package.json files with the exact content as the guide? — Langley, Jan 11 '16 at 20:03
Yup, I just double checked both those files, adding another screenshot. — Leon Gaban, Jan 11 '16 at 20:07
if you have to compile them manually you are doing something wrong, don't just check you have the files, check you have the contents correctly, in package.json, if you do, and you run `npm install` and then `npm start` it should work for you, because if you have this: `{ "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " } }` in package.json, when you do npm start, node will start both the server and the compiler to compile your files. — Langley, Jan 11 '16 at 20:11
ok, I removed the manually compiled `.js` files, then ran `npm install` and `npm start` again and getting 404 on the missing `app/boot.js` :( — Leon Gaban, Jan 11 '16 at 20:14
are you getting anything in the console where you ran npm install and start? — Langley, Jan 11 '16 at 20:15
Just wanted to add that the 5 Minute install is working way better now! Got an app setup last weekend, still took like 10 minutes, but bug free lol! — Leon Gaban, Jul 02 '16 at 16:43

score 28 · Answer 1 · edited Mar 07 '17 at 15:27

28

I found that the reason mine brought an error was due module set as "commonjs" in my tsconfig.json file, changing it to system fixed it, now it looks like below

{
  "compilerOptions": {
        "target": "es5",
        "module": "system",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true
    },
  "exclude": [
    "node_modules"
  ]
}

EDIT This answer was based on Angular 2 beta 17 .Based on the time of this answer and the rapid changes angular 2 has undergone, this may not work anymore.

edited Mar 07 '17 at 15:27

Edric

24,639
13
81
91

answered Jan 22 '16 at 20:01

Michael Gikaru

447
1
6
10

2

Upvoted. There are so many out-of-date examples, especially for IIS / Visual Studio. I've been mixing examples trying to get ANYTHING building. Didn't notice that the 5-min walkthrough used system instead of commonjs! Thank you. – Vok Apr 22 '16 at 20:06
5

"module": "system", doesn't stop me getting this error – SuperUberDuper Jul 18 '16 at 16:03

score 18 · Answer 2 · answered Apr 15 '16 at 22:58

18

I've got the same Error in the angular2.beta15 version.

I've solved it by removing

format: 'register',

out of index.html

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
</script>

answered Apr 15 '16 at 22:58

Reinhard

1,516
1
18
25

It worked for me, but I don't like removing things i don't understand. So I find other solution. I just update packages via npm update. – Piotr Galas May 01 '16 at 14:58

score 11 · Accepted Answer · edited May 23 '17 at 11:33

OK finally got my 'basic' app to work.

First my problem was that npm start was not compiling my typescript .ts files.

From this post, I found an answer here Cannot find external module 'angular2/angular2' - Angular2 w/ Typescript

I needed to run npm install -g tsd@latest to update my TypeScript definition. Right after that I needed to update the TypeScript Definition (TSD) for Angular2 tsd install angular2.

After this was done I was still getting errors from my boot.js file.

Instead of this import {AppComponent} from './app.component'

I needed to write it like this import {AppComponent} from '../app.component.js'

Now it works! https://github.com/leongaban/angular2quickstart

One annoying problem is that npm start still isn't auto compiling the typescript files, so I still have to manually compile each .ts file by hand tsc app.component.ts --module system

I tried the guide too, the problem I was having was related to lite-server module, serving the application with http-server solved it for me. — maioman, Jan 11 '16 at 20:58

score 3 · Answer 4 · answered Aug 21 '16 at 05:36

3

I'm using angular-cli and it now uses webpack but I was getting this error when loading css. I added declare let require: any; before my component and now it works.

answered Aug 21 '16 at 05:36

Post Impatica

14,999
9
67
78

score 2 · Answer 5 · answered Jul 26 '16 at 22:54

If you are following the Upgrade to Angular2 tutorial, this may bite you:

Make sure you are not still manually loading your converted javascript files when you convert the files to typescript and use the module loaders to load them.

I had converted some files to TS, but was still loading the original (now transpiled) JS files in the index.html. If you do this, you'll keep getting "require is not defined" because the "require" library hasn't been loaded yet.

Bottom line: So, if you get "require is not defined" put a debugger statement before the offending line (for me, it was import { Injectable } from '@angular/core' ), look at what source files have been loaded and make sure you're not still loading the file manually.

score 1 · Answer 6 · edited May 04 '16 at 16:39

I had a similar problem which was caused by the fact that I was setting the wrong format for the package. The format of the package is very important in order for SystemJS to know how to handle it. Documentation Here

<script>
 System.config({
    packages: {
        appjs: {
            format: 'register',
            defaultExtension: 'js'
        },
        primeng: {
            format: 'cjs',
            defaultExtension: 'js'
        }
    },
    map: {
        'primeng': 'lib'
    }
});
 System.import('appjs/main').then(null, console.error.bind(console));
</script>

In my case I was setting the format of primeng to "register" instead of "cjs".

Thanks for the extra tips! I've personally decided not to touch Angular 2 till version `2.2` is out lol. — Leon Gaban, May 04 '16 at 15:40

score 0 · Answer 7 · answered Sep 30 '16 at 14:00

0

I used "invalid" import:

import {UrlSegment} from '@angular/router/index';

After removing /index it started to compile again.

answered Sep 30 '16 at 14:00

D R

1

Angular2 5 minute install bug - require is not defined

app.component.ts

(app/boot.ts)

index.html

package.json

tconfig.json

The compiled app/boot.js

Last log from `npm start`

7 Answers7

Linked

Related

Angular2 5 minute install bug - require is not defined

app.component.ts

(app/boot.ts)

index.html

package.json

tconfig.json

The compiled app/boot.js

Last log from npm start

7 Answers7

Linked

Related

Last log from `npm start`