We use this setting in development:
we develop our angular project in typescript using IntelliJ IDEA
transpile our typescript code to javascript with grunt-ts
concatenate all transpiled javascript files to one singe all.js file using grunt-contrib-concat
all.js file is referenced in html
The problem is that we run our app from concatenated all.js file so we can't debug it.
Any ideas on how can we debug our source code in typescript?
Is there any development-wise solution or advice to this?
Related
I have a laravel project using ag-grid with a button that has its funtions in a seperate .js file. Done as documentation dictates (for vue.js):
https://blog.ag-grid.com/cell-renderers-in-ag-grid-every-different-flavour/#vuejs
This works in Pre laravel 9, using webpack instead of vite.
The issue is that vite build is compiling without that js file, so the ag grid button is not showing. Running vite dev will not compile away the js file, and it will work as intended.
How do i get vite to not ignore the file when compiling the build?
I started using Laravel Mix as a Webpack for my web development projects, and so far, I'm finding it a perfect tool for my projects, but I wanted to make some aspects a little more organized; when I minify the CSS file, it minifies the file in the same folder where the example CSS file is:
Before:
stylesheets/main/style.css
After:
stylesheets/main/style.css and stylesheets/main/style.min.css
In this case, I wanted to put the minified files in a folder called minify to look like this.
stylesheets/minify/style.min.css
The Laravel Mix website says that the file is automatically created inside the destination folder of the file, and I would like to change this behavior. Is there any way or some extension that can help me change the file's destination?
Here is my code:
// webpack.mix.js
let mix = require('laravel-mix');
mix
.sass('stylesheets/sass/main.scss', 'stylesheets/main/main.css')
.minify('stylesheets/main/main.css');
// Change destination not working
//.minify('stylesheets/main/main.css', 'my-destination');
I wrote a web page using Angular 2 and Typescript. When I opened Firefox Web Console, and I tried to find the .ts file in order to debug it, all I found is the Javascript file that was 'transpiled' from the original .ts file.
In Chrome, it's possible to see the Typescript file in the Developer Tools and debug it. Is it also possible in FF ?
Yes. You need to create the .map files when transpiling from TypeScript to Javascript.
Just include the property "sourceMap": true in the compilerOptions in your tsconfig.json and you're done!
Is it possible to see TypeScript source maps in console?
I'm using Firefox Developer Edition and the Console is showing the .js line-numbers. I have a single .js file, compiled from multiple TypeScript files.
Chrome and Safari are showing the TypeScript sources correctly.
I have been trying to deal with this problem. I found an answer that works for me and have detailed it in an answer here Firefox isnt showing typescript ts source maps in the debugger
Your problem looks similar. Fundamentally it seems because FF does not handle relative paths to the .map files which are specified in your compiled javascript.
I need some suggestions to transfer javascript code in html files to typescript files in Visual Studio 2015.
Right now, I have 4 HTML views, where I want to take out the javascript code and convert it to the typescript files. The views are:
Travel.cshtml,
Hotel.cshtml,
Tpa.cshtml,
Passengers.cshtml
Every view contains html code + razor and a javascript section.
I'm trying to create 4 typescript files and link them to the view. As the image shows, I have created the files in a folder called "pages". For now they are all just empty :)
How can I link those pages to the representative views, so that the
Travel.ts file is linked to the Travel.cshtml file?
Some may ask, why am I doing this? .. I'm doing this to get clean html files with no javascript in, so its easier to read. Also I need to learn the typescript syntax which is a little difficult for me.
Hope someone can help.
Valid javascript code is valid typescript code. So to get started, you can use your existing javascript code inside your typescript files.
Every time you save your typescript file in visual studio, typescript compiler will be compiling this file and generate the corresponding javascript file with the same name as of your typescript file name, provided you do not have any errors in your typescript file.The generated file will be in the same location of where you have your typescript files are. If you want to see those, you can enable the Show All files option in solution explorer.
You will not include the typescript files in your pages, instead we will use the generated js files. So in your case, in your Hotels view(Hotels.cshtml), you can include it like
#section Scripts
{
<script src="~/Content/Scripts/Pages/Hotels.js"></script>
}
Or if you want to bundle it, Add a new bundle in your RegisterBundles() method.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/hotels").Include(
"~/Content/Scripts/Pages/Hotels.js"));
// Other bundles goes here
}
And in your view, use the bundle path
#section Scripts
{
#Scripts.Render("~/bundles/hotels")
}