What could be the reason for certain Angular modules importing successfully while others fail to do so?

I am encountering an issue with a module that I am struggling to import.

Using Typescript 2.7 and Node 10

The pxl-ng-security module is showing an error in both VSCode and VS2019. When hovering over it, error 2307 is displayed.

Below is the import section from the file.

myfile.ts

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { TokenService } from 'pxl-ng-security';

The gulp file is referencing tsconfig-library.json, indicating that it is using that file instead of the standard tsconfig.json.

tsconfig-library.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2015", "dom"],
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "stripInternal": true,
    "outDir": "./dist",
    "rootDir": "./src-embedded",
    "sourceMap": true,
    "inlineSources": true,
    "skipLibCheck": true
  },
  "files": [
    "./src-embedded/index.ts"
  ],
  "angularCompilerOptions": {
    "skipTemplateCodeGen": true
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

I have attempted using ../../node_modules/pxl-ng-security, but the issue persists. Intellisense recognizes it and fills it in. The folder's presence in that location has been confirmed. Even after deleting it from node_modules and performing a npm-install -project-local, the module reappears, suggesting that the module itself is fine.

Running tsc -p . results in the following error:

error TS2307: Cannot find module 'pxl-ng-security' or its corresponding type declarations.

Trying to run gulp produces the error:

Error: Error encountered resolving symbol values statically. Could not resolve pxl-ng-security

New Developments: Upon checking on a CI/CD server, I noticed that the build process is successful, with the same code working without issues. To further investigate, I installed vscode on the server to see if the ts2307 error would appear there, but surprisingly, it did not. Both Node and Typescript versions match as well. The mystery deepens.

Answer №1

Don't forget to include the include: array by adding or updating the include array where it's installed.

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  // make sure includes array is added
  "include": [
     "src/**/*.ts", 
     "tests/**/*.ts",
     // ADD your module here below**** with correct path
     "node_modules/pxl-ng-security"
   ],
  //"exclude": ["node_modules", ".vscode"]
}

Solution for your updated question:

You need to configure how your compiler or development environment resolves those node modules. There are various ways to do this, such as using a specific module system or module loader in your tool. If you haven't set up the compiler option, consider trying these solutions.

To change settings in VS Code

  • Verify which module loader you're using, and if necessary switch to commonjs or systemjs with baseurl. Keep in mind that VSCode has its own custom module loader based on an older version of requirejs.

To adjust settings in Visual Studio

  • If you want to modify the module system in Visual Studio, go to project properties in VS2019, then under TypeScript Build tab, change the "Module System" from "ES2015" to CommonJS.

For further insights on how compiler module resolution works, refer to this explanation if you prefer not to use node

{
    "compilerOptions": {
        "moduleResolution": "node"
    }
}

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

The Nest.js Inject decorator is not compatible with property-based injection

I am facing an issue with injecting a dependency into an exception filter. Here is the dependency in question: @Injectable() export class CustomService { constructor() {} async performAction() { console.log('Custom service action executed ...

How to access parent slider variables in an Angular component

I've developed a slider as the parent component with multiple child components. See the demo here: https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src/app/slide2/slide2.component.html Slider in the parent component: <ng-container *ngFor=&quo ...

Error in Typescript TS2322: Observable Type 'boolean | {}' - Using Angular 5 and Typescript 2.4.2

After upgrading from version 4 to 5, I'm puzzled by the plethora of TypeScript TS2322 errors I'm encountering. The migration involved setting up a new Angular project with the Angular CLI. Angular CLI: 1.5.5 Node: 8.9.1 OS: darwin x64 Angular: 5 ...

Combining Firebase analytics with an Ionic 3 application using the Ionic Native plugin

I placed the GoogleService-Info.plist file at the root of the app folder, not in the platforms/ios/ directory. When I tried to build the app in Xcode, an error occurred in the following file: FirebaseAnalyticsPlugin.m: [FIROptions defaultOptions].deepLin ...

Listener of events calculates the outcome

In need of help with retrieving the current coordinates of a clicked point on Google Maps. Here is my code snippet: let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); getCoords() { google.maps.event.addListener ...

Retrieve information from a Firestore document using the document's unique identifier

Running into some issues with my Angular 6 and Ionic 4 app while trying to retrieve specific data from Google Cloud Firestore. I've set up "cards" to display various stats retrieved from the Firestore database. You can see an example of how my cards a ...

Is there a way to retrieve the id attribute of an option element from the source component?

When a user makes a selection, I am trying to access the id attribute of the HTMLOptionElement. However, it always returns 0 instead of the actual id I passed (such as 1 or 2) from the select tag: <div class="col-8"> <select (cha ...

Is there anyone who can assist in resolving this issue? I've already added the vendor.js file to Index.html

While starting up the application, I encountered this error. I attempted to resolve it by adding the vendor JavaScript in index.html view image description here ...

Ionic 2 hides the form input area within its input component

I set up a login page, but the input fields are not showing up on the form. Here is my current code: <ion-list> <ion-item> <ion-label fixed>Username</ion-label> <ion-i ...

Using the hook to implement the useContext function in React

I came across this definition export interface user{ email:string name:string last_name:string } export type UserType= { user: user; setUser:(user:user) => void; } const [user,setUser] = useState <user> ({ email ...

What is the best way to define a global variable in TypeScript and access it throughout a Vue application?

In my main.ts file, I am looking to define a variable that can be accessed in all Vue files. Within my sfc.d.ts file, the following content is included: declare module '*.vue' { import Vue from 'vue' export default Vue } declar ...

Tips for leveraging the functions service in Next.js for better code reusability

I am just starting to learn Next.js and I have a preference for organizing my API functions in a separate folder called services. I attempted to implement some code based on this topic but unfortunately, it did not work as expected. It seems like my api fu ...

Transforming a function into an array in TypeScript

I attempted to use the map() function on a dataURL array obtained from the usePersonList() hook, but I am struggling to convert my function to an array in order to avoid errors when clicking a button. import Axios from "axios"; import React, { us ...

Encountered an issue when attempting to create a new Angular project using the

Just starting out with Angular and encountered an issue while trying to execute this command ng new my-dream-app The error message I received was: npm ERR! cb() never called! npm ERR! This is an error with npm itself. Please report this error at: npm ER ...

Angular error: Unable to access the 'toLowerCase' property of an undefined value

I've been working on creating my own custom filter pipe by following the instructions in this video tutorial, but I encountered an error message stating, "Angular, TypeError: Cannot read property 'toLowerCase' of undefined". I have already i ...

Unable to retrieve values from nested objects in component.html

Hey fellow tech enthusiasts, I'm currently dealing with a complex nested JSON object retrieved from an API. Here's a snippet of the object: profile : { title:"Mr", personalInfo:{ fullNames: "John Doe", id ...

Error when compiling with Component Lab's Autocomplete function for SVG Icons in Material UI

Upon running my project on the browser, I encountered the following error: Error message: ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils ...

When using RXJS, the method BehaviorSubject.next() does not automatically notify subscribers

In my project, I have a service set up like this: @Injectable({ providedIn: 'root' }) export class MyService { private mySubject = new BehaviorSubject({}); public currentData = this.mySubject.asObservable(); updateData(data: any) { ...

Karma and Jasmine are not recognizing the 'md-icon' element in Angular2 material

I am currently developing an Angular2 application using the following versions: @angular/material 2.0.0-alpha.11-3 angular-cli 1.0.0-beta.19-3 karma 1.2.0 karma-jasmine 1.0.2 While running the application, everything works fine except for some specific te ...

What is the reason behind the possibility of assigning the exported class to a variable within Ionic 2?

The code snippet below can be found in settings.ts: @Component({ selector: 'page-settings', templateUrl: 'settings.html' }) export class SettingsPage { } } Similarly, in the app.component.ts file, we are able to assign the Clas ...