CODEWITHSUNDEEP
typescriptangular
Yuri Molchanov
Yuri Molchanov

Reputation: 131

Angular 2 typescript import to deep directory

If i have file structure like this:

tsconfig.json:

"compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "/",
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../dist/",
    "rootDir": ".",
    "sourceMap": true,
    "target": "es5",
    "inlineSources": true
}

How to make all model public and import them like this: serviceGroup1Service1.ts:

import * as models from 'models';

Updated file tree

Updated files

Added new barells to system.config.ts

'app',
'app/models',
'app/services'

Trying to use in serviceGroup1Service1.ts

import * from 'app/models'

Have an error "Cannot find module 'app/models'

But 

import { Component } from '@angular/core'

works well. How to do it for my components?

Upvotes: 1

Views: 570

Answers (2)

James Manning
James Manning

Reputation: 13579

Previous answer works, but I've noticed the angular2 pattern seems to be "barrels" where you would have an index.ts in the models dir that does the "export * from xxx" for each file, then you'd "import * from ./models/". Both approaches work, just the pattern I've noticed.

There might be some built-in support for generating them (maybe in angular-cli? It generated them when I used it for creating a component), I've only needed a couple and generated them by hand.

Upvotes: 1

Sasxa
Sasxa

Reputation: 41264

Add app/models.ts:

export * from './models/model1`
export * from './models/model2`
export * from './models/model3`

and now you can import them with:

import * as models from 'app/models';

If you want to use just models instead of app/models you should add SystemJS map configuration, something like:

System.config.map = { models: 'app/models' }

Upvotes: 1

Related Questions