I am currently developing an Angular application using es6 modules, TypeScript, and SystemJS as the module loader. This is my current configuration:
tsconfig.json:
{
"compilerOptions": {
...
"target": "es5",
"module": "system",
...
}
}
index.html:
<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script>System.import('js/app.js')</script>
sample script (TypeScript):
import {IConfig} from "./app-config";
export class ConfigLoader {
...
}
While everything functions smoothly on Chrome, I encountered issues when attempting to debug using Safari's Web Inspector. It appears that breakpoints cannot be set in scripts loaded via XHR (such as those loaded by SystemJS), only in scripts directly connected through HTML script tags. As a result, debugging becomes challenging.
In an attempt to address this issue, I tried incorporating script tags alongside SystemJS in the html file:
<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="js/app-config.js"></script>
... additional app scripts
<script>System.import('js/app.js')</script>
Unfortunately, this approach was unsuccessful as SystemJS did not seem to respond positively:
Invalid System.register call. Anonymous System.register calls can only be made by modules loaded by SystemJS.import and not via script tags.
I am seeking advice on how to utilize SystemJS while ensuring the ability to debug effectively in Safari. A more sophisticated solution than simply inserting debugger statements in each script would be greatly appreciated.