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.
“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:
