Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular : Dateien Pfad ausserhalb des Projekts einbinden

23.02.2023 (👁5619)


Bilder ausserhalb vom Code Projekt anzeigen.

Wie kann man in Angular Dateien ausserhalb des Projekts anzeigen und verwalten.

Fall:
in diesem fall möchte ich Fotos als /myFiles/Test.jpg anzeigen mit dem relativen Pfad /myFiles/

Die Dateien sollen aber oberhalb des Fullstack Projectes liegen

Wenn man User Daten, Files, Bilder ausserhalb des Angular Projekts Codes verwalten möchte, dann kann man diese Ordner auslagern und mit einem eignen Pfad-label in Angular einbinden

In Angular.json -> in dem Bereich "assets" kann man einen zusÀtzlichen externen Pfad anbinden

"glob": "**/*",

Alle Dateien Bilder Images Files..

"input": "../../_user_files",

../ up-out Angular-Project (out of Angular-folder: codedocu)
../../ up-out Fullstack-Project (out of folder: frontend)

"output": "/myfiles/"

Dadurch werden Bilder angesprochen wie /myFiles/myImage.jpg

            "assets": [

              "src/favicon.ico",

              "src/assets",

              {

              "glob": "**/*",

              "input": "../../_user_files",

              "output": "/myfiles/"

              }

            ],

Ein Bild, das Text, Screenshot, Monitor, schwarz enthÀlt.

Automatisch generierte Beschreibung

Anzeigen der Bilder hier in der index.html mit dem relativen Pfad /myFiles/

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>CodeDocu</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

 

</head>

<body>

    <app-root></app-root>

    <p>/myfiles/Test.jpg</p>

    <img src="/myfiles/Test.jpg">

 

    <p>myfiles/Test.jpg</p>

    <img src="myfiles/Test.jpg">

</body>

</html>

 

Komplette Angular.json Datei

{

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "newProjectRoot": "projects",

  "projects": {

    "CodeDocu_Frontend": {

      "projectType": "application",

      "schematics": {},

      "root": "",

      "sourceRoot": "src",

      "prefix": "app",

      "architect": {

        "build": {

          "builder": "@angular-devkit/build-angular:browser",

          "options": {

            "outputPath": "dist/code-docu-frontend",

            "index": "src/index.html",

            "main": "src/main.ts",

            "polyfills": [

              "zone.js"

            ],

            "tsConfig": "tsconfig.app.json",

            "assets": [

              "src/favicon.ico",

              "src/assets",

              {

              "glob": "**.*",

              "input": "../../_user_files",

              "output": "/myfiles/"

              }

            ],

           

            "styles": [

              "./node_modules/bootstrap/scss/bootstrap.scss",

              "src/styles.css"            

            ],

            "scripts": [

              "./node_modules/jquery/dist/jquery.min.js",

              "./node_modules/bootstrap/dist/js/bootstrap.min.js"              

            ]

          },

          "configurations": {

            "production": {

              "budgets": [

                {

                  "type": "initial",

                  "maximumWarning": "500kb",

                  "maximumError": "1mb"

                },

                {

                  "type": "anyComponentStyle",

                  "maximumWarning": "2kb",

                  "maximumError": "4kb"

                }

              ],

              "outputHashing": "all"

            },

            "development": {

              "buildOptimizer": false,

              "optimization": false,

              "vendorChunk": true,

              "extractLicenses": false,

              "sourceMap": true,

              "namedChunks": true,

              "fileReplacements": [

                {

                  "replace": "src/environments/environment.ts",

                  "with": "src/environments/environment.development.ts"

                }

              ]

            }

          },

          "defaultConfiguration": "production"

        },

        "serve": {

          "builder": "@angular-devkit/build-angular:dev-server",

          "configurations": {

            "production": {

              "browserTarget": "CodeDocu_Frontend:build:production"

            },

            "development": {

              "browserTarget": "CodeDocu_Frontend:build:development"

            }

          },

          "defaultConfiguration": "development"

        },

        "extract-i18n": {

          "builder": "@angular-devkit/build-angular:extract-i18n",

          "options": {

            "browserTarget": "CodeDocu_Frontend:build"

          }

        }

       

      }

    }

  }

}