Tôi đang sử dụng System.js để tải các mô-đun được viết bằng TypeScript. System.js bao bọc mã gốc của tôi trong một hàm, do đó khi tôi gặp lỗi trong mã của mình và tôi cố gắng nhìn thấy nó trong công cụ nhà phát triển Chrome, việc nhấp vào lỗi vừa đưa tôi đến dòng đầu tiên của tệp JavaScript trong đó có khai báo hàm gói mà System.js đã thêm vào, thay vì dòng chính xác trong tệp TypeScript gốc.System.js không hiển thị dấu vết ngăn xếp đầy đủ
Thông thường đây không phải là vấn đề vì System.js thêm dấu vết ngăn xếp của chính nó vào cuối lỗi và nhấp vào nó đưa tôi đến đúng dòng trong tệp TypeScript gốc mà không có hàm gói.
Tuy nhiên, đôi khi System.js không bao gồm toàn bộ dấu vết ngăn xếp, sau đó theo dõi ngăn xếp ban đầu mà Chrome tạo là nơi duy nhất để xem dòng lỗi, nhưng vấn đề là việc nhấp vào nó sẽ đưa tôi đến tệp JavaScript thay vì TypeScript và dòng đầu tiên, thay cho dòng đầu tiên, như tôi đã mô tả ở trên.
Câu hỏi của tôi: Đây có phải là lỗi trong System.js hoặc có lẽ tôi đang làm điều gì sai?
Để làm cho nó dễ hiểu hơn, tôi sẽ thêm ở đây mã của tôi và sẽ giải thích kịch bản. Tuy nhiên, hãy nhớ rằng tôi không cố gắng sửa mã của mình nhưng để hiểu tại sao tôi không thể truy cập đúng dòng lỗi thông qua công cụ nhà phát triển.
Vì vậy, đây là lời tuyên bố System.js tôi & cấu hình:
<script src="/assets/libs/systemjs-master/dist/system-polyfills.js"></script>
<script src="/assets/libs/systemjs-master/dist/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
transpiler: 'typescript',
});
System.import('app.module')
.then(null, console.error.bind(console));
</script>
Và đây là app.module (file gốc mà System.js tải):
import './angular-1.4.7'
import './angular-route.min'
import {User} from "./classes";
import {Post} from "./classes";
import {BlogModel} from "./model"
var app: angular.IModule = angular.module("blogApp", ["ngRoute"]);
var model: BlogModel = new BlogModel();
app.run(function($http: angular.IHttpService): void{
$http.get("/user-context/current-user")
.success(function(currentUser: User): void{
if(currentUser.userName) {
model.currentUser = currentUser;
}
});
...
});
...
Dòng sản xuất lỗi:
$http.get("/user-context/current-user")
Đây là dấu vết ngăn xếp đầy đủ Tôi nhận được:
Như bạn có thể thấy, dòng lỗi đúng là chỉ được hiển thị trong các nhà phát triển công cụ OOTB vết đống, nhưng không phải trong System.js một (trong đó 50% thời gian không hiển thị các dòng lỗi thực tế và phải làm mọi lúc).
Và khi tôi bấm vào dòng lỗi trong các nhà phát triển công cụ OOTB stack trace, tôi chỉ nhận được tập tin này với dòng đầu tiên nhấn mạnh:
(function(require, exports, module, __filename, __dirname, global, GLOBAL) { //this line is highlighted
require('./angular-1.4.7');
require('./angular-route.min');
var model_1 = require("./model");
var app = angular.module("blogApp", ["ngRoute"]);
var model = new model_1.BlogModel();
app.run(function ($http) {
$http.get("/user-context/current-user") //but this is the line that should be highlighted
.success(function (currentUser) {
if (currentUser.userName) {
model.currentUser = currentUser;
}
});
...
});
...
});
//# sourceMappingURL=app.module.js.map
}).apply(__cjsWrapper.exports, __cjsWrapper.args);
Câu hỏi của tôi: Đây có phải là một lỗi trong System.js hoặc có lẽ tôi đang làm gì đó sai?
Bất kỳ trợ giúp nào sẽ được đánh giá cao!
Nếu bạn đang tải bất kỳ JS qua CDN, hãy thử và phục vụ nó lên từ máy chủ giống như JS của bạn và xem nếu điều đó giúp . –