Basic Setup for Typescript Types - Cannot find name 'angular'

Question

My team is working on an older AngularJS project that we have recently upgraded to .Net Core 3.1 while the project works fine without it we would like to start upgrading our scripts to use TypeScript. None of us have actually used Typescript before and I'm sure we have something very basic messed up in our config.

I've set up a demo project which can be found here: https://github.com/ExcaliburVT/TypeScriptBasic

The project has libman references for angularjs, angular material, bootstrap etc along with their appropriate TypeScript "typings" (at least I think they are correct). Here: https://github.com/ExcaliburVT/TypeScriptBasic/blob/master/libman.json

Our tsconfig.json is exactly like this: https://github.com/ExcaliburVT/TypeScriptBasic/blob/master/tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "moduleResolution": "Node",


    "baseUrl": "wwwroot",
    "typeRoots": ["./lib/types"]
  },
  "include": [
    "wwwroot/Scripts/**/*"
  ],
  "exclude": [ "node_modules", "**/*.spec.ts" ],
  "compileOnSave": true
}

Finally I have created two example ts files with different ways of trying to reference angular.

https://github.com/ExcaliburVT/TypeScriptBasic/blob/master/wwwroot/Scripts/exampleOne.ts //TS2304(TS) Cannot find name 'angular' //TS2503(TS) Cannot find namespace 'ng'

https://github.com/ExcaliburVT/TypeScriptBasic/blob/master/wwwroot/Scripts/exampleTwo.ts //TS2688(TS) Cannot find type definition file for 'angular'

Going to the extreme if we ADD the path to the types folders in the "include" of tsconfig.json the libraries appear to be found, but then we get compiler errors for the types themselves.

I'm certain its something quite simple that we have setup wrong but i'm out of ideas.

Thanks in advance!

Additional Testing. Note that setting the paths directly doesn't appear to work either.

"baseUrl": "wwwroot",
    "paths": {
      "angular": [ "lib/types/angular" ],
      "angular-material": [ "lib/types/angular-material" ],
      "bootstrap": [ "lib/types/bootstrap" ],
      "jquery": [ "lib/types/jquery" ]
    }

Answer 1

Well it appears the root problem is that I was trying to use libman when typescript expects everything to work through node. I started a brand new project using the .net core angular template and lo and behold it doesn't use libman, it simply uses node with a package json that works JUST fine.

I took this same pattern and applied it to my test project and amazingly everything works just fine now.... Shocking.

Bottom line it looks like the documentation suggesting to use libman for javascript package management https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-3.1 is really misleading, especially for those that are not familiar with the whole ecosystem.

I guess it is a viable alternative if you want to do basic development without node as a dependency.

Note: I'm updating the git repo with the "working" version in case anyone wants to see the difference.