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,

Answer 1

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".

Answer 2

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.

Answer 3

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.

Answer 4

I used "invalid" import:

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

After removing /index it started to compile again.

Answer 5

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>

Answer 6

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.