Exploring Angular 2 with Visual Studio 2015 Update 1 in the context of Type Script Configuration

After spending the last week attempting to set up and launch a simple project, I am using the following configuration:

Angular 2, Visual Studio 2015 update 1, TypeScript Configuration

In the root of my project, I have a tsconfig.Json file with the following contents:

{
    "compilerOptions": {
        "rootDir": "src",
        "outDir": "web/js",
        "target": "es5",
        "module": "system",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "listFiles": true
    },
    "exclude": [
        "wwwroot",
        "node_modules"
    ],
    "filesGlob": [
        "app/**/*.ts"
    ]
}

I can see the virtual project in Solution Explorer, angular and all required packages are installed as mentioned in the angular.io 5 minute tutorial (https://angular.io/guide/quickstart).

This is what I have in my App.ts:

import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

The error message I'm encountering reads:

Symbol 'component cannot be properly resolved, probably it's located in an inaccessible module'

The same configuration works in VS Code without any issues.

I would greatly appreciate it if you could point out what I might be missing.

Thank you.

Answer №1

Discovered a temporary solution for now, but will reach out to resharper support and share their response here.

To quickly disable resharper, utilize the keyboard shortcut "ctrl + alt + shift + 8". Despite this action, intellisense was still not functioning properly. To resolve this, adjust the Typescript intellisense setting in resharper to Visual Studio instead.

Following these adjustments, no more false error messages are appearing.

Hoping this information can assist others encountering the same problem.

Answer №2

At the moment, I have turned off ReSharper's TypeScript inspection because it was causing problems with TypeScript 2.0.3 in my current version of 2016.2.2.

To disable this feature, go to Resharper > Options > Code Inspection > Settings

In the settings, locate 'File masks' at the bottom right and include *.ts to exclude TypeScript files from inspection.

Answer №3

If you are using Resharper, make sure to review your Resharper Typescript Language settings. Following Update 1, Typescript might be upgraded to version 1.7 in your project, however Resharper is currently only able to detect up to version 1.6. The default setting is set to Auto Detect which can result in errors.

Answer №4

An issue with Resharper was identified and successfully resolved in the 2016.1 version update.

To address this bug, consider updating to the most recent release. Additionally, ensure that Resharper is configured to automatically detect the Typescript version, especially if you previously selected version 1.6 manually.

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

Exploring Angular2's ability to interpret directive templates using the ng-container

Recently delving into angular2, I ventured into creating dynamic forms and generating fields by following the guide provided in this URL. The result was as expected. The dynamic form component renders each field one by one using ng-container, like shown b ...

Incorporating .npmrc configuration into an Angular application

It seems like I'm missing a crucial step in this process. I went ahead and added an .npmrc file to the root of my angular project, inserting the following line: @example/xxx:registry=ssh/url/of/my/private/repo/in/bitbucket Subsequently, I included @e ...

How to bypass validation for a hidden textbox in Angular 8

<form [formGroup]="userForm" > <div class="form-group" *ngIf="isHidden"> <label for="firstName">First Name</label> <input class="form-control" name="firstName" id="firstName" type="text" formControlName="firstName"> ...

Is it possible to create a data structure that enforces specific keys and values types during initialization?

When styling react components with MaterialUI's sx property, I've found that keeping the full style definition inline can lead to cluttered and overwhelming component bodies. To combat this, I've moved all the style definitions into a consta ...

What causes Angular to consistently redirect to the homepage?

Whenever I attempt to access the '/' route, it consistently displays the static-root-component (the main page component). However, if I try to access the '/welcome' route, it immediately redirects back to '/' and loads the sta ...

What is the best way to incorporate Typescript React Components across various projects?

I'm venturing into developing an npm package that involves several react components implemented with typescript. As a newcomer to react and npm, I apologize if my query seems basic. Despite researching online, there isn't much information on this ...

What is the best way to transfer an array to a different component?

I have an array called FidId that consists of strings, and I am looking to pass this array to another component for use. public AddSelection(layer: VectorLayer, map:Map){ this.vectorSource = layer; //start select var FidId:string[] = []; ...

Execute Angular's custom builders one after the other

I am currently working on an Angular 13 project that involves custom builders. One of these builders generates a file containing a $templateCache module, which can take some time to complete. The problem arises when the main Angular builder starts before ...

Angular `build` is encountering an error when dealing with externals that are declared using `webpack`

When working with Angular, I successfully load jquery from an external source. However, after the build process, I encounter a troubling error message: Uncaught ReferenceError: jQuery is not defined. It's worth noting that my build does download the j ...

Designing a versatile Angular component for inputting data (Mailing Address)

Currently, I am in the process of developing an Angular 11 application that requires input for three distinct mailing addresses. Initially, I thought I had a clear understanding of what needed to be done, only to encounter warnings about elements with non- ...

Utilizing TypeScript path aliases in a Create React App project with TypeScript and ESLint: A step-by-step guide

I utilized a template project found at https://github.com/kristijorgji/cra-ts-storybook-styled-components and made some enhancements. package.json has been updated as follows: { "name": "test", "version": "0.1.0" ...

Issue with Angular Material Auto Complete not selecting items when filtered

Encountered a problem with the mat-autocomplete control in Angular Material where it fails to include the CSS class "mdc-list-item--selected" on the mat-option and also does not add the mat-pseudo-checkbox to a selected option when the contents are display ...

The message "In Angular, there is no such property as 'data' in the type '{ user: User; session: Session; error: ApiError; }'."

Here is my complete supabase.service.ts code: import { Injectable } from "@angular/core"; import { createClient, SupabaseClient, User } from "@supabase/supabase-js"; import { BehaviorSubject } from "rxjs"; import { envi ...

The Angular application is receiving a 404 error when trying to access the .NET Core

Having trouble calling a method in the controller via URL, as I keep encountering a 404 error. What could be the issue? API Endpoint: http://localhost:5000/Home/HomeTest /*.net core web-api*/ namespace MyApp.Controllers { Route("api/[controller]") ...

"Facing an issue where ts-node is not recognizing d.ts files, despite tsc being able to compile them

I am currently using typescript along with express and attempting to enhance the request object in express. Below is my server.ts file: import express, { Request, Response } from "express"; const app = express(); app.use(function(req: Request, res: Respo ...

What is preventing React CLI from installing the template as TypeScript?

When I run npm init react-app new-app --template typescript, it only generates a Javascript template project instead of a Typescript one. How can I create a Typescript project using the CLI? Current Node JS version: 15.9.0 NPM version: 7.0.15 ...

Extracting the base href in Angular 6

Is there a way to dynamically retrieve /CTX-ROOT/assets/tiny-editor/langs/cs.js in Angular 6 component without using the PlatformLocation#getBaseHrefFromDOM method? constructor( private zone: NgZone, private platformLocation: PlatformLocation) ...

Steps to simulate an injected service within a function using Injector

There is an implementation in Angular 7.x where a global error handling injects its services using the Injector. Each function has a reference with the injector, as shown below: import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/co ...

Angular2 displays an error stating that the function start.endsWith is not recognized as a valid function

After switching my base URL from / to window.document.location, I encountered the following error message: TypeError: start.endsWith is not a function Has anyone else experienced this issue with [email protected]? ...

Utilizing vue-property-decorator: Customizing the attributes of @Emit

After seeing the @Emit feature, I checked out the example on GitHub. import { Vue, Component, Emit } from 'vue-property-decorator' @Component export default class YourComponent extends Vue { count = 0 @Emit() addToCount(n ...