Thư viện javascript bên ngoài trả về 404 trên '{module}/dist /'

Question

Luôn gặp sự cố khi định cấu hình dự án bên ngoài trong Angular2.

Tôi muốn bao gồm ng2-sharebuttons trong dự án của mình. (Mà dường như không có một .d.ts tập tin toàn cầu?)

Mặc dù README.md chỉ nói npm install ng2-sharebuttons --save, tôi biết có những thứ nhiều đến thế này (systemjs.config & typings)

Đầu tiên tôi đã cố gắng để cấu hình systemjs.config có:

map{ 
    ...... 
    'ng2-sharebuttons' : 'node_modules/ng2-sharebuttons' 
} 

này ít nhất cố định 404 trên localhost/ng2-sharebuttons nhưng tạo ra một mới 404 trên localhost/node_modules/ng2-sharebuttons.

Vì vậy, tôi đã thêm một tập tin chính, thay đổi systemjs.config để

map{ 
    ...... 
    'ng2-sharebuttons' : 'node_modules/ng2-sharebuttons/dist/index.js' 
} 

Nhưng bây giờ kết quả này trong một 404 trên tất cả các con của ng2-sharebuttons/dist

Tôi đã thử làm typings install ng2-sharebuttons --save --global và typings install @types/ng2-sharebuttons --save --global cả có và không có --global cờ.

Vì vậy, hy vọng cuối cùng của tôi, tôi đã thêm tham chiếu để xem liệu điều đó có hiệu quả hay không. Thêm

/// <reference path="../../node_modules/ng2-sharebuttons/dist/index.d.ts" />

Nhưng điều này không thay đổi gì cả.

Tôi đã quên gì? Tại sao nó lại khó thế này? (Hay tôi chỉ làm cho nó khó?)

Cấu trúc & file của ng2-sharebuttons:

Và cuối cùng, được thông báo lỗi hiện đang được sản xuất bởi Chrome:

Toàn bộ systemjs.config.js

/** 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 
     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     // other libraries 
     'rxjs': 'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
     'angularfire2' : 'npm:angularfire2/bundles/angularfire2.umd.js', 
     'firebase' : 'npm:firebase', 
     'ng2-bs3-modal': 'npm:ng2-bs3-modal', 
     'ng2-sharebuttons' : 'npm:ng2-sharebuttons/dist/index.js', 
     'ng2-social-share' : 'npm:ng2-social-share/bundles/ng2-social-share.js' 
    }, 

    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     firebase: { 
     main: './firebase-browser.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

Nó ném một lỗi GET .... 404 nhưng cũng là XHR finished loading: GET .... trên cùng một thành phần/dịch vụ/tệp có vẻ khá lạ.

Answer 1

Bạn cần phải làm điều này

map:{ 
    'ng2-sharebuttons' : 'npm:ng2-sharebuttons/dist' 
}, 

packages: { 
    app: {main: './main.js', defaultExtension: 'js'}, 
    rxjs: {defaultExtension: 'js'}, 

    'ng2-sharebuttons': {main: 'index.js', defaultExtension: 'js'} 
} 

Answer 2

Xin lỗi nhưng proxy đại lý của tôi sẽ không cho phép tôi xem hình ảnh đính kèm ... Nhưng có vẻ như bạn chưa tiếp xúc tĩnh node_modules thông qua máy chủ web của mình.

Bạn chưa đề cập cụ thể công nghệ máy chủ của bạn, nhưng với nút/express đặt này trong app.js:

app.use('/node_modules', express.static(path.join(__dirname, './node_modules'))); 

Ngoài ra, sử dụng một xây dựng kịch bản để sao chép các file js liên quan đến bạn nhanh scripts (hoặc tương tự) và trỏ hệ thống của bạn.thay vào đó hãy ánh xạ cấu hình vào thư mục tập lệnh.

Hãy nhớ rằng thẻ /// <reference.../> chỉ là gợi ý cho trình biên dịch loại và trình tự phát hiện loại. Điều này không còn cần thiết trong Typescript 2, trong đó @ types/được phát hiện tự động.