#

Angular : Dateien Pfad ausserhalb des Projekts einbinden

 

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"

          }

        }

       

      }

    }

  }

}

 

 

 

Mobile

.

123movies