如何从第三方angular2应用程序构造导入_Angular_Angular2 Directives

如何从第三方angular2应用程序构造导入

angular

如何从第三方angular2应用程序构造导入,angular,angular2-directives,Angular,Angular2 Directives,我不知道如何为第三方库构造导入语句我正在尝试使用visual studio中angular2项目中的ng2文件上载。我的组件中包含以下内容： import {Component} from 'angular2/core'; import {FILE_UPLOAD_DIRECTIVES} from 'ng2-file-upload'; @Component({ selector: 'document-upload', templateUrl: 'app/shared/doc

我不知道如何为第三方库构造导入语句

我正在尝试使用visual studio中angular2项目中的ng2文件上载。

我的组件中包含以下内容：

import {Component} from 'angular2/core';
import {FILE_UPLOAD_DIRECTIVES} from 'ng2-file-upload';

@Component({
    selector: 'document-upload',
    templateUrl: 'app/shared/documentUpload/documentUpload.component.html',
    directives: [FILE_UPLOAD_DIRECTIVES]
})

export class DocumentUploadComponent {

}

从“ng2文件上载”导入{FILE_UPLOAD_指令，FileUploader}

使用VisualStudio，这将生成并由intellisense在库中查找指令。在运行时，我遇到以下错误：

获取404（未找到）

显然，这不是正确的道路

下面是我的目录结构。导入位于documentUpload.component.ts中

> wwwroot
> -------app
> ----------shared
> -------------documentUpload
> ----------------documentUpload.component.ts
> -------node_modules
> ----------ng2-file-upload
> -------------ng2-file-upload.js
> -------------components
> ----------------file-upload
> -------------------file-uploader.js

我上传ng2文件的源代码在项目根目录中，一个gulp文件只将js和css移动到我的wwwroot/node_modules文件夹中。我认为在设计时，它在我的根目录中使用源代码（因此intellisense可以工作并构建），但在运行时，它试图从wwwroot中提取，并且缺少或引用了错误的内容

更新：根据反馈，我将此模块添加到system.config中，如下所示：

    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        map: {
            'ng2fileupload': 'node_modules/ng2-file-upload/ng2-file-upload.js'
        }
    });

  System.import('app/boot')
        .then(null, console.error.bind(console));
  System.import('ng2fileupload')
        .then(null, console.error.bind(console));

此时，加载时出现404错误：

该文件选择组件位于ng2文件上载下的子目录中。我将它添加为一个映射模块，但它使用的其他组件也会产生类似的错误

当前进度 这是我的index.html文件

<!DOCTYPE html>
<html>

<head>
    <title>FMS</title>
    <base href="/" />
    <!-- 1. Load libraries -->
    <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/node_modules/rxjs/bundles/Rx.js"></script>
    <script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/es6-shim/es6-shim.js"></script>

    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/node_modules/angular2/bundles/http.js"></script>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/node_modules/spinkit/css/spinkit.css" />

    <link rel="stylesheet" href="/app/assets/site.css" />

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        },
        map:{
        'ng2-file-upload':'node_modules/ng2-file-upload/ng2-file-upload.js'
        }

      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

</head>

<!-- 3. Display the application -->
<body>
    <fmssupport-app></fmssupport-app>
</body>

</html>

以下是我得到的错误：

得到 404错误：XHR错误（404未找到）加载 (…) 得到 404得到 404（未找到）

由此我可以看出，它正在查找ng2文件上载组件，但当该组件尝试加载子文件夹中的组件时，它失败。

通常，您可以通过index.html中的System.config文件执行此操作，该文件调用您的angular应用程序

大概是这样的：

System.config({
        defaultJSExtensions: true,
        packages: {
            "/angular2": {"defaultExtension": false}
        },
        map: {
            'ng2-file-upload': 'node_modules/ng2-file-upload'
        }
});

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/ng2-file-upload></script> //Note how I am grabbing it here.
<script>
     System.config({
        packages: {
          app: {
            format: 'register',
            defaultJSExtensions: true
          },
        },
        map: {
            "ng2-file-upload": "/node_modules/ng2-file-upload"//This is so we map it to the name ng2-file-upload for use in our application.
          }
      });
</script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/http.min.js"></script>
<script src="node_modules/angular2/bundles/router.min.js"></script>
<script>
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

您会注意到

map:

函数，这是在angular2中配置附加包的一种简单方法

编辑：

您的index.html文件应如下所示：

System.config({
        defaultJSExtensions: true,
        packages: {
            "/angular2": {"defaultExtension": false}
        },
        map: {
            'ng2-file-upload': 'node_modules/ng2-file-upload'
        }
});

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/ng2-file-upload></script> //Note how I am grabbing it here.
<script>
     System.config({
        packages: {
          app: {
            format: 'register',
            defaultJSExtensions: true
          },
        },
        map: {
            "ng2-file-upload": "/node_modules/ng2-file-upload"//This is so we map it to the name ng2-file-upload for use in our application.
          }
      });
</script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/http.min.js"></script>
<script src="node_modules/angular2/bundles/router.min.js"></script>
<script>
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

我不确定ng2文件上传的导出将是什么，因此您必须找到名称，如果文件的文件夹是3个目录，您必须引用它，如：

'ng2-file-upload/second_directory/third_directory/name_of_component'

这应该可以让它启动并运行

js上的文档非常好读，这是查看如何从github向其中添加插件的好方法

希望这有帮助！很抱歉，我昨天没发这篇文章，这里下了一场大暴风雪，停电了一整天

编辑2:

好的，有几件事，您在

map

函数中指定的是一个文件而不是一个目录，如果您只想将该特定文件用于ng2文件上载，这是可以的。但是你还是把文件拼错了，这让你很头疼，应该是ng2-file-uploader.js

而且

该导入语句无效，ng2文件上传中没有

文件上传\u指令。它只有一个文件上传器类
。你可以从他们的来源检查你自己
您可以使用：
import {FileUploader} from 'ng2-file-upload'

或
我认为您遇到的一些问题是，您没有指定目录，而只是直接指定文件。这就是您遇到错误的原因：

因为您没有引用从目录中提取文件选择模块，所以您只能获得文件上载程序。您可以解决这个问题，但在HTML文件中，您根本没有引用这个脚本。您需要有一个脚本标记：
<script src="node_modules/ng2-file-upload></script>

Index.html。。其中“libs”是wwwroot下的.js文件夹
 System.config({
        packages: {
            appScripts: {
                defaultExtension: 'js'
            }
            , 'ng2-file-upload': { defaultExtension: 'js' }
                }, map: { 'ng2-file-upload': 'libs/ng2-file-upload/' }
            }

    );

和组件。。。{Directpry/File}
import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload/ng2-file-upload';

基本上我是在遵循@Morgan G的答案，但我有点搞砸了。现在我在这里提供我的代码，希望对其他人有所帮助

安装ng2文件上载npm安装ng2文件上载--保存

在index.html中导入
以及从“ng2文件上传/ng2文件上传”导入{FILE_UPLOAD_指令，FileUploader}；

4.那么您应该能够添加
<input type="file" ng2-file-select [uploader]="uploader" multiple  />



您的模板中是否有相同的错误消息？你能展示一下你是如何在你的组件中导入它的吗？我用system.config更新了帖子。如何查看加载了哪些模块？Hrmm我的意思是，您如何在组件中访问它？您使用的导入语句是什么？另外，我假设你的app.js在wwwroot/app中，而不是wwroot/app/shared中，对吗？我更新了帖子，添加了导入和一些错误消息。关于应用程序js的位置，您是正确的。您可以发布整个index.html文件吗？并发布您正在使用它的组件？另外，您不应该执行2system.import。我认为这样做会创建两个独立的“系统”，尽管我不能100%确定这一点。我会编辑我的帖子来帮助你。
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"></script>

<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
  System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
    },
    'ng2-file-upload': { "defaultExtension": "js" }
    },
  map: {
       "ng2-file-upload": "/node_modules/ng2-file-upload"
     }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

@Component({
...
directives: [FILE_UPLOAD_DIRECTIVES] })

<input type="file" ng2-file-select [uploader]="uploader" multiple  />