Category: angular

VSCode cannot find js / tsc / module in a typescript node app

vscode sometimes can’t find files or executables, on windows, because of the path separator. This includes tsc, ionic and cordova

For example,

error TS5058: The specified path does not exist: c:projectssomeprojectstuff.js

cannot find tsc
 \\node_modulesmochabin_mocha

This could be a bash/cmd thing.

Some possible workarounds…

Add the tsc, ionic, cordova or vscode directory to your path

C:\Users\nick\AppData\Roaming\npm\node_modules\typescript\bin
C:\Users\nick\AppData\Roaming\npm\node_modules\ionic\bin
C:\Users\nick\AppData\Roaming\npm\node_modules\cordova\bin

change to the bash (or cmd) shell in .vscode/settings.json

 {
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "xxterminal.integrated.shell.windows": "C:\\windows\\system32\\cmd.exe"

}

Make sure there’s a SPACE in your project folder (e.g. c:\projects\My Project). This forces tsc.js to put “” around the path

Install Typescript locally (npm i typescript –save)

Override the typescript in .vscode/tasks.json with your version that includes the full path to tsc…

 {
    "version": "2.0.0",
    "tasks": [
        {
            //"type": "typescript",
            //"tsconfig": "tsconfig.json",
            "label": "tsc",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "type":"shell",
            "windows":{
                "command": "/C/Users/nick/AppData/Roaming/npm/node_modules/typescript/bin/tsc",
                "args": [
                    "-p",
                    "\"${workspaceFolder}/tsconfig.json\""]
            }
        }
    ]
}

Instead of type: typescript we’ve got type: shell, and a windows {} property. This includes the unix version of the full path to the tsc bash batch file.

This is the build task, but to make sure it’s completed before you launch your node typescript code, in .vscode/launch.json, set it as preLaunchTask like this…

 "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\index.ts",
            "outFiles": ["${workspaceFolder}\\index.js"],
            "preLaunchTask": "tsc"
        }

https://github.com/microsoft/vscode/issues/48149

https://github.com/Microsoft/vscode/issues/35593

Angular Interceptor authorization: headers are now immutable

In Angular 4, headers are immutable, so to add (say) an Authorization header in your interceptor you have to use a cunning overload of the .clone method.

My complete interceptor looks like this…

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
//import { FafService } from "./faf-service";
import { Injectable } from "@angular/core";
@Injectable()
export class FafInterceptor implements HttpInterceptor{
public theToken:string = null;
constructor(){
}
intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent>
{
let theToken = window.localStorage.getItem('theToken');
//TODO: IsGuid
if(theToken && theToken != 'null'){
var NewRequest = request.clone(
{
setHeaders:{'Authorization': 'Bearer ' + theToken}
}
);
//https://angular.io/api/common/http/HttpRequest
console.log('auth header now ' + NewRequest.headers.get('Authorization'));
return next.handle(NewRequest);
}
return next.handle(request);
}
}