Angular-cli: asset path must start with the project source root

[juristr]

Versions

Angular CLI: 6.0.1
Node: 9.2.0
OS: darwin x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.1
@angular-devkit/build-angular     0.6.1
@angular-devkit/build-optimizer   0.6.1
@angular-devkit/core              0.6.1
@angular-devkit/schematics        0.6.1
@angular/cdk                      5.2.5
@angular/cli                      6.0.1
@angular/flex-layout              6.0.0-beta.15
@angular/material                 5.2.5
@ngtools/webpack                  6.0.1
@schematics/angular               0.6.1
@schematics/update                0.6.1
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

I have a nrwl/nx repository which I migrated. The Angular CLI update script migrated my .angular-cli.json in the following way (excerpt of one of the projects in my monorepo):

"securplan-web": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
        "outputPath": "dist/apps/securplan-web",
        "index": "apps/securplan-web/src/index.html",
        "main": "apps/securplan-web/src/main.ts",
        "tsConfig": "apps/securplan-web/src/tsconfig.app.json",
        "polyfills": "apps/securplan-web/src/polyfills.ts",
        "assets": ["apps/securplan-web/src/assets", "apps/securplan-web/src/favicon.ico"],
        "styles": ["apps/securplan-web/src/assets/style/material-icons.css", "apps/securplan-web/src/styles.scss"],
        "scripts": []
        },
       ...
    }
...
}

Note the assets configuration. If I try to build or serve this project I get the error

The apps/securplan-web/src/assets asset path must start with the project source root.

Changing the path from

 "assets": ["apps/securplan-web/src/assets", "apps/securplan-web/src/favicon.ico"],

to

"assets": ["assets", "favicon.ico"],

doesn't work and results in this error:

The assets asset path must start with the project source root.

What works is if I change it like this:

"assets": [
  { "input": "apps/securplan-web/src/assets", "glob": "**/*", "output": "assets" },
  { "input": "apps/securplan-web/src", "glob": "favicon.ico", "output": "." }
],

Observed behavior

(as described before in the repro steps)

Desired behavior

Although the "explicit" form of defining the assets paths works, the error message is very misleading and kinda strange, since my path is actually inside the project source root, especially when then changing it to "assets": ["assets", "favicon.ico"],

Mention any other details that might be useful (optional)

This might be related to #10688 although it's not exactly the same use case.

//cc FYI @clydin

[filipesilva]

@juristr I think I know what happened here. Something in the project structure broke the paths when updating the .angular-cli.json file. Specifically, root and sourceRoot are not correct for that project.

It should be this instead:

"securplan-web": {
    "root": "apps/securplan-web/",
    "sourceRoot": "apps/securplan-web/src/",
    "projectType": "application",

Can you provide us with a reproduction of this problem happening? The old .angular-cli.json should be enough.

[juristr]

@filipesilva Sure, here's the original .angular-cli.json. As mention, this is a NRWL/NX repository. This was the CLI config just before launching the ng update @angular/cli script

{
  "$schema": "./node_modules/@nrwl/schematics/src/schema.json",
  "project": {
    "name": "r3gis",
    "npmScope": "r3gis",
    "latestMigration": "20180515-switch-to-nx6"
  },
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "./tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "apps/trees-web/src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "apps/trees-web/e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "apps/securplan-web/src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "apps/securplan-web/e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "apps/securplan-mobile/src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "apps/securplan-mobile/e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "schematics": {
      "collection": "@nrwl/schematics",
      "postGenerate": "npm run format",
      "newProject": [
        "app",
        "lib"
      ]
    },
    "styleExt": "scss",
    "component": {}
  },
  "warnings": {
    "typescriptMismatch": false
  },
  "apps": [
    {
      "name": "securplan-mobile",
      "root": "apps/securplan-mobile/src",
      "outDir": "apps/securplan-mobile/www",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "../../../test.js",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "../../../tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "./assets/style/material-icons.css",
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "tags": []
    },
    {
      "name": "securplan-web",
      "root": "apps/securplan-web/src",
      "outDir": "dist/apps/securplan-web",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "../../../test.js",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "../../../tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "./assets/style/material-icons.css",
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "tags": []
    },
    {
      "name": "trees-web",
      "root": "apps/trees-web/src",
      "outDir": "dist/apps/trees-web",
      "assets": [
        "assets",
        {
          "glob": "**/*",
          "input": "../../../libs/r3-login/assets",
          "output": "./assets/r3-login"
        },
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "../../../test.js",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "../../../tsconfig.spec.json",
      "prefix": "r3trees",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "tags": []
    },
    {
      "name": "r3-authentication",
      "root": "libs/r3-authentication/src",
      "test": "../../../test.js",
      "prefix": "r3",
      "appRoot": "",
      "tags": []
    },
    {
      "name": "r3-core",
      "root": "libs/r3-core/src",
      "test": "../../../test.js",
      "appRoot": "",
      "prefix": "r3",
      "tags": []
    },
    {
      "name": "r3-devtests",
      "root": "libs/r3-devtests/src",
      "test": "../../../test.js",
      "prefix": "r3",
      "appRoot": "",
      "tags": []
    },
    {
      "name": "r3-http",
      "root": "libs/r3-http/src",
      "test": "../../../test.js",
      "appRoot": "",
      "tags": []
    },
    {
      "name": "r3-login",
      "root": "libs/r3-login/src",
      "test": "../../../test.js",
      "prefix": "r3",
      "appRoot": "",
      "tags": []
    },
    {
      "name": "r3-navigation-stacks",
      "root": "libs/r3-navigation-stacks/src",
      "test": "../../../test.js",
      "prefix": "r3",
      "appRoot": "",
      "tags": []
    },
    {
      "name": "r3-testing",
      "root": "libs/r3-testing/src",
      "test": "../../../test.js",
      "prefix": "r3",
      "appRoot": "",
      "tags": []
    },
    {
      "name": "r3-ui",
      "root": "libs/r3-ui/src",
      "test": "../../../test.js",
      "prefix": "r3ui",
      "appRoot": "",
      "tags": []
    },
    {
      "name": "r3-user-management",
      "root": "libs/r3-user-management/src",
      "test": "../../../test.js",
      "appRoot": "",
      "prefix": "r3-userman",
      "tags": []
    },
    {
      "name": "securplan-core",
      "root": "libs/securplan-core/src",
      "test": "../../../test.js",
      "appRoot": "",
      "prefix": "securplan",
      "tags": []
    },
    {
      "name": "securplan-login",
      "root": "libs/securplan-login/src",
      "test": "../../../test.js",
      "appRoot": "",
      "tags": []
    }
  ]
}

[FrozenPandaz]

Made a PR to fix this :)

https://github.com/angular/devkit/pull/985

[EdwinCloud101]

Did you manage to have it working?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}