web-dev-qa-db-fra.com

Mise à niveau angulaire De 5 à 6: le chemin d’actif doit commencer par la racine source du projet.

J'ai mis à niveau mon application existante de Angular 5 à 6. 

Après avoir exécuté ng serve, j'obtiens l'erreur suivante:

Le chemin de l'actif node_modules/font-awesome/fonts doit commencer par le racine du projet. Erreur: la ressource node_modules/font-awesome/fonts Le chemin doit commencer par la racine du projet . at assetPatterns.map.assetPattern (/home/kay/Documents/<>/<>/node_modules/@angular-devkit/build-angular/src/utils/normalize-asset-patterns.js:37:23)

Comme vous pouvez le voir ci-dessous, j'ai un tableau d'actifs qui extrait les polices du package de module de noeud. Ce n'était pas un problème dans Angular 5.

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "../node_modules/font-awesome/fonts"
            ],
            "styles": [
              "src/styles.scss",
              "src/theme.scss",
              "node_modules/font-awesome/css/font-awesome.min.css"
            ],
            "scripts": [
              "node_modules/hammerjs/hammer.min.js",
              "node_modules/auth0-js/build/auth0.min.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/ua-parser-js/dist/ua-parser.min.js",
              "node_modules/d3/dist/d3.min.js",
              "node_modules/wordcloud/src/wordcloud2.js",
              "node_modules/chart.js/dist/Chart.bundle.min.js",
              "node_modules/progressbar.js/dist/progressbar.min.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/hammerjs/hammer.min.js",
              "node_modules/auth0-js/build/auth0.min.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/ua-parser-js/dist/ua-parser.min.js",
              "node_modules/d3/dist/d3.min.js",
              "node_modules/wordcloud/src/wordcloud2.js",
              "node_modules/chart.js/dist/Chart.bundle.min.js",
              "node_modules/progressbar.js/dist/progressbar.min.js"
            ],
            "styles": [
              "src/styles.scss",
              "src/theme.scss",
              "node_modules/font-awesome/css/font-awesome.min.css"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "node_modules/font-awesome/fonts"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "demo-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "demo:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "demo",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}
6
Kay

Modifier 1

Ok essayez ceci:

"assets": [
    {"glob": "**/*", "input": "./node_modules/youpackage", "output": "/where_you_want_theasset/"}
]

référence: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/asset-configuration.md

Réponse originale: Car cela m’a aidé (tous mes biens sont en src)

J'ai eu la même erreur après la mise à jour,

essayez d'ajouter la racine de votre application à angular.json.

pour moi les sourcesRoot et root sont les mêmes 

"root": "src",
  "sourceRoot": "src",

ainsi:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "demo": {
      "root": "src",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
6
abann sunny

Ok, .__ Clarifier la solution d'Abann. Vous devez utiliser le formulaire long pour les actifs en dehors de sourceRoot. Je pense que la documentation pourrait être beaucoup plus claire à ce sujet. Il est dit

Vous pouvez utiliser cette configuration étendue pour copier des éléments extérieurs à votre projet. Par exemple, vous pouvez copier des actifs à partir d'un package de nœud:

Mais vraiment, il faudrait dire vous devez utiliser} _

"assets": [
          "src/assets",
          "src/favicon.ico",
           {
            "glob": "*",
            "input": "node_modules/font-awesome/fonts",
            "output": "assets/fonts/"
          }
        ],

assets/fonts/ est le chemin que vous avez probablement configuré dans la substitution de variable $fa-font-path de votre fichier SASS/SCSS.

2
Eric Liprandi

J'ai reçu le même message d'erreur après avoir mis à niveau mon projet en version angulaire 6.x. Mon projet contient des références à PrimeNG, qui utilise une police géniale. Après la mise à niveau de PrimeNG vers 6.0.0-alpha.2, l’erreur a disparu (ils travaillent d'arrache-pied pour obtenir un support angular 6 officiel). 

Par conséquent, si vous rencontrez ce problème, vérifiez que vos dépendances prennent également en charge Angular 6.x et que les packages installés sont à jour.

0
Horace

C'est vrai ce qui a été dit, mais cela doit être écrit un peu différemment. Cela fonctionne pour moi, dans mon JSON angulaire

"assets": [
              {
                "glob": "assets/**",
                "input": "src",
                "output": "/"
              }
            ]
0
Johansrk

changement de sourceRoot en '.' semble avoir résolu ce problème et m'a permis de compiler, et un test superficiel montre que tout fonctionne. pas sûr que cela n'introduira pas d'autres conséquences inattendues.

0
Brian Hadley