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…
In any TypeScript based application like Angular, managing imports is one of the tedious jobs. As the application…
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
.module.ts files. A general import statements would looks like this:
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…