Importing Angular 2 typescript into nested directories

Question

Importing Angular 2 typescript into nested directories

If my file structure looks like this:

app
- models
  - model1.ts
  - model2.ts
  - model3.ts
  - index.ts
- services
  - serviceGroup1
  - serviceGroup1Service1.ts
  - serviceGroup1Service2.ts
  - index.ts
  - serviceGroup2
  - serviceGroup3
  - index.ts

In the tsconfig.json file:

"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 can I make all models public and import them like this in serviceGroup1Service1.ts:

import * as models from 'models';

Updated file tree

Updated files

I added new barrels to system.config.ts

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

When trying to use it in serviceGroup1Service1.ts

import * from 'app/models'

I get an error saying "Cannot find module 'app/models'

However, importing components like this works fine:

import { Component } from '@angular/core'

How can I do it for my components?

typescript angular

Answer 1

Answer №1

Include app/models.ts in your project:

export * from './models/modelA'
export * from './models/modelB'
export * from './models/modelC'

You can now easily import them using:

import * as models from 'app/models';

To use just models instead of app/models, you'll need to add a SystemJS map configuration, like this:

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

Answer 2

Include app/models.ts in your project:

export * from './models/modelA'
export * from './models/modelB'
export * from './models/modelC'

You can now easily import them using:

import * as models from 'app/models';

To use just models instead of app/models, you'll need to add a SystemJS map configuration, like this:

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

Answer 3

Answer №2

While the previous answer is effective, I've observed a pattern in Angular2 known as "barrels," where an index.ts file in the models directory exports all files using "export * from xxx", followed by importing it using "import * from ./models/". Both methods are functional, but this particular pattern caught my attention.

There may be some native support for generating barrels, possibly in angular-cli. When I utilized it to create a component, the barrels were automatically generated. However, I have only needed a few and created them manually when required.

Answer 4

While the previous answer is effective, I've observed a pattern in Angular2 known as "barrels," where an index.ts file in the models directory exports all files using "export * from xxx", followed by importing it using "import * from ./models/". Both methods are functional, but this particular pattern caught my attention.

There may be some native support for generating barrels, possibly in angular-cli. When I utilized it to create a component, the barrels were automatically generated. However, I have only needed a few and created them manually when required.

Importing Angular 2 typescript into nested directories

Answer №1

Answer №2

Similar questions

What is the process for creating documentation for a TypeScript enum type with the format of { [key]: value }

utilizing regular expressions in TypeScript

Number as the Key in Typescript Record<number, string> is allowed

Utilizing event listeners with image elements in React for interactive typing experience

How do you implement an asynchronous validator for template-driven forms in Angular 2?

Angular 2 TypeScript: The concat() function operates as mutable within the framework

Angular 6 Progressive Web App Error: JSON Parsing Issue at Beginning of JSON Data

You appear to be missing a dependency on either "@angular/core" or "rxjs" when attempting to deploy your MEAN app on Heroku. This issue must be resolved

utilizing a decimal point that is not in accordance with my cultural norms

Using JavaScript or TypeScript to locate the key and add the value to an array

Learn how to restrict input to only specific characters in an input box using Angular2 and validations

Angular 5 Image Upload - Transfer your images with ease

Using the assert statement in asynchronous functions in TypeScript

The Discriminate Union is ineffective in handling function arguments

Development in Angular 2 with a team of developers utilizing TFVC for version control and managing node_modules

Navigating through Vue3 script Setup and encountering a TypeScript error stating `Type 'string' is not assignable to type 'Stuff | undefined'.` - here's a clever workaround

There is currently no loader set up for ".html" files within the Vitejs configuration, specifically for the index.html file

The attribute 'value' is not recognized on this type 'IntrinsicAttributes & ChildrenProps'

Getting the event of a directive in a dynamic component can be achieved by setting @HostDirective()

Is there a way to replace mat-button-toggle with a radio button?