Smarter way to organize “import” statements using “index.ts” file(s) in Angular

UPDATE: I have published a Visual Studio Code Extension to automate this process. Check it out.

Organize imports using Smart Import Visual Studio Code Extension — TypeScript — Angular, Reactjs…

“Module” is a tricky term. For Angular, Module is a container/package to hold various components, reference other Modules, provide Dependency Injection etc. Whereas for Typescript, “Component” and “Module” are essentially same thing to transpile — JavaScript Module.

Angular components and modules are written in Typescript files as a module using export keyword. As we build our Angular application to the greater extend, we end up creating many feature modules and components. We can refer a component or a module in other using “import” statement. Without “import” Typescript compiler shall throw exception for unknown type.

Consider a simple application with Login, SignUp, Dashboard, Product, Cart and Account feature. This application is routed using simple Angular routing strategy. Here is the route configuration and route graph:

Since we are using many components in app.routing.module.ts file, we must import their reference for .component.ts and .module.ts files. A general import statements would looks like this:

Problem:

Even though VS Code and other smart editors resolve path for component and module still these import statements looks lengthy and cumbersome isn’t it?

Another pain point is, if we change folder structure then we must change all import…