What is the best way to incorporate resources from a different location in an Angular project?

I am facing an issue with the deployment time of my server as I am using @angular/localize to support three languages in my application. Despite all locales sharing the same assets, they are being downloaded and deployed individually for each one.

To address this, I attempted to remove assets for all but one locale by removing the respective folder through a script. However, now I want the other locales to utilize the assets from en-US instead of displaying a 404 not found error as they currently do.

Is there a solution available to achieve this at present?

My current locale configuration is as follows:

"i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr":  "src/locale/messages.fr.xtb",
          "pt": "src/locale/messages.pt.xtb",
          "hi": "src/locale/messages.hi.xtb",
        }
      },

For serving verification purposes, I am utilizing the following configuration:

"prod-hi": {
                "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "deleteOutputPath": false,
                "assets": [],
                "localize": ["hi"]
              },
angulartypescriptlocaleangular-i18n

Answer №1

To customize your 'local' configuration, you have the option to utilize the assets configuration to exclude or remove specific assets that are not required. This will still allow you to output to the asset folder.

"assets": [
 {
   "glob": "**/*",
   "input": "src/assets/",
   "ignore": [
      "**/hi/*",
      "**/en/*"
   ],
   "output": "/assets/"
 }
]

For more information on this topic, visit: https://angular.io/guide/workspace-config#assets-configuration

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

Creating TypeScript utility scripts within an npm package: A Step-by-Step Guide

Details I'm currently working on a project using TypeScript and React. As part of my development process, I want to automate certain tasks like creating new components by generating folders and files automatically. To achieve this, I plan to create u ...

typescriptnpmdevopsts-node

combineLatest will trigger only for the initial event

I am looking to combine 3 events and trigger a service call when any of them are fired. Currently, I am using the combineLatest method, but it seems to only work when the first event is triggered by filterChanged. The issue here is that filterChanged is a ...

angulartypescriptrxjsobservablecombinelatest

Calculate the sum of elements within an array

I've been attempting to calculate the sum of values in an array based on different levels, but so far I haven't had much success. Here are the data I'm working with (stored in a variable called totalByLevel): https://i.stack.imgur.com/rOP9 ...

arraysangulartypescript

TypeScript fails to acknowledge an exported enum

Currently utilizing TypeScript version 2.5.3 along with Angular 5. I have an enum defined in a separate file as follows: export enum eUserType { Driver = 1, Passenger = 2, User = 3 } To import and use it in another ts file, I do the following: i ...

angulartypescriptenums

Turn off TypeScript's type validation during production builds

For my petite project, I am utilizing Next.js with TypeScript. A thought has been lingering in my mind lately: is there a way to turn off the types validity checks while executing npm run build? Since the type checking occurs during npm run dev, it seems ...

typescriptnext.js

What is the best way to incorporate infinite scrolling into my Angular carousel implementation?

After following an amazing tutorial, I was able to create a basic carousel using two directives and one component in Angular. However, the current version of the carousel lacks an 'infinite scrolling' mode, which is something I would like to inc ...

angular

Angular Dom does not update when invoking a function within a separate component

Greetings everyone! I am facing a situation where one component (let's name it recipe component) has a reference to another component (named grocery component). The method in my recipe component uses the reference to the grocery component to call a s ...

javascriptangular

Guide to iterating through different endpoints in a predetermined sequence

I am facing a challenge with testing various endpoints using different login credentials. When looping through the endpoints, the results are not appearing in the sequential order due to asynchronous nature. My goal is to iterate through each endpoint wit ...

angularjsangulartypescript

TS2531: Potentially null object

I am facing an issue in my React-TypeScript project with the following code snippet. Despite having null checks, I am still getting an error "object is possibly null" while running the app. The error specifically occurs in the last part of the if conditio ...

reactjstypescriptreact-typescript

The Angular logout route appears to be neglected

I'm currently working on implementing a LogoutFunction, but I'm running into an issue where it's not being dispatched to my API (Spring Boot). The login functionality works perfectly fine. My goal is to pass an ID to the API and receive a su ...

angularspring-boot

Exploring NextJS with Typescript

Struggling to incorporate Typescript with NextJS has been a challenge, especially when it comes to destructured parameters in getInitialProps and defining the type of page functions. Take for example my _app.tsx: import { ThemeProvider } from 'styled ...

javascriptreactjstypescriptnext.js

utilize makeStyles to modify button text color

Initially, my button was styled like this: style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 30px', }}> It worke ...

javascriptcssreactjstypescriptmaterial-ui

Encounter Modelstate Issue - ASP.NET Web API authentication - Angular 6 - Making an HTTP Post call

When sending a POST request to ASP.NET Web API Identity - Individual User Authentication Account to register a new user, everything works as expected. However, if the username already exists, an error is returned in the response body's ModelState. I a ...

angularasp.net-web-apiangular6

Guide on linking navigation to various buttons on the Angular menu

I am looking to enhance the functionality of my left menu buttons by adding a navigation path to each one (excluding the main menu). The menu items' names are received as @Input. I have set up a dictionary mapping all the items' names to their r ...

javascripthtmlangulartypescriptmenu

What is the best way to duplicate a Typescript class object while making changes to specific properties?

I have a Typescript cat class: class Kitty { constructor( public name: string, public age: number, public color: string ) {} } const mittens = new Kitty('Mittens', 5, 'gray') Now I want to create a clone of the inst ...

javascripttypescriptfunctional-programming

Encountering a problem with TypeScript while employing Promise.allSettled

My current code snippet: const neuroResponses = await Promise.allSettled(neuroRequests); const ret = neuroResponses.filter(response => response?.value?.data?.result[0]?.generated_text?.length > 0).map(({ value }) => value.data.result[0]?.genera ...

javascripttypescriptpromise

The functionality of the Request interface appears to be malfunctioning

Hey there, I'm currently working on building an API using Express and TypeScript. My goal is to extend the Request object to include a user property. I've done some research on Google and found several posts on StackOverflow that explain how to d ...

node.jstypescriptexpress

When all the checkboxes have been checked and then one is unchecked, a row is consequently removed

In my Angular table, I have a checkbox column. When I check all checkboxes, they all get checked as expected. Similarly, when I uncheck all checkboxes, they all get unchecked properly. If I check just one checkbox, only that particular one gets checked, ...

angularcheckboxdata-bindingcheckedarray-splice

What methods can be used to display data using TypeScript's Optional Chaining feature?

I came across this Try it Yourself TypeScript Optional Chaining example in W3Schools TypeScript Null & Undefined section, and I have attached a screenshot for reference. The example demonstrates that when data is undefined, it displays No Yard. Howeve ...

typescriptoptional-chaining

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

javascriptcssangularbootstrap-4