Nativescript/Angular2: inline sourcemap confusion - nativescript

I am trying to have .map sourceMap files generated when doing a Angular2/Nativescript build. I recently updated to Nativescript 2.5.1 and it doesn't seem to generate .map files by default anymore. The last .map files I can see in my project was from three months ago. When I add sourcemap: true to tsconfig.json I get an error complaining about not being able to generate sourcemap files with inline sourcemap files. Any idea what this means? IF there are inline sourcemap files being generated where can I find it? How can I debug in visual code using inline sourcemap files?
my error:
error TS5053: Option 'sourceMap' cannot be specified with option 'inlineSourceMap'.
my tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true
},
"exclude": [
"node_modules",
"platforms",
"**/*.aot.ts"
]
}

This isn't exactly a perfect fix, but here's how I got my IDE working with the sourceMaps with nativescript. Open node_modules/nativescript-dev-typescript/lib/compiler.js.
Change line 33 from:
nodeArgs.push('--inlineSourceMap', '--inlineSources');
to
nodeArgs.push('--sourceMap', '--inlineSources');.
Running your project you should now have the sourcMapping working as hoped!

Related

Visual Studio clean cannot delete compiled Typescript files

Background
In our VB.net/C# MVC solution we have just begun to use Typescript. To do so I set up a ScriptsTS directory that sits next to the Scripts directory where we would normally place our JS. I set up our tsconfig.json file so that the .ts files in ScriptsTS get compiled to their relative position in Scripts. We then check in this compiled js file because this is what we want published to our websites.
Question
When cleaning the solution it attempts to delete the compiled JS and by default that file is readonly if it's checked in so the clean fails. So my question is, how can I disable the deletion on clean? Or am I just doing this completely incorrectly and I should be using another process to handle these compiled files and not checking them in?
tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictNullChecks": true,
"noEmitOnError": false,
"removeComments": false,
"sourceMap": false,
"target": "es3",
"allowJs": true,
"typeRoots": [ "node_modules/#types", "assets/js/types" ],
"outDir": "Scripts",
"rootDir": "ScriptsTS"
},
"exclude": [
"node_modules"
],
"include": [
"ScriptsTS/**/*.ts"
]
}

TypeScript generates all files in root of outDir

Typescript 2.3.3 within VS 2015
Have a project which contains TSSrc/Subfolder1 and plenty .ts files there.
Have a flowing tsconfig.json
{
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": false,
"target": "es5",
"outDir": "../Scripts/TSOutput"
},
"files": [
"Subfolder1/file1.ts",
"Subfolder1/file2.ts",
"Subfolder1/file3.ts"
],
"compileOnSave": true
}
My problem is that TypeScript generates all .js file directly in outDir but not outDir/Subfolder1, how to force it always use appropriate subfolder hierarchy?
So far the only solution I've found is to create extra fake .ts file in different source subfolder
"files": [
"Subfolder2/stub.ts",
"Subfolder1/file1.ts",
"Subfolder1/file2.ts",
"Subfolder1/file3.ts"
]
After this workaround TS generates Subfolder1 and Subfolder2 inside of outDir and puts js files there. - which is kind of OK solution and even may save someone's time, unless there is a correct way to do so. Please help if you know how to.
As tiona points out, you should probably be using a combination of outDir and rootDir. Please take a look at this TypeScript GitHub issue, which is about the same issue you are experiencing. Your tsconfig file should look something like:
{
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": false,
"target": "es5",
"outDir": "../Scripts/TSOutput",
"rootDir": "./"
},
"files": [
"Src/Subfolder1/file1.ts",
"Src/Subfolder1/file2.ts",
"Src/Subfolder1/file3.ts"
],
"compileOnSave": true
}
Edited based on your comment above.
If your TS files are in folders under a Src folder, and you want the JS files in the TSOutput folder under the same subfolders, the above tsconfig should work.
This will put Src/Subfolder1/file1.ts output into ../Scripts/TSOutput/Subfolder1/file1.js

Compiling typescript in Visual Studio gives error "Unexpected Token..."

I am working on a large complex node project in Visual Studio 2013 update 5. I have tsc version 1.8.5 installed, and cannot find any references on my system to any other version. When I compile on the commandline using "tsc --module commonjs", the program compiles cleanly.
When I compile in visual studio I get the error
Build: Unexpected token; 'module, class, interface, enum, import or statement expected'
The file flagged is express.d.ts.
This is stopping me from running the debugger, even though I can compile on the commandline. Is there something about VS configured incorrectly?
James
Given the commandline that works, I'm betting you need to modify your tsconfg.json
The import bits down there is obviously the "module": "commonjs"
This is an entire "standard" tsconfig file for use with Typings v1.0.0 or greater.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": false,
"removeComments": true,
"noLib": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"pretty": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitUseStrict": false,
"noFallthroughCasesInSwitch": true
},
"exclude": [
"node_modules",
"typings/index.d.ts",
"typings/modules"
],
"compileOnSave": false
}
Right click the project and select "Properties". In the Typescript tab, select the correct module system (this will add the correct compiler flags)

Visual Studio not compiling TypeScript

I have a Visual Studio project with a structure like so:
My tsconfig.json looks like:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "../wwwroot/"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
However, VS isn't compiling the app.ts into the wwwroot folder.
What am I missing?
Try adding "compileOnSave": true to your tsconfig.json:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "../wwwroot/"
},
"exclude": [
"node_modules",
"wwwroot"
],
"compileOnSave": true
}
It should compile every time you save now.
From within Visual Studio, Project > Properties > Build > ensure that the "Compile TypeScript on build" is checked:
Also, in your tsconfig.json you should specify a rootDir so that TypeScript knows where to look for *.ts files it should compile:
{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "../wwwroot/",
"rootDir": "../wwwroot/"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
The details are called out on the TypeScript page here and here.
Don't forget to actually build it. It isn't a file watcher scenario.
It could be a syntax error in the typescript file.
My solution was to roll back the .ts file until it compiled (i.e. the timestamps of typescript and javascript files were identical) and start to change the .ts file from there. If the timestamps are not identical after compiling the .ts file, then we know it is probably a syntax error. I had to compile after every change and check the timestamp.
The syntax error was unfortunately not shown anywhere so I had to rely on timestamps to determine whether a file was compiled or not.
I had Compile-on-save enabled in Visual Studio 2019
Below is an screenshot of FileExplorer where the .ts has an error. Notice the difference in timestamps.
Below is an screenshot of FileExplorer where the .ts file is complied into `javascript successfully. Motice the timestamps are identical.
In VS 2022, changing the .ts file's Property -> Build Action from "None" to "TypeScript File" did the trick for me.

TypeScript error: "Cannot find name" in Visual Studio

I've seen a lot of threads and discussions about that but I'm not getting to fix the issue. This is my post from some days ago.
One of the purposes of typings is to avoid the use of <reference> tags, right?
But if I don't use it, Visual Studio complains:
Visual Studio stops complaining once I reference browser.d.ts.
Here is my tsconfig:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"files": [
],
"exclude": [
"node_modules",
"wwwroot"
]
}
I also tried removing the "files" property from the tsconfig as suggested here, but if I do this, I get compilation error in other typescript files inside the ambient folder of typings.
The code runs and all is fine, but I want to understand if I'm doing something wrong or if it's a Visual Studio problem.
For those who might have the same issue in the future:
I fixed the issue. The secret is to exclude the "files" property from tsconfig and in the "excluded" section add the folder "typings".
The tsconfig should now look like that:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"typings",
"node_modules",
"wwwroot"
]
}
In my case I fixed adding "jasmine" into "types" section in tsconfig.json. Like this:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"typings",
"node_modules",
"wwwroot"
],
"types": ["jasmine"]
}

Resources