What is the process for extracting the paths of component files from an Angular ngModule file?

I've been on the lookout for automation options to streamline the process of refactoring an Angular application, as doing it manually can be quite tedious.

We're working on reducing our app's shared module by extracting components/directives into their own modules through treeshaking. This requires going through each feature module in the app and verifying if a directive or component selector is present in the template. If found, the module containing the template must import the new module of the treeshaken directive/component from the shared module. Are there any tools available to assist with this refactoring task? It seems like a common requirement.


If there isn't a universal solution, I would still like to programmatically generate a list of absolute paths of components in the declarations array of any given .module.ts file.

The challenges I am currently encountering include:

  • File names of components may differ from their Class names
  • Some components are deeply nested within multiple barrel references
  • TsConfig paths are customizing imports in the project

Answer №1

This question is quite intriguing, however, there currently isn't a readily available tool that can address your specific issue.

Here are some suggestions I have:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Object.assign versus the assignment operator (i.e. =) when working with React components

Just a quick question: I've come across some answers like this one discussing the variances between Object.assign and the assignment operator (i.e. =) and grasp all the points made such as object copying versus address assignment. I'm trying to ...

ngIf not working properly with the updated value of [(ngModel)]

I am encountering an issue with a select element that has options. The select is using the [(ngModel)] directive to save selected values into "rightFieldTypeId." I have elements that should be displayed based on the value of "rightFieldTypeId." Even though ...

Guide on customizing webpack to incorporate SCSS in a React application

After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js: { test: cssRegex, exclude: cssMo ...

Original: Generic for type guard functionRewritten: Universal

I have successfully created a function that filters a list of two types into two separate lists of unique type using hardcoded types: interface TypeA { kind: 'typeA'; } interface TypeB { kind: 'typeB'; } filterMixedList(mixedList$: ...

Creating multiple dynamic dashboards using Angular 4 after user authentication

Is there a way to display a specific dashboard based on the user logged in, using Angular 4? For example: when USER1 logs in, I want dashboard 1 to be visible while hiding the others. Any help would be greatly appreciated... ...

Typescript Regular Expression Issue: filter function is not returning any matches

Currently, I am developing an Ecommerce API and working on a class specifically for search queries. My approach involves using regex and typescript with node.js. Although I have based my project on a JavaScript node project, I am encountering an issue wher ...

The control options on the AGM map are experiencing functionality issues

Upon setting the options for agm-maps, I noticed that my options briefly appear and then disappear. This behavior puzzled me, so I decided to create a simple project in Stackblitz to showcase the issue. Below, you'll find the code snippets: code samp ...

Failure in validating a form in Angular 2

This is a form I have created: import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ template: ` <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" novalidate> <textarea (keyup)="va ...

Issue with second button in Angular Onclick() not been resolved

I'm experiencing an issue with the onClick() methods in my code. There are two onClick() methods present on the UI, but when I click on the second one, it does not call the method while the first one does. I am struggling to figure out why this is hap ...

Webpack and incorporating bespoke scripts

Can someone please help me understand how webpack works? I'm currently working on an Angular 2 project with a webpack starter and I have some JavaScript scripts from AWS (my SDK for API Gateway). These are about 10 JS files that I currently have liste ...

Invoking a function from a collection of mixed data types

I have established a mapping for a discriminated union consisting of different types, each linked to a corresponding function that uses a member of the union as a parameter: export interface Truncate { type: 'truncate' maxLength: number } ex ...

What is the best way to add a custom typeguard to an object in TypeScript?

Looking to implement a type guard as an object method? I have an array of objects with similar data structures, but crucial differences that need to be checked and guarded using TypeScript. interface RangeElement extends Element { value: number; } inter ...

Extract objects from a nested array using a specific identifier

In order to obtain data from a nested array of objects using a specific ID, I am facing challenges. My goal is to retrieve this data so that I can utilize it in Angular Gridster 2. Although I have attempted using array.filter, I have struggled to achieve t ...

Tips for working with Typescript: utilizing the default value for a non-existent computed property

When utilizing Computed Property in javascript, I can structure my code as follows const default_values = {a:"debug",b:"info",c:"warning"}; function execute(y) { let x = default_values[y] || default_values.a /* if y is no ...

How to Showcase Images in an Ionic 2 App Using HTML Content

This amazing app was built with Ionic 2 technology. It leverages a REST API to retrieve data in JSON format. Interestingly, one of the fields sent from the server is HTML content. <div [innerHTML]="'<p>' + eventMoreDetails.DescriptionHt ...

What is the best way to use a generic callback function as a specific argument?

TS Playground of the problem function callStringFunction(callback: (s: string) => void) { callback("unknown string inputted by user"); } function callNumberFunction(callback: (n: number) => void) { callback(4); // unknown number inputt ...

Using TypeScript to Manipulate SVG Polyline Shapes

In my TypeScript 3.1.1 project in VS Code with an Aurelia setup, I am facing a challenge while trying to manipulate an SVG Polyline using TypeScript code. The issue arises when attempting to create a new SVGPoint object. The initial HTML structure is as fo ...

The object is given a value in the form of a string, even though it is a strongly-typed variable

I'm encountering something unusual in my code. In the following example, there is a (change) event that captures the current value selected by the user from a dropdown menu. <div style="padding-right: 0; width: 100%;"> <label st ...

Angular2 - the pipe was not located while organizing records

I've successfully fetched data from an API and displayed it in the view, but I'm struggling to organize the data by date. Whenever I attempt to do so, I encounter this error message: The pipe 'groupBy' could not be found pipe.ts impor ...

Angular version 6 and its routing functionality

Hey there, I need some help with setting up routers in my Angular app. Here is the code from my files: import {NgModule} from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const APP_ROUTES: Routes = [ {pa ...