Encountering issues with deploying an Angular 8 website using a specific configuration

My current project is built on Angular 8, and I am in the process of publishing it locally before deploying it. When running the build step, I specify an environment name called internalprod:

src
├───app
├───environments
│       environment.Debug.ts
│       environment.InternalProd.ts
│       environment.PreLive.ts
│       environment.prod.ts
│       environment.Test.ts
│       environment.ts
└───js

In the file environment.InternalProd.ts:

export const environment = {
...
  environmentName: "InternalProd"
};

When looking at angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
...
          "configurations": {
...
            "internalprod": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.InternalProd.ts"
                }
              ],
              "baseHref": "/",
              "deployUrl": "/",
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": true,
              "commonChunk": true,
              "buildOptimizer": true,
              "poll": 500
            },
...
}

To initiate the build process, I navigate to the src directory and execute the command

npm run ng build --configuration=internalprod

After building, I notice that the variables are not being replaced with the internalProd configuration in the generated dist/myproject/main-es5.js and dist/myproject/main-es2015.js files within the var environment = section:

    var environment = {
      ...
      environmentName: "Development"
      }
    };

It seems that the environment.Debug.ts file is being picked up instead, which sets the environmentName variable to Development. This behavior is puzzling to me.

Answer №1

If you refer to this thread, it suggests running your command with double dashes in the beginning like

npm run ng build -- --configuration=internalprod
, and most likely outside the src directory.

Here's to success!

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

Encountered an unhandled promise rejection: TypeError - The Form is undefined in Angular 6 error

Whenever I attempt to call one .ts file from another using .Form, I encounter the following error: Uncaught (in promise): TypeError: this.Form is undefined The file that contains the error has imported the .ts file which I intend to pass values to. ...

403 Error: Access Denied for Spring Cloud Gateway

Scenario In the development of my project, I have opted for a MicroServices architecture. Specifically, I am utilizing Angular 15 for the Frontend and Spring 3.0.2 as the Backend technology. To manage authentication for both the frontend and backend, I ha ...

Troubleshooting the ngcc error in StackBlitz when using MatTableModule from Material Design

Upon comparing my project config with this sample, I am puzzled by the error message that keeps popping up: An error in turbo_modules/@angular/[email protected]/table/table-module.d.ts (8:22) It seems that MaterialModule is trying to export something ...

Tips for dynamically calling a property member of a function type in Typescript

How can I determine if a member is a function in TypeScript? Is dynamic typing discouraged in TypeScript? function checkIfFunction<T, K extends keyof T>(obj: T, propName: K) { if (typeof obj[propName] === "function") { obj[p ...

Is VSCode disregarding tsconfig.json and compiling individual files, causing misleading error messages to appear?

After updating typescript, angular, and all the libraries in my project, I encountered a new issue that was not present before. Although I successfully ensured that my code builds without any errors or warnings from the command line, Visual Studio Code sta ...

Exploring Google Places with Angular 2, Typescript, and Ionic 2

Has anyone successfully transformed this code into TypeScript? var map; var infowindow; function initMap() { var pyrmont = {lat: -33.867, lng: 151.195}; map = new google.maps.Map(document.getElementById('map'), { center: py ...

Implementing PrimeNG with angular2-seed: A Step-by-Step Guide

I have successfully configured an angular2-seed project, but I am facing challenges while trying to integrate PrimeNG into my environment. My first step was to install Primeng and PrimeUI: npm install primeng --save npm install primeui --save After inst ...

Angular 2 Custom Pipe Magic

I'm brand new to using the Angular 2 framework and I'm attempting to create a custom filter. app.component.ts import {Component} from 'angular2/core'; import {HTTP_PROVIDERS} from 'angular2/http'; @Component({ selector: ...

Generate a TemplateRef and place it into the template of the component

Inquiring about Angular 5.0.2 After reviewing the example provided on NgTemplateOutlet at https://angular.io/api/common/NgTemplateOutlet I am eager to discover if there is a method to dynamically generate a TemplateRef and then insert it into the componen ...

Guide on linking an object retrieved from an API to an input text field in Angular

I have been working on reading API responses in Angular and displaying them in input text fields. While I am able to successfully call the API and view the response in the console, I am facing challenges when it comes to capturing the response in an object ...

Obtain the appropriate selection in the dropdown based on the model in Angular

I am working on a dropdown menu that contains numbers ranging from 1 to 10. Below is the HTML code for it: <div class="form-group"> <label>{{l("RoomNumber")}}</label> <p-dropdown [disab ...

Associating an event with a newly created element in Angular2

I'm looking to add a new row with just one click on the + button. This new row will come equipped with a - button that can then be used to delete the newly created row. However, I've encountered an issue in attaching a click event to this new - b ...

Issues arise when Typescript fails to convert an image URL into a base64 encoded string

My current challenge involves converting an image to base 64 format using its URL. This is the method I am currently using: convertToBase64(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.he ...

The error was thrown by the internal module loader in Node.js at line 1029

I encountered this Console Error - "Error: Cannot find module". Below is the detailed error message in the console. Any solutions? node:internal/modules/cjs/loader:1029 throw err; ^ Error: Cannot find module '/home/hiranwj/list' at Mo ...

Get ready for 10 AM with the RxJS timer function

I am trying to figure out how to schedule a method in my code using rxjs/timer. Specifically, I want the method to run at precisely 10 AM after an initial delay of 1 minute. However, my current implementation is running every 2 minutes after a 1-minute d ...

Issue encountered when running a minification build on Angular 5

After successfully updating my Single Page Application (SPA) from Angular 4 to Angular 5 along with all dependencies, everything seemed to be working well. Both the development and production builds were functioning without any errors or warnings. However ...

Update the js file by incorporating the import statement

Currently, I am in the process of transitioning to using imports instead of requires for modules. Here is an example of my previous code: const { NETWORK } = require(`${basePath}/constants/network.js`); The content of network.js file is as follows: export ...

What could be causing FormArrayName to consistently display as undefined in my HTML code, even when the safe-navigation operator is employed

Currently, I'm referring to the Angular Material example found at https://angular.io/api/forms/FormArrayName Upon initializing the packageForm formGroup in ngOnInit() and logging it in the console during ngAfterViewInit(), I can see that the translat ...

Clicking on the Angular custom accordion component does not trigger the expansion feature

I have developed a customized accordion component using Angular 9, but I am encountering an issue. Whenever I click on the accordion, only the first button's window expands while the others remain unaffected. To demonstrate the problem more effective ...

When using @Viewchild, it can sometimes lead to encountering

Within my project, I have a component called SideToggleComponent that contains a function: activeButton(value){ ... } I am trying to call this function from another component called BlogComponent. To do so, I am using @ViewChild as shown below: @ ...