How can Visual studio compile angular2 and typescript with @angular paths

Question

Using Visual Studio 2015 and a asp.net core project and angular2 (rc1) with typescript.

I am having a major issue with Angular2 and the new paths @angular/core for instance.

the problem is that the typescript compiler cant find @angular directive. and i cant find any way to fix this. so question is how do i make the visual studio compiler understand where to look for the angular files. or is it not even possible to do so?

import {ROUTER_PROVIDERS} from '@angular/router'; // this gives error
import {HTTP_PROVIDERS} from '@angular/http';

import { AppComponent } from './app.component';  // this works


bootstrap(AppComponent, [ROUTER_PROVIDERS,  HTTP_PROVIDERS]);

error message is: Error TS2307 Build: Cannot find module '@angular/router'.

The application is working even with these compile errors. since the script files are included from the npmcdn.com repository.

Mark Pieszak - Trilon.io Mark Pieszak - Trilon.io · Accepted Answer · 2016-06-14T13:08:05

By not having a file directory ./ etc, it is by default looking at the node_modules folder.

If you have these located elsewhere you need to point to that location.

import {ROUTER_PROVIDERS} from '../somewhere-else/@angular/router';

If you're trying to use a CDN (which I would highly advise against doing), you will still need to let SystemJS or Webpack know about your angular packages that are globally placed on the window.

A webpack example:

// webpack.config.js
module.exports = {
  externals: {
    '@angular/router': 'angular.router' // This right side might be different
  }
};

I would suggest using npm and containing your neccessary files within node_modules. This way, when you are doing things like importing specific parts of libraries, it will only grab those specific portions. A CDN will include the entire library, and pollute your global window namespace (which is just bad joo-joo)

How can Visual studio compile angular2 and typescript with @angular paths

1 Answers