Question

我安装了这个名为ng2-dnd的npm模块，根据其维基页面，我需要在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

有什么建议吗？

Answer 1

试试这个，

getJasmineRequireObj().toNotContain = function() { ... };

systemjs无法在angular2-rc1中工作

1 个答案: