0
私の基本的なangle2アプリケーションが動作しています。しかし、私はNG2-ブートストラップのような外部ライブラリを追加しようとすると、私は次のようなエラーが午前：Angular2：Requireが外部ライブラリで定義されていません
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？ 他のライブラリを試しましたが、同じエラーがあります。