Angular 2 Typescript Typings Path Issue

Question

I'm trying to learn and create a Gulp build process using Angular 2 and Typescript. I've followed along the Quick Start and had everything working just fine. Now I'm trying to branch off and try a do things a little differently. What I'm trying to do is use a different folder structure and I'm having issues with my app.component.ts file finding import { Component } from 'node_modules/@angular/core'; . I have changed the file to import { Component } from '../../../manager/node_modules/@angular/core'; and it works, but I've seen others have different folder structures and they don't use the long directory paths.

Currently my folder structure is as follows:

build
  - css
  - js
  // all compiled files end up here
manager
  - node_modules
  - typings
  gulpfile.ts
  typings.json
  package.json
  tsconfig.json
source
  app.component.ts
  main.ts

app.component.ts

/// <reference path="../manager/typings/index.d.ts" />

import { Component } from '../manager/node_modules/@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

My questions are:

• can I reference @angular/core without having to write out the entire path?

• Is there are way I can omit the <reference path=""> ?

The angular2-seed project can do it, but I cannot figure out how they did it. I'm sure they have a file that does the file reference for them.

Answer 1

Try to use the following folder structure:

build/
  css/
  js/
source/
  app.component.ts
  main.ts
node_modules/
typings/
gulpfile.ts
typings.json
package.json
tsconfig.json

Explanation: your tsconfig.json must be in the root, so the TypeScript compiler will correctly resolve the @angular/core module. Also is a good idea to keep the node_modules folder and typings.json file in the root as well.

To understand how TypeScript resolves a module, please, read the Module Resolution documentation.