2016-09-13 13 views
17

Tôi thực sự bị mất về điều này. Khi tôi tải ứng dụng Angular2 của mình, tôi có khoảng 200 yêu cầu tới máy chủ của tôi cho các tệp không tồn tại theo số node_modules/systemjs. Dưới đây là một ví dụ về các yêu cầu sau:SystemJS tạo ~ 200 yêu cầu đối với các tệp không tồn tại

127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/Subject.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/Observable.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/root.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/toSubscriber.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/Subscriber.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/isFunction.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/Subscription.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/isArray.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/isObject.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/tryCatch.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/errorObject.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/UnsubscriptionError.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/Observer.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/rxSubscriber.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/observable.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/ObjectUnsubscribedError.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/SubjectSubscription.js.map HTTP/1.1" 404 - 
127.0.0.1 - - [13/Sep/2016 13:00:06] "GET /node_modules/systemjs/dist/from.js.map HTTP/1.1" 404 - 

Ứng dụng Angular2 của tôi hoạt động tốt, tôi không gặp lỗi nào, mọi thứ hoạt động như mong đợi. Nhưng những yêu cầu ~ 200 404 đó thực sự làm chậm quá trình tải trang. Vì lý do tôi thực sự không thể hiểu được, những yêu cầu 404 đó thậm chí không hiển thị trong tab network của trình duyệt của tôi, nhưng Wireshark xác nhận rằng chúng đến từ đó.

Đây là tôi systemjs.config.js:

/** 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
    defaultJSExtensions: true, 
    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', 
     // angular testing umd bundles 
     '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', 
     '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', 
     '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', 
     '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', 
     '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', 
     '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', 
     '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', 
     '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', 
     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
     'moment':      'npm:moment/moment', 
     'ng2-bs3-modal':    'npm:ng2-bs3-modal', 
    }, 
    // 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' 
     }, 
     'angular2-in-memory-web-api': { 
     main: './index.js', 
     defaultExtension: 'js' 
     }, 
    } 
    }); 
})(this); 

Trả lời

11

gì bạn đang nhìn thấy là trình duyệt của bạn yêu cầu source maps, các file mà đóng vai trò như "từ điển" mà dịch mã chuyển đổi (như transpilation hoặc việc rút gọn) vào hình thức của nó trước khi chuyển đổi. Điều này thường khởi động trong khi bạn mở trình gỡ lỗi và hỗ trợ bản đồ nguồn được bật. Đây là hành vi bình thường. Nếu bạn đóng trình gỡ lỗi và tải lại ứng dụng của mình, các yêu cầu bản đồ nguồn sẽ không xảy ra.

Tuy nhiên, có vẻ như ứng dụng của bạn đang yêu cầu bản đồ nguồn ở sai địa điểm. Những thư viện này trông giống như các thư viện của bên thứ ba tìm kiếm bản đồ nguồn của chúng trong thư mục mô-đun systemjs. Tham khảo tài liệu systemjs về cách xử lý đường dẫn.

+0

Cảm ơn câu trả lời. Tôi rõ ràng là mới cho web dev và thậm chí không nhận ra những yêu cầu đó chỉ đến khi gỡ lỗi được mở. Tôi vẫn có vấn đề với con đường mặc dù, ngay cả sau khi kiểm tra các tài liệu systemjs và đọc xung quanh. Có bất cứ điều gì rõ ràng là sai với cấu hình systemjs của tôi? – Juicy

3

Để hoàn thành câu trả lời của Joseph, bạn đang tải các tệp bản đồ. Vì vậy, bạn có 2 lựa chọn:

  • sử dụng tệp bản đồ và bạn sẽ phải tạo chúng. Truy cập tệp tsconfig.json của bạn. Tại đây, bạn có thể yêu cầu tạo bản đồ

  • không sử dụng. Vì vậy, bạn có thể vô hiệu hóa chúng trong các thiết lập của devtools của bạn. Thông thường trong bảng điều khiển devtools, bạn có một thiết bị ở đâu đó trên thanh trên cùng (phụ thuộc vào phiên bản chrome của bạn). Cài đặt bên trong, bạn có thể vô hiệu hóa việc sử dụng bản đồ

Các vấn đề liên quan