Unable to exclude modules from ng-build in Angular CLI, the feature is not functioning as intended

I am managing an Angular CLI project that consists of two identical apps. However, one app requires the exclusion of a specific module in its build process.

Key Details:

  • Angular CLI Version: 1.7.4
  • Angular Version: 5.2.10

In the angular-cli.json file, I have configured two separate apps, each with its own ts-config file.

  "apps": [
    {
      "name": "app",   <---- first app
      ...
      "tsconfig": "tsconfig.app.json",       <----first TS config
      ...
    },
    {
      "name": "admin",   <---- second app
      ...
      "tsconfig": "tsconfig.admin.json", <----- second ts config
      ...
    }
  ],

The "admin" app builds all files, while the "app" excludes the admin module during its build process as specified in tsconfig.app.json.

During testing, after making changes to the admin module and running the build locally, it was observed that the "app" version did not exclude the admin module as intended.

To address this issue, I set up custom "ng-build" scripts in the package.json file for each app:

"scripts": {
    "build-app": "ng build -app app --prod",
    "build-admin": "ng build -app admin  --prod",
  },

If anyone has encountered similar challenges or has potential solutions to resolve this issue, kindly share your insights.

Although the corresponding GitHub issue on the angular-cli repository has been closed without a resolution provided, you can still view it here: See Issue Here

Answer №1

To those who come across this message seeking a solution:

TypeScript will compile any files with an 'import' statement, regardless of whether it is listed in the 'exclude' property in tsconfig.json.

I personally encountered this issue when there was an import statement in my app.modules.ts file. Removing it resulted in successfully excluding it from the builds.

Answer №2

When I encountered an error on my application, it was due to having two modules that included several modules and services. One of these modules was specifically for testing purposes (using HttpClientTestingModule instead of HttpClientModule). The issue arose because this testing module was located in a testing/index.ts file, causing it to be automatically loaded during the build process and resulting in failure across the board. Even though this module was meant to be used only by *.spec.ts files that required it, it still caused issues. I attempted to exclude it using src/tsconfig.app.json, which proved successful:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "app/indalo-api/testing/*",
    "**/*.spec.ts"
  ]
}

From this experience, I concluded that Angular 6 and above will automatically load all .ts files unless they are specified in the exclude section. However, if a file is needed by one that is not excluded, it will still be loaded.

This behavior aligns logically with the way Angular handles file loading.

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

There are currently no examples demonstrating how to populate row headers and dynamic columns in the Material table

Currently, I am facing a situation where I need to have rows as headers and dynamic values in columns for a material table. Below is an example: Department Deparment1 Name Jack Vimal Location Chenn ...

Why is it that I have intellisense enabled for .js files but not for .ts files?

Below is the content of my package.json: { "name": "edge-node-api", "version": "1.0.0", "description": "Web API for Edge Electrons customers", "main": "api.js", "scripts": { "test": "echo \"Error: no test specified\" &am ...

Displaying exclusively the country code in an Angular material-select component

This is the HTML code I am using: <mat-form-field style="width: 70px;margin-left: 50px;"> <mat-label>Select an option</mat-label> <mat-select (openedChange)="toogleCountry()" [(value)]="selected"> <mat-option value="+91" ...

TypeScript Redux Thunk: Simplifying State Management

Seeking a deeper understanding of the ThunkDispatch function in TypeScript while working with Redux and thunk. Here is some code I found: // Example of using redux-thunk import { Middleware, Action, AnyAction } from "redux"; export interface ThunkDispatc ...

What is the process for obtaining an app icon from the store using Angular?

Currently, I am working on an app using ionic, angular, and Cordova. Within this app, there are links to other apps available in the app store. My main query is: Is there a way to retrieve the icons of these apps from the store? I aim to display these ic ...

Adjusting the timing of a scheduled meeting

Is there a way for me to update the time of a Subject within my service? I'm considering abstracting this function into a service: date: Date; setTime(hours: number, mins: number, secs: number): void { this.date.setHours(hours); this.date.s ...

Refresh the webpage following removal of an item on IONIC4

Hey there, I need some help from the experts here. I'm currently working on developing an e-commerce mobile app using Ionic 4. I'm facing a challenge with updating the item-total summary when an item is removed from the cart page. Below is my ca ...

What is the method for removing an item from my TypeScript to-do list?

I am fairly new to TypeScript and I'm currently facing some challenges in deleting an item from my to-do list. I could use some guidance on how to go about implementing this feature. I have created a deleteHandler function that needs to be integrated ...

The header code in Angular 6 does not get triggered when working with the router

After successfully validating the username and password, I perform the following action: this.router.navigate(['./home']); Each page includes a header with the following content: <ng-container *ngIf='isAuthenticated'> <li c ...

Discover the use of dot notation for accessing nested properties

In the deps array below, I aim to enforce type safety. Only strings allowed should be in dot notation of ${moduleX}.${moduleX service} // Modules each have a factory function that can return a services object (async) createModules({ data: { factory: ...

Angular 4 - Seeking clarification on the usage of *ngComponentOutlet

When using *ngComponentOutlet, the following code snippets are employed to handle the displaying: Below is a snippet of functional code: this.displayComponent({ 'objects':[ {component: ToDisplayAComponent, expanded: fals ...

Using Angular 4 to pass a specific array element from the parent component to the child component and showcasing its value in the child's HTML

I am currently working on an Angular 4 application and in need of passing an array called NpvResults from the parent component to a child component. The goal is to access this array within the child component and display its value to the client of the chil ...

Angular's observable function is not providing a complete response

In my Angular component, I have a function that is called from a template. This function returns an Observable of type string, but unfortunately it only returns the `data` variable. How can I modify it to return `dateNew[0] + " de " + data + " de "+ dateNe ...

Guide to making a second request using an if statement inside an observable

The aim I have a requirement to make two HTTP requests. The first request should always be executed, and the second request should only be made if a certain condition is met. A signal needs to be emitted when: firstvar and secondvar are equal, and only ...

Prevent authenticated users in Angular2 from accessing certain routes

In the main.ts file, I have defined a set of routes: const routes: RouterConfig = [ { path: '', component: HomeComponent }, { path: '', redirectTo: 'home', terminal: true }, { path: 'dashboard', component: Das ...

Input a new function

Trying to properly type this incoming function prop in a React Hook Component. Currently, I have just used any which is not ideal as I am still learning TypeScript: const FeaturedCompanies = (findFeaturedCompanies: any) => { ... } This is the plain fun ...

Hold off on progressing until the http.get request in Angular 4 has completed

Currently, I am in the process of creating a new registration form for an app using Ionic and utilizing ASP.Net(C#) for my API. My objective is to validate if a user already exists when the input blur event is triggered. However, I'm encountering an ...

Can the WebSocket interface be substituted with WebSocket itself?

I'm currently in the process of setting up a WebSocket.Server using ws, Express 4, NodeJS, and TypeScript by following a guide. However, I've encountered an issue with the provided code not working as expected from the tutorial found at . In ord ...

Stop child elements from spilling out of the parent container without using fixed height measurements

I am in the process of creating an angular component with a header, buttons, a table, more buttons, and a footer. However, I am facing some challenges with the layout. <my-component> <div>Header Section</div> <some-stuff class=&quo ...

Looking to build a unique form validator for two inputs? Ensure that one input number is consistently larger than the other with this guide

Is it possible to create a custom form validator with 2 inputs? My goal is to ensure that one input number is always greater than the other. ValidateMaxMin(control: FormControl) { console.log(control.value.productMin); if (control.value.productM ...