Angular 6 CLI does not copy library's assets folder into dist folder.

Versions

Angular CLI: 6.0.7
Node: 9.3.0
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.7
@angular-devkit/build-angular      0.6.7
@angular-devkit/build-ng-packagr   0.6.7
@angular-devkit/build-optimizer    0.6.7
@angular-devkit/core               0.6.7
@angular-devkit/schematics         0.6.7
@angular/cdk                       6.2.0
@angular/cli                       6.0.7
@angular/material                  6.2.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.7
@schematics/angular                0.6.7
@schematics/update                 0.6.7
ng-packagr                         3.0.0
rxjs                               6.2.0
typescript                         2.7.2
webpack                            4.8.3

Repro steps

Create a library @acme/lib1 using ng generate library @acme/lib1
Create assets folder under projects/acme/lib1/assets and add images
Add a "projects" -> "@acme/lib1" -> "architect" -> "build" -> "options" -> "assets" key to the library's config within angular.json file.
Build library using ng build @acme/lib1
Fail error should show and none of the assets will be copied to dist folder.

Observed behavior

Upon building & packaging an Angular 6 library e.g. @acme/lib1 using ng build @acme/lib1, the Angular CLI does not copy the library's assets into the dist/acme/lib1/assets folder. This happens also when using the --prod flag.

The CLI seems to only support copying the root app's assets but not library specific assets.
When trying to add "assets": ["src/assets"] to project @acme/lib1 within angular.json, the following error appears in the command line:

Schema validation failed with the following errors: Data path "" should NOT have additional properties(assets).

When creating the following custom rule to copying the files on ng build:

 "assets": [
    "src/favicon.ico",
    "src/assets",
     { "glob": "**/*", "input": "src/assets", "output": "../acme/lib1/assets/" }
],

I get the following error:

An asset cannot be written to a location outside of the output path.

While it is possible to work around this issue using other command line tools/scripts, it will be more consistent to add support for library's assets copy as well.

Desired behavior

Use Case
Very often libraries include image files, icons, css files and other static files which are needed to be distrubted with the package.

What would like to see implemented?
Add ability to define a library specific assets property within angular.json.
Example -

"@acme/lib1": {
      "root": "projects/acme/lib1",
      "sourceRoot": "projects/acme/lib1/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/acme/lib1/tsconfig.lib.json",
            "project": "projects/acme/lib1r/ng-package.json",
            "assets": [ // <--------- this is currently not supported
              "src/assets"
            ]
          },
  ...}

What did you expect to see?
Project's specific assets should be copied from projects/acme/lib1/src/assets into dist/acme/lib1/assets.

Mention any other details that might be useful (optional)

Glad to see I'm not the only one with this problem.

This is currently expected behavior from ng-packagr, which powers the library packaging process in the cli. The current suggestion is to copy manually after the build. I've heard mention that they will be addressing this in the future though.

See https://github.com/dherges/ng-packagr/issues/123#issuecomment-330029214

@n00dl3

this works for me (latest version)
"assets": [ { "glob": "**/*", "input": "src/assets", "output": "/assets" } ]
@n00dl3 / @StickNitro: sorry for the missing context: above is related to Angular CLI 6 and the configuration I mentioned goes to angular.json

here is a complete project configuration in angular.json
assets are definitly copied for the karma tests:

"@lvm/core-components": {
"root": "projects/lvm/core-components",
"sourceRoot": "projects/lvm/core-components/src",
"projectType": "library",
"prefix": "cc",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/lvm/core-components/tsconfig.lib.json",
"project": "projects/lvm/core-components/ng-package.json"
},
"configurations": {
"production": {
"project": "projects/lvm/core-components/ng-package.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/lvm/core-components/src/test.ts",
"tsConfig": "projects/lvm/core-components/tsconfig.spec.json",
"karmaConfig": "projects/lvm/core-components/karma.conf.js",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
],
"preserveSymlinks": true
}
},

Environment
Angular CLI: 6.0.8
Node: 8.11.2
OS: linux x64
Angular: 6.0.4

@lammers

@lammers Could you expand on your answer please, where does this need to go for this to work?

@lammers

@lammers I don't see how that would work, build-ng-packagr schema being like so, we cannot add any custom property :

{
  "title": "ng-packagr Target",
  "description": "ng-packagr target options for Build Architect.",
  "type": "object",
  "properties": {
    "project": {
      "type": "string",
      "description": "The file path of the package.json for distribution via npm."
    },
    "tsConfig": {
      "type": "string",
      "description": "The file path of the TypeScript configuration file."
    }
  },
  "additionalProperties": false,
  "required": [
    "project"
  ]
}

ok .. I just recognized that my scenario is different .. my assets are in the main project and are copied with the configuration above for the karma tests of the library project.

Having the same problem. Please let us know how to fix, or when a fix is in?

@bmhumadi

It's not currently supported @bmhumadi #11317

I just logged similar issue and it seems right now the only solution is either again gulp tasks or running directly npm command.

Other than that for a library support and probably there already feature requests you need to have a option to release a version, so some command in the chain that is able to bump up the version !

Otherwise library support is good for some simple usecases, but its definitelly good step forward !

we need support for this also!

I’m working on a big project, big enough that we were considering using nrwl also but the effort required to get our dozens of libraries setup to handle asserts correctly is a big hold up for the project.

I would love to see a simpler integration for assets as well.

@fkolar

@fkolar This is a bit off topic, but we've managed to incorporate semantic-release into our Angular CLI Library release process. It's not perfect but we've been happy with it so far. The key for us was to change the pkgRoot key in the config to point to the built library in the dist folder. Our versions are based on git tags so we haven't run into issues with the version being determined incorrectly.

You could probably use their exec plugin to script the syncing of the versions in the various package.json files in your project.

Thanks For the update. I have some solution for assets/resources and release cycle as well https://github.com/SAP/angular-metaui that I am using right now, its not perfect but better than nothing;-) Hopefully they will add in the next release or so.

Just to add another use case for this feature: when publishing a module to a private VSTS npm feed, it's required that the module include a .npmrc file at the root of the module that points to VSTS registry. Since this file doesn't get copied into the dist directory, the file must be manually copied after each build before publishing. This is a bit of a pain!

Actually, scratch that: the .npmrc file needs to be at the root of the whole repository, not in the dist directory. So it works without this feature. Although I still agree that this feature would be great to have!

Why is this still not resolved?? Angular 6 not displaying assets,images after --prod build???? works fine locally! Finally ready for deploy and assets are not rendering at firebase after my ng build --prod? All my other projects have worked in the past and I missing something in the latest version?

Some times ( ) cause these type of issue in build path

…

On Tue 25 Jun, 2019, 11:50 PM tecsolucionesinformaticas, < ***@***.***> wrote: After trying different approches. My solution was to create angular build as a subfolder of where my assets are. This way I can access assets as ../ Example: (build)---> myApp/myAngularBuild (assets)--> myApp/ this way I can even build with *ng build --base-href ./ --watch* — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#11071?email_source=notifications&email_token=AJWMR64JGMFOFUMTJ5YCQHTP4JOXJA5CNFSM4FCPTQF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYREMHQ#issuecomment-505562654>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJWMR6YX4NNXV73AS6FGRC3P4JOXJANCNFSM4FCPTQFQ> .

i have solved this by changing the file path to another location which folder doesn't contain special character

Oh, so thank you, dhanarajknp! I used [] in the root folder name.

Something ? Anything ??

I am using nodemon in my project. I have been able to copy the images in dist folder of library. https://github.com/Sunbird-Ed/sunbird-ui-components/blob/master/nodemon.json. This works

However, Now I am facing issues in using these images in the lib components.

Well in the meantime I developed my own builder, that executes @angular-devkit/build-ng-packagr and then follows with additional functionality like copying assets etc. That way I do not need to leave the realm of ng commands and even logs fit perfectly.

There is however one more thing...I had to configure application assets in angular.json to copy the library assets so they are accessible during the runtime of the application.

@klemenoslaj

Brilliant @klemenoslaj could you share your implementation?

Ck your base directory contain Any special characters

…

On Mon 16 Sep, 2019, 1:19 PM Bastien Lemaire, ***@***.***> wrote: Brilliant @klemenoslaj <https://github.com/klemenoslaj> could you share your implementation? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#11071?email_source=notifications&email_token=AJWMR66WGH53XVFBYCKK6ODQJ43ARA5CNFSM4FCPTQF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6YLGKI#issuecomment-531673897>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJWMR6Z5N4CH3M4DANDDOFTQJ43ARANCNFSM4FCPTQFQ> .

@blemaire

@blemaire in fact I just opened an issue in angular-builders for that very reason. I didn't want to create yet another package, I'd rather contribute there.

I can't understand how, It's been more than one year.

Any news no this?

check your base directory contains special character Wrong Eg : c:\programfile(S)\test\ In above example ( is special character Working Eg : c:\programfiles\test\ Thanks dhanaraj.k

…

On Mon, Nov 11, 2019 at 1:28 PM rorry121 ***@***.***> wrote: Any news no this? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#11071?email_source=notifications&email_token=AJWMR6ZWIRYMBQETAVAWAKLQTEGB3A5CNFSM4FCPTQF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDV66EI#issuecomment-552333073>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJWMR62QZPISAW6P2DT5V2DQTEGB3ANCNFSM4FCPTQFQ> .

fix: add `assets` option to schema

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.}

Navigation Menu

Repository navigation

Angular 6 CLI does not copy library's assets folder into dist folder. #11071

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

26 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Angular 6 CLI does not copy library's assets folder into dist folder. #11071

Description

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

Activity

ChrisWithTheHat commented on Jun 6, 2018

bniedermeyer commented on Jun 6, 2018

lammers commented on Jun 12, 2018

StickNitro commented on Jun 12, 2018

n00dl3 commented on Jun 12, 2018

lammers commented on Jun 13, 2018

bmhumadi commented on Jun 25, 2018

mattezell commented on Jun 29, 2018

fkolar commented on Jul 7, 2018

JBoothUA commented on Jul 20, 2018

kawazoe commented on Jul 20, 2018

bniedermeyer commented on Jul 20, 2018

fkolar commented on Jul 21, 2018

nfriend commented on Aug 2, 2018

alvics commented on Aug 15, 2018

26 remaining items

dhanarajknp commented on Jun 26, 2019

Cossack13 commented on Aug 23, 2019

gauri-kumar commented on Aug 23, 2019

lakhanmandloi commented on Sep 13, 2019

klemenoslaj commented on Sep 14, 2019

blemaire commented on Sep 16, 2019

dhanarajknp commented on Sep 16, 2019

klemenoslaj commented on Sep 16, 2019

hiepxanh commented on Oct 21, 2019

rorry121 commented on Nov 11, 2019

dhanarajknp commented on Nov 14, 2019

angular-automatic-lock-bot commented on Jan 4, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions