2016-05-27 3 views
1

Я установил этот модуль npm под названием ng2-dnd, в соответствии со своей страницей wiki, мне нужно было внести изменения в systemjs, чтобы использовать его в своем приложении.systemjs не работает в angular2-rc1

Ниже мой код: 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 

любые предложения?

ответ

0

Попробуйте это,

System.config({ 
    map: { 
    '@angular': 'vendor/@angular', 
    'rxjs': 'vendor/rxjs', 
    'main': 'main.js', 
    'ng2-dnd': '../node_modules/ng2-dnd' 
    }, 
    packages: cliSystemConfigPackages 
}); 
Смежные вопросы