Angular2 : Require is not defined with external library

Question

I do have my basic angular2 app working. However, when I try to add an external library like ng2-bootstrap, I am having the following error :

ReferenceError: require is not defined in angular2

I did check the many other existing cases, but I didn't manage to fix this bug. Here are my files:

index.html:

 @()
<!doctype html>
<html lang="en" data-framework="angular2">
    <head>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>FOO</title>
        <script src='@routes.Assets.versioned("lib/typescript/lib/typescript.js")'></script>
        <script src='@routes.Assets.versioned("lib/systemjs/dist/system.src.js")'></script>
        <script src='@routes.Assets.versioned("lib/angular2/bundles/angular2-polyfills.js")'></script>
        <script src='@routes.Assets.versioned("lib/es6-shim/es6-shim.min.js")'></script>
        <script src='@routes.Assets.versioned("lib/angular2/es6/dev/src/testing/shims_for_IE.js")'></script>
        <script src='@routes.Assets.versioned("lib/rxjs/bundles/Rx.js")'></script>
        <script src='@routes.Assets.versioned("lib/angular2/bundles/angular2.js")'></script>
        <script src='@routes.Assets.versioned("lib/angular2/bundles/http.js")'></script>
        <script src='@routes.Assets.versioned("lib/angular2/bundles/router.dev.js")'></script>
        <script src='@routes.Assets.versioned("lib/ng2-bootstrap/ng2-bootstrap.js")'></script>  <!-- Library implying the error -->           
        <script src='@routes.Assets.versioned("systemjs.config.js")'></script>

        <script>
            System.import('@routes.Assets.versioned("app/bootstrap.ts")')
                    .catch(console.error.bind(console));
        </script>
    </head>
    <body>
        <app></app>
    </body>
</html>

system.config.js:

(function(global) {

  var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!

  var  map = {
    'app':                        'assets/app', // 'dist',
    'rxjs':                       'assets/lib/rxjs'
  };

  var packages = {
    'assets/app':                 { main: 'bootstrap.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/router-deprecated',
      '@angular/upgrade',
  ];

  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  };

  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "emitDecoratorMetadata": true,
    "experimentalDecorators":true,
    "sourceMap": true,
    "noImplicitAny":false,
    "noFallthroughCasesInSwitch":true,
    "noImplicitReturns":true,
    "outDir": "./target/ts"
  },
  "exclude": [
    "node_modules",
    "project/target",
    "typings/main",
    "typings/main.d.ts",
    "typings/browser",
    "target/web"
  ]
}

Any idea where the error could come from ? I did try to add it directly inside the system.config.js and it works fine :

  var  map = {
    'app':                        'assets/app', // 'dist',
    'rxjs':                       'assets/lib/rxjs',
    'ng2-bootstrap':              'assets/lib/ng2-bootstrap'
  };

  var packages = {
    'assets/app':                 { main: 'bootstrap.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'ng2-bootstrap':              { defaultExtension: 'js' }
  };

I still would like to have it working with <script src='@routes.Assets.versioned("lib/ng2-bootstrap/ng2-bootstrap.js")'></script> inside the template directly. Any idea why I do have require is not defined ? I did try other libraries, and I do have the same error.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Any idea why I do have require is not defined

This is a loader error. The library depends on requirejs which you need to load in your page.

More

Check the docs at http://requirejs.org/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 14, 2016 at 18:25

basarat

278k61 gold badges475 silver badges528 bronze badges

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

Collectives™ on Stack Overflow

Angular2 : Require is not defined with external library

1 Answer 1

More

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

More

Comments

Your Answer

Sign up or log in

Post as a guest

Related