javascript - systemjs 在 angular2-rc1 中不起作用

原文 标签 javascript typescript angular systemjs

我已经安装了这个名为 ng2-dnd 的 npm 模块,
根据其 wiki 页面,我需要在 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配置如下:

系统配置.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

有什么建议?

最佳答案

尝试这个,

System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'ng2-dnd': '../node_modules/ng2-dnd'
  },  
  packages: cliSystemConfigPackages
 });

关于javascript - systemjs 在 angular2-rc1 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37481164/

相关文章:

angular - karma + Jasmine : Cannot read property 'getComponentFromError'

javascript - 提交 Action

json - Typescript JSON字符串到类

javascript - 逐步从包含每个 JS 文件转向模块捆绑

angular - HttpInterceptor 中的路由导航

javascript - 为什么我收到 ERROR TypeError : "xyz" is not a function?

javascript - 如何在 typescript 中创建一个零数组?

javascript - 当检查为 false 时,从 javascript 中以逗号分隔的字符串中删除数字

javascript - javascript:“somestring A.B.C(任何内容都可以在这里)”的正则表达式

typescript - TypeScript:如何从类型中提取通用参数?