更多

Question

我的基本angular2应用程序正在运行。但是，当我尝试添加像ng2-bootstrap这样的外部库时，我遇到以下错误：

ReferenceError: require is not defined in angular2

我确实检查了许多其他现有案例，但我没有设法修复此错误。这是我的文件：

的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"
  ]
}

知道错误可能来自哪里？我确实尝试直接在system.config.js中添加它，它工作正常：

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

我仍然希望直接在模板中使用<script src='@routes.Assets.versioned("lib/ng2-bootstrap/ng2-bootstrap.js")'></script>。知道为什么我有require is not defined吗？我确实尝试过其他库，我也有同样的错误。

Answer 1

我知道为什么我有需要没有定义

这是一个加载程序错误。该库取决于您需要在页面中加载的requirejs。

Angular2：要求未使用外部库定义

1 个答案:

更多