Starting Out with Typescript Types - Unidentified term 'angular'

We are currently working on revitalizing an older AngularJS project by migrating it to .Net Core 3.1. As part of this process, we are looking to transition our scripts to TypeScript. While the project is functioning properly without TypeScript, we believe there may be some basic configuration errors causing issues.

To troubleshoot, I have created a demo project that can be accessed here: https://github.com/ExcaliburVT/TypeScriptBasic

The project includes libman references for AngularJS, Angular Material, Bootstrap, and more, along with their corresponding TypeScript "typings" (which we assume are correct). You can view the libman.json file here: https://github.com/ExcaliburVT/TypeScriptBasic/blob/master/libman.json

Our tsconfig.json file is set up as follows: 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
}

Furthermore, I have created two example TypeScript files that demonstrate different approaches to referencing 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'

When we attempted to include the paths to the types folders in the "include" section of tsconfig.json, the libraries seemed to be recognized, but we encountered compiler errors related to the types themselves.

We believe that the issue is a simple configuration error that we have overlooked. Any guidance on how to resolve this would be greatly appreciated.

Thank you in advance!

Additional testing revealed that directly setting the paths did not yield successful results either.

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

Answer №1

After encountering some issues, I discovered that the root problem was my attempt to use libman in a TypeScript project that actually requires everything to go through node. I decided to start fresh with a new project using the .NET Core Angular template and found that it doesn't use libman at all - just node with a package.json that works perfectly. I applied this same approach to my test project and, surprisingly, everything started working flawlessly. It's quite amazing.

It seems that the documentation recommending the use of libman for JavaScript package management https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-3.1 can be quite misleading, especially for those unfamiliar with the ecosystem.

I suppose libman could be considered a viable option if you prefer to develop without node as a dependency.

Just a heads up: I'll be updating the git repository with the "working" version for anyone interested in seeing the difference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ERROR: Attempting to reference an object that has not been initialized

I am facing an issue with inserting values from textboxes into an SQL table upon clicking the Submit button. The error message "Object reference not set to an instance of an object" is displayed. Below is the code I have written for this functionality. Any ...

Encountering issues with Typescript when providing parameters for res.status().json()

I've recently started using Typescript and I'm still in the learning process by converting some existing JS code to TS. In my code: res.status(200).json({ user: data.user }) I encountered a red squiggly underline under user:data.user ...

Angular : Is toFixed() functioning properly with one value but not with the other one?

My form has 2 inputs, each calling the calculeSalaire() function. calculeSalaire() { this.fraisGestion = this.getFraisGestion(); this.tauxFraisGestion = this.getTauxFraisGestion(); this.salaireBrut = this.getSalaireBrut(); this.salaireNet = this.g ...

Dealing with TypeScript issues while implementing Multer in an Express application

import multer, { FileFilterCallback } from "multer"; import sharp from "sharp"; import { NextFunction, Request, Response } from "express"; const multerStorage = multer.memoryStorage(); const multerFilter = ( req: Request, ...

What are the reasons behind the restriction on using non-public members in TypeScript classes?

Consider the following scenario: class Trait { publicMethod() { this.privateMethod(); // do something more } private privateMethod() { // perform a useful action } } When attempting to implement it like this: cla ...

Converting an array of date strings to a single string in JavaScript

Here is the JSON format I received with dynamic data: {"range":["2018-07-23T16:03:26.861Z","2018-07-23T16:03:26.861Z"]} Now, I need to convert this into the following format: range(20180723,20180723) Below is my code snippet : var data:Date[] = {"rang ...

AngularJS Validation does not verify the step limitation of an HTML number input field

Why isn't AngularJS validating the step="0.01" attribute in the second input? It seems to be working fine for the min and max attributes, but not for step. For instance: When entering 0.005, it still evaluates submitNewEntryForm.submitNewEntryAmount. ...

Having trouble with Ionic 4 navigation not triggering after a single click, requiring multiple clicks to navigate

I have a long list of items, around 40 in total, that load a page describing each item with photos, URLs, and other content. However, I find that I need to click two to three times before reaching this page. I suspect that the excessive use of HTML compone ...

Having trouble with dynamic CSS styles not functioning properly in Internet Explorer?

My issue involves dynamic CSS settings not functioning properly on Internet Explorer: Here is the code snippet causing the problem: <div class="i-storage-bar-chart-bar-container"> <div class="i-storage-bar-chart-bar" ...

A Step-by-Step Guide to Mocking a jQuery Function Using Jasmine in an Angular Directive Specification

When working with an angular directive, I am currently using $(element).fdatepicker(). How can I mock or stub this function in a jasmine test for the directive? If I don't stub it, I encounter the following error: TypeError: 'undefined' is ...

How can I utilize Angular services to transfer a count value to the Component?

I've been working on creating a coin counter for my application by developing a service specifically for counting coins. However, when I tried to use this service in one of my components where the count function is triggered, I encountered some diffic ...

What is the best way to move between components within the same parent class using UI router in Angular 6?

Explore the Angular UI-Router Visualizer design.component.ts import { Component, OnInit, ChangeDetectorRef, EventEmitter, Output, Input } from '@angular/core'; import { AppService } from '@app/shared/app.service'; import { Schema } fr ...

How to interact with md-sidenav using Selenium

I am facing a challenge with my web-page that contains an md-sidenav as I attempt to test it using selenium. Everything else on the page seems to be functioning correctly, except when I try to interact with elements inside the md-sidenav. Despite confirmin ...

Can anyone recommend the appropriate IF statement in ASP.net to conceal a div when the image it contains is the same as the current page URL?

I am completely new to ASP.NET and C#, and I am working within Sitefinity. I have a challenge where I need to create an image-based navigation element at the bottom of a page that links to different articles using the same template. There are 5 articles in ...

Error in the Angular-UI calendar

I'm encountering an issue while trying to set up the angular-ui calendar. When I run it, I get the following error: TypeError: undefined is not a function at Object.eventsWatcher.onChanged (http://localhost/fisioGest/js/calendar.js:262:41) Despite b ...

Incorporate a new method into a TypeScript class from a separate file

I'm curious about the feasibility of adding additional functions to a class prototype in Typescript. Here's my dilemma: I have a file containing a class, for example image.ts: export class Image { b64img: string; } Since this class is gene ...

Executing multiple instances of the cascading dropdown fill method in Angular 7

I am currently working on an Angular app that includes cascading comboboxes for country and state selection. However, I have noticed that the get states() method in my state.component.ts file is taking a long time to run. What could be causing this issue? ...

The input of type 'Observable<true | Promise<boolean>>' cannot be assigned to the output of type 'boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'

I'm currently using a Guard with a canActivate method: canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree { return this.fi ...

Utilizing AngularJS 1.X to implement filters on transformed information

When using the combination of ng-repeat and a filter, it creates a highly effective search function. However, once the data is converted, the use of a filter for searching becomes limited. For Instance JavaScript $scope.ints = [0,1,2,4,5,6,7,8,9, ..., 9 ...

Customize cell color in angularjs and ui-grid

In my ui-grid, I have two columns - firstName and lastName. The background color of the firstName column is set to blue. When I click on the header of the lastName column, I want to change the background color of the lastName column to blue and return the ...