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

The 'xxx' type does not have an index signature, so the element is implicitly assigned an 'any' type

I'm currently facing an issue with TypeScript. The error message I'm encountering is related to the following section of code: The Interface: export default interface IUser { username: string; email?: string; isActive: boolean; group: s ...

Using Angular2: Implementing a single module across multiple modules

Let's delve into an example using the ng2-translate plugin. I have a main module called AppModule, along with child modules named TopPanelModule and PagesModule. The ng2-translate is configured for the AppModule. @NgModule({ imports: [TranslateMo ...

In tsconfig.json, the compiler is not utilizing other tsconfig.json files when using the "extends"

I'm attempting to streamline my project by breaking up my tsconfig.json into separate files. I have one for the source files and another for the tests. However, when I utilize the extends field, it seems that only the base tsconfig.json is being utili ...

Invoke numerous HTTP requests and receive multiple observables in response

When attempting to call multiple HTTP requests and combine several observables into one, I am facing an issue where only the last one is being emitted. I have an input field with a form control called "ctl" where users can input a keyword to search for cus ...

Strategies for effectively choosing this specific entity from the repository

Is it possible to choose the right entity when crafting a repository method using typeorm? I'm facing an issue where I need to select the password property specifically from the Admin entity, however, the "this" keyword selects the Repository instead ...

Adapting Angular routes in real-time using observable state modifications

I am currently working on an Angular project that involves Angular routing. The code snippet below is extracted from my app-routing.module.ts file: // app-routing.module.ts: import { NgModule } from '@angular/core'; import { ActivatedRout ...

The routes designed for children in the feature module are malfunctioning

Looking for help with organizing modules in a large app without cluttering the app-routing.module and app.module.ts files. Specifically focusing on managing route paths through featured modules (not using lazy loading at the moment). Encountering issues w ...

Utilizing Angular 11's HostListener to capture click events and retrieve the value of an object

Using the HostListener directive, I am listening for the click event on elements of the DOM. @HostListener('click', ['$event.target']) onClick(e) { console.log("event", e) } Upon clicking a button tag, the "e" object contains the fol ...

Leveraging the angular-in-memory-web-api in conjunction with Angular CLI

Encountering some frustrating issues while trying to integrate angular-in-memory-web-api into my Angular 2 project that was built using Angular CLI. Here's the current structure of dependencies inside my package.json: "dependencies": { "@angular/co ...

What are the different types of class properties in TypeScript?

Currently, I am incorporating ES6 classes in typescript using the following code snippet: class Camera { constructor(ip) { this.ip = ip; } } Despite encountering an error message, it appears that the code still compiles successfully. The ...

Post-Angular migration (going from version 12 to 14), there are still lingering security risks associated with the "d3-color vulnerable to ReDoS" issue

Following the migration to Angular 14, I made sure to update my "@swimlane/ngx-charts" version to "20.1.2" and the "d3" version to "7.8.4". However, even after running the npm install command, I am still encountering 5 high severity vulnerabilities in my p ...

Enhance the navigation scroll bar with a blur effect

I'm looking to create a navigation bar with a cool blur effect as you scroll. Everything seems to be working fine, except when I refresh the page the scrollbar position remains the same and window.pageYOffset doesn't give me the desired result. T ...

Ways to display "No records" message when the filter in the material table in Angular returns no results

How can I implement a "No Records Message" for when the current table is displaying empty data? Check out this link for examples of material tables in AngularJS: https://material.angular.io/components/table/examples ...

Preventing click propagation for custom react components nested within a MapContainer

I have developed a custom control React component for a map as shown below: export const MapZoom = () => { const map = useMap() const handleButtonClick = () => { map.zoomIn() } return ( <IconButton aria ...

"Encountering an unmet peer dependency error while trying to set up Angular2 through the package.json

Suppose I have a fresh project with the following package.json setup: { "name": "EmptyNG2", "version": "1.0.0", "description": "Empty Description", "repository": {}, "dependencies": { "angular2": "^2.0.0-beta.17" }, "author": "me", "li ...

Utilizing Angular 4 alongside ng-sidebar to incorporate the class "right"

Just started using ng-sidebar in my Angular 4 project, but I'm a bit lost on where to place the "ng-sidebar--right" class. Could someone please guide me through this small issue (I'm new to this, so apologies in advance). Here's a snippet of ...

Crafting redirect rules in React that avoid redirecting to the same route

In my project, there is a file named AuthenticatedRoute.tsx, which serves as a template for all the protected/authenticated routes in my Router.tsx file. export default ({ component: C, authUser: A, path: P, exact: E }: { component, authUser, path, ex ...

Error during Webpack Compilation: Module 'jQuery' not found in Travis CI with Mocha Test

I've been struggling to automate tests for my repository using mocha-webpack and Travis CI. The local machine runs the tests smoothly, but Travis CI hasn't been able to complete them yet due to an unresolved error: WEBPACK Failed to compile wit ...

Encountering problems during installation of packages in Angular

Running into issues with commands like "ng add @angular/localize" or "ng add @ng-bootstrap/ng-bootstrap". As a newcomer, I'm struggling to interpret the error messages. I have included screenshots for reference. View angular version screenshot View e ...

How to Implement Route Resolution for Nested Components in Angular 4?

In my current setup, I have the following hierarchy: Parent Component |__Nested Component 1 |__Nested Component 2 |__Nested Component 3 The challenge I am facing is resolving data into Nested Component 3 since only the Parent Component has a rout ...