1
このnpmモジュールはng2-dnd、 というwikiページに従ってインストールされています。アプリケーションで使用するためにはsystemjsを変更する必要がありました。以下はangular2-rc1でsystemjsが動作しません
私のコードです： index.htmlを
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RapidNg2</title>
<base href="/">
{{#unless environment.production}}
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
{{/unless}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Angular 2 JumpStart">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css' />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/project-manager.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-aweso me/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/styles/animate.css">
<link rel="stylesheet" href="assets/styles/angular-csp.css">
<link rel="stylesheet" href="assets/styles/cool-list.css">
<link rel="stylesheet" href="assets/styles/project-manager.css">
<link rel="stylesheet" href="assets/styles/sidebar.css">
<link rel="stylesheet" href="assets/styles/default.css">
<link rel="stylesheet" href="assets/styles/rapid-drag-drop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<rapid-ng2-app>Loading...</rapid-ng2-app>
{{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}
<script>
System.import('system-config.js').then(function() {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
</html>
ので、私は、次のように私systemjsを設定した：
システム-config.ts
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};
/** User packages configuration. */
const packages: any = {
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'ng2-dnd',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/+project-manager',
'app/+designer',
'app/+project-manager/pages/pages',
'app/+project-manager/projects/projects',
'app/+project-manager/workspaces/workspaces',
'app/+project-manager/pages',
'app/+project-manager/projects',
'app/+project-manager/workspaces',
'app/components/icici-body',
'app/components/icici-heading',
'app/components/icici-footer',
'app/components/button',
/** @cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
if(barrelName=='ng2-dnd'){
cliSystemConfigPackages[barrelName] = { main: 'ng2-dnd' };
}else{
cliSystemConfigPackages[barrelName] = { main: 'index' };
}
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
// 'ng2-dnd': '../node_modules/ng2-dnd/ng2-dnd.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
しかし、私をブラウザでエラーが下に表示されます：
zone.js:101 GET http://localhost:4200/ng2-dnd/ng2-dnd.js 404 (Not Found)
Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/ng2-dnd/ng2-dnd.js