"Enhance your project with the power of Angular CLI, npm,

I am working on an Angular 2 project built with npm and angular-cli.

I want to be able to copy a folder into another folder before every compilation. The goal is to have multiple themes in individual folders, and then select one of those themes using a variable called 'themeId'.

Is this achievable?

  • How can I run a copy script before each compilation that will work on both Windows and Linux?
  • How do I set the themeId parameter for this script, and what should the default value be if not specified?

Thank you in advance.

Answer №1

Currently, my approach involves running a Node.js script within npm scripts configuration (package.json) and utilizing environment variables by including --projectname:client=client1

Below is a snippet from my package.json file:

 "config": {
  //default value
  "client": "client0"
}

 "scripts": {
   //reference to Node.js file that utilizes the process.env.npm_package_config_client variable
   "prestart": "node inoscripts/copyfiles.js",
   "ng": "ng",
   "start": "ng serve",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
}

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

Is there a similar feature to npm link in composer for PHP projects?

During my JavaScript module development process, I utilize npm link to easily install my local version into projects that require the module as a dependency. This method provides a seamless workflow. Although not quite as ideal as TDD, this approach simpl ...

Angular compodoc tool is not considering *.d.ts files

Is there a way to make compodoc include .d.ts files in the documentation generation process for my Angular project? Even though I've added all .d.ts files to tsconfig.compodoc.json as shown below: { "include": [ "src/**/*.d. ...

"Exploring the power of D3, TypeScript, and Angular 2

I am facing challenges incorporating D3 v4 with Angular 2 (Typescript). While exploring D3 v4, I have referred to several solutions on StackOverflow without success. I have imported most of the necessary D3 libraries and typings (utilizing TS 2.0) and adde ...

Tips for using an ArrayBuffer to stream media in Angular

Currently, I am facing an issue while transferring data from my backend with nodeJS to Angular. Everything seems to be working fine except for one problem - my media files are not functioning properly in my code. To resolve this, I have implemented Blob fi ...

Error occurs while trying to run npm install within a docker container

When attempting to execute npm install within a docker container, the command I used was: docker run -it --rm -v $(pwd):/src cthulhu666/yeoman npm install Unfortunately, it consistently fails with an error message similar to this: 85351 error node v5.5. ...

Is there a way to implement an extra placeholder attribute with Angular4?

Currently, in a project where I am utilizing Angular Material, there is a form integrated with an autocomplete component. The functionality works as expected but I am interested in implementing placeholder text once the user focuses on the input element. ...

The error being thrown at line 538 in the module.js file is causing issues when using

I encountered an error in my Angular 4 project that says "module.js:538 throw err;". Can anyone provide insight on what this means? module.js:538 throw err; ^ Error: Cannot find module 'swagger-js-codegen' at Function.Module._resolveFilena ...

TimeoutException occurs in Browser when using Visual Studio with ASP.NET and Angular

After waiting for 60 seconds, an error message appeared in the browser when trying to debug. However, after refreshing the browser window and waiting for another 15 seconds, everything seemed to be working fine. An unexpected error occurred during the r ...

Apply a see-through overlay onto the YouTube player and prevent the use of the right-click function

.wrapper-noaction { position: absolute; margin-top: -558px; width: 100%; height: 100%; border: 1px solid red; } .video-stat { width: 94%; margin: 0 auto; } .player-control { background: rgba(0, 0, 0, 0.8); border: 1px ...

React is up and running smoothly on my local machine, but unfortunately encountering issues on Vercel

I have encountered an issue while trying to deploy my website on Vercel. Despite the build logs showing a successful compilation, I am receiving a "failed to compile" error: [16:43:24.951] Running build in Washington, D.C., USA (East) – iad1 [16:43:25.05 ...

Customizing CSS in Angular Components: Taking Control of Style Overrides

I am new to working with Angular and HTML. Currently, I have two different components named componentA and componentB, each having their own .html, .css, and .ts files. In the componentA.css file, I have defined some styles like: .compA-style { font- ...

Searching for data based on specific keywords in Angular 2, rather than using a wildcard search, can be done by utilizing the key-in

My dropdown contains 100 values, and I am currently able to search for these values based on key input using wild search. However, I would like the dropdown to display values based on the specific alphabet that I enter first. HTML: <div class="col- ...

What is the reason for using an outdated version of lodash in the code?

After successfully installing node on my Android phone using Termux, I decided to upgrade lodash globally to version 4. $ npm -v 5.6.0 $ node -v v8.9.2 $ npm i -g lodash + <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="19757 ...

Encountering difficulties in transmitting ngModel across multiple layers

I'm encountering a problem when trying to pass ngModel through the second child component. It seems that as soon as I do that, it stops working. In order to pass the ngModel, I implemented this abstract class: export abstract class AbstractValueAcces ...

Angular material stepper displaying incorrectly

Here is the HTML code I used for creating an Angular Material stepper: <mat-horizontal-stepper class="stepper"> <mat-step label="Basic" state="cloud_download"> Step 1 <button mat-button matSteppe ...

In Visual Studio Code, beautification feature splits HTML attributes onto separate lines, improving readability and code organization. Unfortunately, the print width setting does not apply

I have done extensive research and tried numerous solutions, When using Angular and formatting HTML with Prettier, it appears quite messy as it wraps each attribute to a new line, for example: <button pButton class="btn" ...

What steps should I take in order to ensure that NPM commands run smoothly within Eclipse?

I have a functional workflow that I'm looking to enhance. Currently, I am developing a JavaScript library and conducting smoke tests on the code by using webpack to bundle the library and save it to a file that can be included in an HTML file for test ...

There was an issue with the specified entry-point "auth0/angular-jwt" as it is missing required dependencies

I am currently working on an Angular project with the following versions: @angular-devkit/architect 0.901.1 @angular-devkit/core 9.1.1 @angular-devkit/schematics 9.1.1 @schematics/angular 9.1.1 @schematics/update 0.901.1 rx ...

Tips for managing global npm packages following regular brew upgrades

Whenever I update node on OS X with Homebrew, it seems to remove all of my global packages installed with npm -g. For instance, after the update, my Vim's Syntastic tool fails to run jshint on javascript files. It just stops working without any warni ...

The name 'Queue' cannot be located in Typescript, error code ts(2304)

I'm currently trying to create a private variable of type InnerItem, but I keep encountering the following error: Error: Cannot find name 'Queue'.ts(2304) private savedItems: Queue<InnerItem> = new Queue<InnerItem>(20); Could ...