It appears that the functions in linqts are not clearly defined

Currently, I am in the process of learning Angular4 and facing challenges with getting linqts to function properly. Within my room-list.component.ts file, I include it in this manner:

import { List } from 'linqts';

A few lines below, I have my component class structured like this:

export class RoomListComponent
{
    public Rooms: List<Room>;

Although this setup is working fine. The value of Rooms is assigned through other code returned from a signalR request like so:

this._roomService.GetListResult.subscribe((rooms: List<Room>) =>
{
    this.Rooms = rooms;
});

So, I presume that List is functioning correctly (as I swapped out all instances of Rooms: Room[] with Rooms: List<Room>). However, when attempting any operations like this (Whether it's Select, Where, etc.), nothing seems to work:

Rooms.Add(...

An error message appears stating something along the lines of 

errors.ts:42 ERROR TypeError: _this.Rooms.Add is not a function
. In fact, things get chaos if I try something as simple as this (taken directly from the primary examples of linqts):

let arr = new List<number>([1, 2, 3, 4, 5]);

All of a sudden, two errors are thrown:

zone.js:1057 GET http://localhost:56040/Angular/linqts 404 (Not Found)
and

Unhandled Promise rejection: Fetch error: 404 Not Found Instantiating http://localhost:56040/Angular/linqts Loading http://localhost:56040/Angular/Appjs/components/room/room-list.component.js Loading app ; Zone: <root> ; Task: Promise.then ; Value: Error: Fetch error: 404 Not Found Instantiating http://localhost:56040/Angular/linqts Loading http://localhost:56040/Angular/Appjs/components/room/room-list.component.js Loading app at fetch.js:37 at ZoneDelegate.invoke (zone.js:392) at Zone.run (zone.js:142) at zone.js:873 at ZoneDelegate.invokeTask (zone.js:425) at Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602) at <anonymous> Error: Fetch error: 404 Not Found at http://localhost:56040/Angular/node_modules/systemjs/dist/system.src.js:1475:13 at ZoneDelegate.invoke (http://localhost:56040/Angular/node_modules/zone.js/dist/zone.js:392:26) at Zone.run (http://localhost:56040/Angular/node_modules/zone.js/dist/zone.js:142:43) at http://localhost:56040/Angular/node_modules/zone.js/dist/zone.js:873:57 at ZoneDelegate.invokeTask (http://localhost:56040/Angular/node_modules/zone.js/dist/zone.js:425:31) at Zone.runTask (http://localhost:56040/Angular/node_modules/zone.js/dist/zone.js:192:47) at drainMicroTaskQueue (http://localhost:56040/Angular/node_modules/zone.js/dist/zone.js:602:35) at <anonymous>

What could be causing these issues?

I also attempted to search for any problems related to linqts online, but it seems unlikely that it is the source of the issue. It appears more likely that the functions cannot be found for some reason (despite successfully navigating with F12 in VS2017). My guess would then be that it was imported incorrectly, but how can I confirm? Another assumption was that it wasn't imported at all, but the code wouldn't compile without the import statement, so this assumption may also be incorrect.

angularlinqtypescript

Answer №1

It seems that specifying the full path for certain libraries is necessary when declaring their placement. In the systemjs.config.js file, the mapping was initially defined like this (INCORRECT!):

var map = {
    'lodash': '/Angular/node_modules/lodash',

instead of:

var map = {
    'lodash': '/Angular/node_modules/lodash/dist/lodash.min.js',

I encountered a similar issue and discovered the solution discussed here

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

Encountering issues with utilizing global variables in Ionic 3

Using Ionic 3, I created a class for global variables but encountered an error Uncaught (in promise): Error: No provider for Globals! Error: No provider for Globals! at injectionError (http://localhost:8100/build/vendor.js:1590:86) at noProviderError Th ...

angulartypescriptionic-frameworkionic3

Route Not Found: URL Segment 'homePage' does not match any existing routes

Every time I click the login button, I want to be redirected to the home page. However, I keep encountering this error message : Error: Cannot match any routes. URL Segment: 'homePage' This is my route configuration: { path: 'homePage&a ...

angularangular-router

Arranging containers by invoking a function with material UI

I am completely new to material UI, typescript, and react, so if I make any mistakes or use the wrong terms please feel free to correct me. My goal is to place 4 boxes on a page, with three of them in a row and the fourth stacked below the first box. Curr ...

reactjstypescriptmaterial-ui

How can we pass an optional boolean prop in Vue 3?

Currently, I am in the process of developing an application using Vue 3 and TypeScript 4.4, bundled with Vite 2. Within my project, there exists a file named LoginPage.vue containing the following code: <script lang="ts" setup> const props ...

typescriptvue.jsvuejs3vite

Creating a Worldwide Authorization Header with HttpClient Interceptors

I have implemented a global authorization header in my app using an interceptor to avoid declaring the authorization header in each get() function. However, I am facing an issue where the token is still being requested when I call the get() functions. Th ...

angularangular-http-interceptorsangular-httpclientangular-http-auth

Identifying Typescript argument types

The given code is functional, but I am looking to refactor it for better clarity using Typescript syntax if possible. class Actions { actions: string[] } type Argument = object | Actions; export class GetFilesContext implements IExecutable { execute( ...

typescriptvariable-types

``What is the process for retrieving an object array that has been stored in a session using

I have a new class definition: class ProductDetails { name!: string; price!: number; } I keep an array of these objects in the local storage like this: productList: Array<ProductDetails> = []; ... ... localStorage.setItem("CurrentProducts ...

jsonangularsession-storage

Express: Every declaration of 'user' must have the same modifiers

In my application, I am utilizing both express and passport. Within these packages, there is a user attribute within the Request interface. Currently, the express package has a user attribute in the request object, such as req.user, but no additional prope ...

javascriptnode.jstypescriptexpress

Breaking down code with Webpack for future extensibility

We are in the process of developing a game and have successfully implemented code-splitting to separate vendor libraries and the core engine into individual bundles, as well as splitting levels into separate bundles. As we plan for future releases where t ...

typescriptwebpack

Angular WebSocket refusing connection attempts

After successfully setting up a WebSocket server in go, I encountered an issue when trying to connect to the server in Angular. The connection works flawlessly when tested using Postman with the URL ws://localhost:3000/ws. However, replicating the same pro ...

angularwebsocketrxjs

Stop the observable based on the data rather than the cause

In my service, I am making http requests to a backend that is beyond my control in order to retrieve marketing page content. There are instances when I need to load multiple pieces of marketing content simultaneously. I have implemented an effect that call ...

angulartypescriptrxjsobservablengrx

Issue with Navigation menu dropdown not functioning properly on Angular version 12 with Bootstrap 5

I am attempting to integrate bootstrap with Angular through a CDN. Below is the content of my index.html file: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Laboratorio Sigma< ...

htmlcssangularnavbarbootstrap-5

Error: The activation of the extension in vscode failed because the module cannot be found using non-relative import

Currently, I am in the process of developing a Visual Studio Code extension. In this project, I have opted to utilize non-relative imports in TypeScript. For instance: import ModuleA from 'modules/ModuleA'; The actual location of the folder for ...

typescriptvisual-studio-codevscode-extensions

Try out a form with a FormControl for input field

I have a custom component structured as follows: @Component({ selector: 'bg-formfield-markdown', host: { class: 'forminput', '[class.forminput-is-error]': 'isErrorState', '[class. ...

angularkarma-jasmineangular-componentsangular-forms

The Angular error message InvalidValueError is thrown when the Map function expects a mapDiv of type HTMLElement, but instead receives a

When attempting to initialize Google Maps, I encountered a particular problem. In this div, I am trying to load the map but consistently receiving the same error message. I attempted to use ngAfterViewInit() in case the view wasn't fully loaded befo ...

angulartypescriptgoogle-maps

The IDBCursor type does not have a property named 'value'

It appears that the typescript typings are not aware of the value property on the IDBCursor interface. let cursor: IDBCursor; cursor.value ...

typescriptindexeddbtypescript-typings

Creating TypeScript declaration file for exporting JavaScript function

I'm a beginner with TypeScript and I want to learn how to create a declaration file for a custom JavaScript function. I attempted to do this, however, I encountered an error stating "Could not find a declaration file for module './main'." Ad ...

javascripttypescript

Utilizing a custom function declared within the component to handle changes in Angular's ngOnChanges

Although it may seem like a simple question, I'm struggling to find a solution. Here's the issue at hand: In my Angular Component, there's a function that I need help with. export class RolesListComponent implements OnInit, OnChanges { ...

javascriptangulartypescript

Guide on triggering a function with the Enter key in Angular 9

A button on my Angular component currently triggers a method with a (click) event, but I also want the same method to be triggered if the user presses the enter key in the input box. This gives the user flexibility. Below is the HTML code for the input an ...

htmlangular

How to only disable checkboxes that are currently checked in Angular 8

click here to view an image**I would like to know how I can disable only the selected/checked items on a p-listbox in Angular 8. Is it possible to achieve this by adding a specific property or using CSS? Currently, when I try to add the [disabled] proper ...

angulartypescriptangular8