Question

我不确定如何构建第三方库的import语句。

我正在尝试使用visual studio中的angular2项目的ng2-file-upload。 https://github.com/valor-software/ng2-file-upload

我的组件中有这个：

从＆＃39; ng2-file-upload＆＃39;中导入{FILE_UPLOAD_DIRECTIVES，FileUploader};

使用Visual Studio，这将构建并且intellisense在库中查找指令。在运行时我收到此错误：

获取http://localhost:54675/ng2-file-upload 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-file-upload源代码位于项目根目录中，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错误： http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select

该文件选择组件位于ng2-file-upload下的子目录中。我将它添加为地图模块，但它仅为其使用的其他组件产生了类似的错误。

当前进度 这是我的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>

这是我的组件：

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 {

}

这些是我得到的错误：

GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select 404错误：XHR错误（404 Not Found）加载 http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select（...）得到 http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-drop 404 GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-uploader 404（未找到）

从中我可以看到它正在找到ng2-file-upload组件，但是当该组件试图在子文件夹中加载组件时它会失败。

Answer 1

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

这样的事情：

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

你会注意到map:函数，这是在angular2中配置其他软件包的简单方法。

修改

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

<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>

完成此操作后，您应该能够：

import {Ng2-file-uploader} from 'ng2-file-upload'

我不确定ng2-file-upload的导出是什么，因此您必须找到该名称，如果该文件的文件夹是3个目录，则必须引用它，如：< / p>
'ng2-file-upload/second_directory/third_directory/name_of_component'

应该启动并运行。

System.js上的文档非常好，这里很容易阅读是一个很好的方法来了解如何从它的github添加插件。 https://github.com/systemjs/systemjs/blob/master/docs/overview.md#plugin-loaders

希望这有帮助！对不起，昨天我没有发布这个，暴风雪在这里，电力一整天都消失了！

编辑2：

好的一些事情，你在map函数中指定了一个文件而不是一个目录，如果你只想使用那个特定文件进行ng2-file-upload，这是可以的。但你实际上拼写错误的文件会给你一些麻烦，它应该是ng2-file-uploader.js。

此外，

{FILE_UPLOAD_DIRECTIVES} from 'ng2-file-upload';

该导入语句无效，ng2-file-upload中没有FILE_UPLOAD_DIRECTIVES。它只有一个FileUploader Class。您可以从他们的来源https://github.com/valor-software/ng2-file-upload/blob/master/components/file-upload/file-uploader.ts查看自己。

您可以使用：

import {FileUploader} from 'ng2-file-upload'

或

import {FileUploader as FILE_UPLOAD_DIRECTIVES} from 'ng2-file-upload'

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

http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select

因为您没有引用从目录中提取文件选择模块，所以您只能获得文件上传器。您可以解决此问题，但在HTML文件中根本没有引用此脚本。您需要有一个脚本标记：

<script src="node_modules/ng2-file-upload></script>

就像我之前提到的那样。

Answer 2

Index.html .. Where＆＃34; libs＆＃34;是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';

Answer 3

基本上我正在关注@Morgan G的回答，但我把它搞得一团糟。现在我在这里提供我的代码，希望它对其他人有帮助。

安装ng2-file-upload npm install ng2-file-upload --save
在index.html中导入

<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>

3。导入指令：

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

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload/ng2-file-upload'; 4.然后你应该能够添加

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

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

3 个答案: