Mike Mike - 4 months ago 14
AngularJS Question

Angular 2 Typescript Typings Path Issue

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

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.