Is it possible to specify different asset arrays when using ng build?
"assets": [
"assets",
"favicon.ico",
{
"glob": "**/*",
"input": "../externalDir",
"output": "./app/",
"allowOutsideOutDir": true
}
]
In my scenario, I only want to include the following assets when running ng build:
"assets": [
"assets",
"favicon.ico"
]
For my project, I needed to have separate robots.txt files for each environment. To achieve this, I created two files in the src/environments folder: robots.txt and robots.prod.txt. In the angular.json file, I added these files to the assets array and utilized the fileReplacements configuration as shown below:
"architect": {
"build": {
"options": {
"assets": [
"src/assets",
{
"glob": "robots.txt",
"input": "src/environments/",
"output": "/"
}
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/robots.txt",
"with": "src/environments/robots.prod.txt"
}
]
}
}
}
}
I am utilizing @angular/cli: ~8.3.4 for this implementation.
There isn't a specific option for environment-specific assets, but you can create different apps in your angular-cli.json file that are essentially duplicates of each other, with varying assets. For example:
// angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"name": "devApp",
"assets" : [
"assets",
"favicon.ico",
{
"glob": "**/*",
"input": "../externalDir",
"output": "./app/",
"allowOutsideOutDir": true
},
],
...
},
{
"root": "src",
"outDir": "dist",
"name": "prodApp",
"assets": [
"assets",
"favicon.ico"
],
...
}
]
This allows you to build different sets of assets by specifying the desired "app" to build:
// dev
ng build --app=0
// or
ng build --app=devApp
// prod
ng build --app=1
// or
ng build --app=prodApp
For more information on using multiple apps in Angular CLI, refer to the official documentation.
I am currently integrating Bootstrap into my React project alongside Material UI components. Below is a sample of one of my components: import { styled } from "@mui/material/styles"; import Paper from "@mui/material/Paper"; import Cont ...
I'm facing an issue where I want to show the user's friendly name in a conversation, but it looks like the Message resource only returns the identity string as the message author. I attempted to retrieve the conversation participants, generate a ...
Here is the HTML snippet that I am working with: <drop-down-list [name]="MeetingTool.Type" [options]="options$" [isRequired]="false" class="input-width" ...
For example, if we have a Person object defined like this: class PersonClass implements Person { private _name : string; private _age : number; get name() : string {return this._name} get age() : number {return this._age} constructor(name : strin ...
Currently utilizing material-ui-icons v1.0.0-beta.36. I am endeavoring to incorporate a Search icon within a .tsx component. .tsx component: import React, { Component, ReactElement } from 'react' import Search from 'material-ui-icons/Sear ...
What methods can be used to alert the user of the web app about outdated content? Our web app utilizes Angular and is deployed through Azure DevOps. Users often keep their browser open for extended periods of time, leading to instances where they may be v ...
I am currently utilizing the angular2-webpack starter from GitHub, and I am looking to incorporate an npm library, such as Babylon JS. My approach so far has been as follows: import * as BABYLON from 'babylonjs/babylon'; The Babylon library inc ...
My typescript library transpiles smoothly using tsc with the provided configuration: { "compilerOptions": { "target": "es6", "module": "commonjs", "lib": [ "es6", "es5", "dom", "es2017" ], "declaration": true, ...
Encountering issues when attempting to build my React/Typescript app using the MouseEvent type in an event handler: private ButtonClickHandler(event: MouseEvent): void { ... } The error message received is as follows: error TS2322: Type '{ onCl ...
Looking for a straightforward way to incorporate Angular2 into a single HTML file without using Bower, NPM, NuGet, or other complex methods? EDIT: Thanks to Dieuhd's suggestion, I was able to make Angular 2.0 work using the following script referenc ...
I am faced with the challenge of merging arrays and objects. Here is an example array I am working with: [ { name: "test", sub: { name: "asdf", sub: {} } }, { name: "models", sub: {} } ] ...
Is it possible to create a new type alias based on an object's values? const test = { 'a': ['music','bbq','shopping'], 'b': ['move','work'] }; How can we extract this information f ...
Even though this topic has been covered before, I have not found any satisfactory solutions. Here is my approach: play.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; impor ...
In my current project with Angular 16, I am executing a query on the database and assigning the returned number to a document number. Data Model export class Document { doc_data: string =""; doc_for: string=""; doc_number: number = 0; doc_ ...
I'm in the process of securing an Angular application with a Keycloak server. I've followed several tutorials with similar instructions, but I encountered an issue that has me stuck: Timeout when waiting for 3rd party check iframe message. My ...
I am currently in the process of migrating an Angular 1.5 project to Angular 6, but I've encountered an issue with the templateUrl not working in the Angular 1.5 component. The packages I am using are: Angular CLI 6.0.8 TypeScript 2.7.2 Angular 6.0.7 ...
When it comes to Typescript generics inference, the priority is given to arguments over assignment. This means that any param props are automatically converted into type unknown, even if they are assigned to a variable whose type param is set to an object ...
Having an issue displaying the response from an observable on the console in my Angular project. It seems to be coming back as undefined when retrieved from a service. Even when attempting to loop through the data, I get an error stating that it is not ite ...
After scouring through multiple discussions and questions regarding the different routing options in Angular 4, I have been unable to resolve an issue related to passing queryParams to an Angular 4 route. Whether passing them into the URL like this http: ...
In my HTML code, I have the following structure: <div class="grid mb-5" *ngFor="let orderItem of order.orderItems"> <div class="col-2">{{ orderItem.product.name }}</div> <div class="col-2&qu ...