Struggling with getting autocomplete and auto import to work properly while working on an Angular project

After installing the latest version of VSCode on my Windows system, I proceeded to add language support for TypeScript and configure my editor settings by adjusting the font size, disabling the minimap, enabling autosave on focus change, and more. Additionally, I installed some useful extensions.

Here is a snippet of my current editor configuration:

{
    "editor.fontSize": 12,
    "editor.minimap.enabled": false,
    "files.autoSave": "onFocusChange",
    "editor.find.autoFindInSelection": true,
    "editor.quickSuggestions": {
        "other": false,
        "comments": false,
        "strings": false
    },
    "editor.autoClosingBrackets": false,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "html.format.indentInnerHtml": true,
    "workbench.iconTheme": "material-icon-theme",
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "workbench.colorTheme": "One Dark Pro"
}

These are the extensions I have installed: Angular Language Service 0.1.7, Angular V5 Snippets 2.11.2, Auto Import 1.5.3, Debugger for Chrome 4.0.0, TSLint 1.0.24, and a few icon/theme related extensions.

However, I am facing an issue where I am unable to see the list of modules when trying to import them in the app.module.ts file. Can someone provide any suggestions on how to resolve this?

Thank you

https://i.sstatic.net/PZ9fJ.jpg

https://i.sstatic.net/nAZXN.jpg

angulartypescriptvisual-studio-code

Answer №1

Exciting news: VS code now includes built-in auto import functionality!

If you're experiencing issues, disable Auto Import 1.5.3 in your extension and restart VS Code for a smooth experience.

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

Navigating the pathway to retrieving variables within an Angular Component function

export class MapsComponent implements OnInit { @ViewChild('googleMap') gmapElement: any; map: google.maps.Map; data = "initialised"; ngOnInit() { var directionsService = new google.maps.DirectionsService; ...

angulartypescriptgoogle-maps

Deploying an Angular-cli project to Digital Ocean

I am encountering an issue while trying to run my Angular 2 app on Digital Ocean. Despite successfully deploying my app on a cloud server, I am unable to connect to it on the specified port as the server does not respond. This is puzzling me as I have be ...

node.jsexpressangulardeploymentdigital-ocean

Having trouble locating the TypeScript module error message?

After creating a TypeScript class and publishing it on npm at https://www.npmjs.com/package/mds.persian.calendar, I proceeded to install it in an Angular project using the command: npm install mds.persian.calendar --save The installation was successful, ...

node.jstypescriptimportnpm

Availability of variables and declaration of functions

I'm having trouble accessing a variable in my Angular project. I am new to this, so please bear with me. Here's an overview of my project: app.component.html: <div> <ul> <li *ngFor='let var1 of Fcomponent' >{{var1}} ...

angularionic-framework

What is the best way to effectively nest components with the Nebular UI Kit?

I'm currently facing an issue with nesting Nebular UI Kit components within my Angular app. Specifically, I am trying to nest a header component inside the home page component. The problem arises when the attributes take up the entire page by default, ...

angulartypescriptnebular

RxJS: Ensure Observables emit values sequentially, waiting for the completion of the previous Observable

In my current project, I have been working on implementing a unique Angular structural directive. This directive is designed to read and store the text content of an HTML element along with all its children, remove the contents upon AfterViewInit, and then ...

angularrxjsreactive-programmingangular-directive

Course completed following the module

As a newcomer to Angular, I am facing an issue with saving data in a class and reading it into a component. It seems that the component is rushing to display results before the class has finished processing them, resulting in an error message being printed ...

angulartypescriptangular8

Exploring ways to pass props in functional components in React Native

I am currently exploring how to create an API in React Native with TypeScript without using the class extends component. However, I am struggling to figure out how to access and send props from one const view to another function: App.tsx import React, {us ...

javascripttypescriptreact-nativereact-redux

I encountered TS2300 error stating a duplicate identifier appeared once I transferred my code to Angular CLI

Currently undergoing the process of transitioning our code to Angular CLI for our hybrid app. The plan is to migrate the Angular part to CLI while the AngularJS portion continues to be handled by custom Webpack. It's worth noting that both parts (Angu ...

angulartypescriptangular-cli-v6type-definition

Troubleshooting problem with fullscreen mode in videojs on Ionic 2 due to StatusBar issue

Utilizing a Component to run video js in an ionic application I am seeking for the application to cover the status bar when clicking fullscreen on the video The code functions only when placed in the 'constructor' section, but fails to work w ...

angularionic2ionic3video.js

Encountering 'Source map not readable' issues while trying to link up with Node debugger in Next.js

I'm currently in the process of setting up my local debugging environment by following the Next.js debugging documentation. The first step, "Starting Next.js in debug mode," seems to be working smoothly: > cross-env NODE_OPTIONS='--inspect&ap ...

node.jsdebuggingvisual-studio-codenext.js

Angular's let- directive does not assign a local variable

Having trouble setting a local variable within an <ng-template>, as it seems that let- is not functioning properly. Check out the demo here <ng-container *ngIf="data as d"> <ng-container *ngIf="false; else testBlock"></ng-containe ...

angularangular-directiveangular-ng-ifangular-template

Attempting to utilize the setInterval function in Ionic 4 to invoke a specific function every second, unfortunately, the function fails to execute

Working with Ionic 4 has been a breeze for me. Recently, I encountered a situation where I needed to update the value of an ion-range every second by invoking a function. However, despite successfully compiling the code, the changeMark function never seeme ...

angulartypescriptionic4

Angular and Visual Studio require the use of "ng" and "npm" commands

Currently using: Windows 10, Visual Studio 2022 17.1.0 (scheduled for an update). In the past, I would simply copy JavaScript library files into a subfolder of my website or application, add some <script...> tags to the appropriate pages, and consid ...

node.jsangularnpmwindows-10

When using `onClick` in React, the old state value is not captured even though it may appear to be

In order to enhance the modularity and generality of my tabs and tab slots, I have developed a somewhat intricate setup. To achieve this, I opted to create a context and provider that expose methods for manipulating tabs and slots (where slots represent wh ...

reactjstypescriptreact-hooks

A JavaScript function written without the use of curly braces

What makes a function good is how it is declared: export declare class SOMETHING implements OnDestroy { sayHello() { // some code to say hello } } However, while exploring the node_modules (specifically in angular material), I stumbled up ...

javascripttypescriptfunctionangular-materialnode-modules

Utilizing Angular with Phaser CE: Incorporating Angular functions into Phaser CE's update function

I am trying to call a function that triggers a modal created with NgbModal. However, in the update() function managed by Phaser CE, when the condition is met, the application crashes and throws this error: ERROR TypeError: this.gameOver is not a function. ...

angularfunctionphaser-framework

Utilizing React and Typescript to create custom attributes

With React Typescript, it is possible to include custom data-* attributes. But the question arises, can we also add other custom attributes such as 'name' or 'test'? <span name="I'm causing a type error" data-test="I'm Wor ...

reactjstypescriptcustom-attributes

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Utilizing CSS variables, I have implemented a feature that allows users to adjust the font size to small, medium, or large. While this functionality works correctly for most fields, there are certain instances where the value is applied but not displayed. ...

htmlcssangulartypescriptcss-variables

The import path for Angular 2 typescript in vscode mysteriously vanished

After upgrading VSCode, I noticed a change in the way namespaces are imported when I press Ctrl + dot. Now, the paths look like: import { Store } from '../../../../node_modules/@ngrx/store'; instead of import { Store } from '@ngrx/store&a ...

angulartypescriptvisual-studio-code