Include the root prefix in angular.json

Question

Include the root prefix in angular.json

Within my angular.json file, I am utilizing the following code snippet:

"root": "admin/",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref": "/admin/",
        "deployUrl": "/admin/",
        "outputPath": "dist/front/admin",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "assets": [
          "src/favicon.ico",
          {
            "glob": "**/*",
            "input": "src/assets/",
            "ignore": ["**/*.svg"],
            "output": "/assets/"
          }
        ],
...

However, I am encountering an issue when trying to display images. The following code does not seem to work:

 <img src="/assets/images/test.png">

In contrast, this code functions as expected:

<img src="admin/assets/images/test.png">

I would like to know how to set the "admin/" prefix in angular.json for each asset. Help would be appreciated.

javascript angular typescript angular-cli

Answer 1

Answer №1

A handy way to modify the src attributes of all img tags is by creating a custom Directive.

Follow these steps:

Create a new directive using the Angular CLI:

ng generate directive set-img-src-prefix

Configure the newly created directive as follows:

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: 'img' // targets all img tags
})

export class SetImgSrcPrefixDirective {
  constructor(public ref:ElementRef) {
    // make global changes here
  }
}

Finally, don't forget to include the directive in your app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {SetImgSrcPrefixDirective} from './set-img-src-prefix.directive'; // import the directive

@NgModule({
  declarations: [
    AppComponent,
    SetImgSrcPrefixDirective // add directive here
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

A handy way to modify the src attributes of all img tags is by creating a custom Directive.

Follow these steps:

Create a new directive using the Angular CLI:

ng generate directive set-img-src-prefix

Configure the newly created directive as follows:

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: 'img' // targets all img tags
})

export class SetImgSrcPrefixDirective {
  constructor(public ref:ElementRef) {
    // make global changes here
  }
}

Finally, don't forget to include the directive in your app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {SetImgSrcPrefixDirective} from './set-img-src-prefix.directive'; // import the directive

@NgModule({
  declarations: [
    AppComponent,
    SetImgSrcPrefixDirective // add directive here
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Include the root prefix in angular.json

Answer №1

Similar questions

Interface in Typescript that extends Object with keys that are dynamically assigned

Utilizing Vue 3 to transform an item within a list by referencing its index

Using various functions to set values in AngularJS

The terser-webpack-plugin and uglifyjs-webpack-plugin are both powerful tools for optimizing

Creating a function that can map various types of objects to a single type

"An error has occurred: ENOENT - The specified file or directory does not exist, cannot create directory" on the live website

Error encountered in Selenium WebDriver due to JavascriptException

Sending forms through the .NET platform

What is the best way to utilize regex for replacing a string within Node.js environment?

Updating an HTML value based on the selected option using JavaScript

What is the solution to the TypeScript error stating that there is no index signature with a parameter of type 'string' on the 'Object' type?

Unusual behavior involving the selection of $stateParams

Utilizing AWS SDK (S3.putObject) to transfer a Readable stream to Amazon S3 using node.js

Unexpected behavior: jQuery AJAX parameters not properly received by PHP script

Primeng - Displaying names in editable datatable with multiSelect feature

Can a map key value be converted into a param object?

Utilizing event binding with ngForTemplate in Angular 2

Capturing all input values from an HTML form in Node.js using Express

Ways to block past dates on bootstrap date picker starting from the current date and how to prevent dates beyond 90 days in the future from being selected on the

Detecting When a User Reaches the Bottom of the Screen in REACTjs