Angular build process encountering environment issue

When attempting to construct an Angular project, I am encountering the following problem:

The file '/angular/src/environments/environment.ts' is not recognized as a module

I am importing the file in this manner :

import { environment } from '../../environments/environment';

This is what my tsconfig.json looks like :

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Within my environment folder, I have the following files: environment.ts, environment.prod.ts, environment.dev.ts.

I am utilizing NODE_VERSION=10 and NG_CLI_VERSION=8

In my angular.json, the configuration for development build is as follows :

"dev": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "serviceWorker": true
        }

The command used for building is :

"build": "ng build --configuration=dev --aot",

Your assistance is greatly appreciated. Thank you in advance!

Answer №1

By default, Angular only sets up the production environment in the angular.json file to replace the environment.ts file. This configuration can be found in the following section of the angular.json file:

"configurations": {
   "production":{
      "fileReplacements":[
         {
            "replace":"src/environments/environment.ts",
            "with":"src/environments/environment.prod.ts"
         }
      ],
      "rest": ...
   }
}

If you want to use the environment.dev.ts file for development, you will need to add a similar fileReplacements section for the dev build as well:

"fileReplacements":[
  {
    "replace":"src/environments/environment.ts",
    "with":"src/environments/environment.dev.ts"
  }
]

Alternatively, you can place your development configuration in the non-postfixed file.

Answer №2

Make sure to set the environment variable using the export command:

export const config = {
  ...
}

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

How to set environment variables in npm on Windows Command Prompt (command not recognized as internal or external command)

What is the correct way to set environment variables in a command line script on Windows? MY_ENV_VAR=2 npm run my_script or MY_VAR1=100 MY_VAR2=300 npm run my_script I am trying to define environment variables for my script. In my index.js file, I have ...

Updating npm file dependencies locally

I am currently working on a project that has a local file dependency specified in the package.json as shown below: "dependencies": { "dep_1": "file:../../dep_1" } } After running npm install, the dependency is installed in the node_modules folder. ...

Enhance Your Search Functionality with an Angular Pipe

I created a custom pipe that filters the search field and displays a list of items based on the search text. Currently, it only filters by companyDisplay, but I want to also filter by companyCode and companyName. JSON [{ companyDisplay: "ABC", co ...

The loan component does not have a property called 'darkModeService' associated with it

I've been attempting to implement a dark theme for my Angular application, and although I've configured everything correctly, it doesn't seem to be working as expected. Here is the code snippet: constructor(private bookService: BookService ...

Troubleshooting routing problems in an Angular 5 application hosted on an ASP.Net web application

Encountering an issue with an Angular 5 app deployed on IIS 7.5 within an ASP.NET web app. The URL of the Angular app is: During UAT testing, the app successfully routed to the default view using this path. However, in production, the site failed to load ...

React components need to refresh after fetching data from an API

I am currently working on a React application using TypeScript and integrating JSONPlaceholder for simulating API calls. I have successfully set up everything I need, but I am encountering an issue with re-rendering components that display response data fr ...

Troubleshooting type conflicts while utilizing the 'withRouter' function in Typescript

Currently, I am delving deeper into React and TypeScript, seeking to expand my understanding and practical experience. While utilizing withRouter from react-router-dom, I encountered a typing error. The issue arose within my simplistic code snippet. I att ...

Attempting to initiate my node.js program using npm, however, no progress is being made

I am currently working on getting this slack bot up and running: https://github.com/lmammino/norrisbot Although I am still learning about npm and node, I have been following the provided instructions and attempting to start the bot using the npm start com ...

Typescript is unable to interpret an anticipated overloaded function signature

I'm currently facing challenges with TypeScript overload resolution. When using the googleapis library with TypeScript to fetch all tag manager accounts records, the list function requires pagination if the response body contains a nextPageToken. I a ...

Conditional Skipping of Lines in Node Line Reader: A Step-by-Step Guide

I am currently in the process of developing a project that involves using a line reader to input credit card numbers into a validator and identifier. If I input 10 numbers from four different credit card companies, I want to filter out the numbers from thr ...

Having trouble with AWS, Angular, and Docker integration issues

I have successfully dockerized my Angular app using the following Dockerfile: FROM node:8.9 as node WORKDIR /app COPY package.json /app/ RUN npm install COPY ./ /app/ ARG env=prod RUN npm run build -- --prod --environment $env FROM nginx:1.13 COPY -- ...

Troubleshooting npm run watch in Laravel and Vue.js project

Currently, I am managing a Laravel project with a Vue.js frontend setup. Previously, running npm run watch would immediately reflect any changes I made. However, lately, the changes are not showing up as expected and I'm unsure of what is causing this ...

Contact creation not working on non-HubSpot form popups

I'm currently experiencing an issue with my website that has non-Hubspot forms. We have successfully integrated the tracking code to generate cookies for users, track their sessions, and enable the non-Hubspot forms. However, we are facing a problem s ...

In what scenarios would it be more beneficial for me to develop my own module package rather than utilizing existing packages

As a budding node js developer embarking on a personal project, I was pleasantly surprised to discover open source packages on npm that align with my current development goals. These packages introduce cutting-edge concepts that I have yet to explore and ...

Use the npm-search feature to show only the name and description columns in the search results

After running the command npm search packagename, I noticed that the results are shown in 6 columns: name, description, author, date, version, and keywords. Is there a way to customize npm-search so that it only displays the name and description columns? ...

Testing to submit a form using ReactiveForm can be done by reloading the form while it is being submitted

A tutorial I came across titled "Make Your Angular Form’s Error Messages Magically Appear" sparked the beginning of my journey. The tutorial featured a simple form with just one input field and one button. To trigger additional events on a lower level, I ...

Unable to implement new ecmascript decorators within typescript version 2.4.2

Check out this example code: function enumerable(value: boolean) { return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { descriptor.enumerable = value; }; } class A { @enumerable(false) a: number = 1 b: number ...

Tips for formatting a Date field within an Angular application

After receiving a stringVariable from the backend service, I successfully converted it into a Date field with the following code snippet. date d = new Date(stringVariable ); While this conversion worked fine, the resulting date format is not what I requ ...

Error encountered in Browserify bundle.js: exec function is not executable

After setting up Node.js, npm, samba-client, and browserify on my system, I encountered a frustrating issue in my bundle.js file. An Uncaught TypeError related to the 'exec' function has been causing trouble, and despite my efforts, I have been u ...

sorting names based on marks using localeCompare

Within my arraylist are the names of students and their corresponding math scores. I am looking to use localeCompare to organize them in ascending and descending order based on their marks, as well as have their names organized in ascending order when clic ...