Skip to content

docs: update assets docs #10538

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 1, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 11 additions & 29 deletions docs/documentation/stories/asset-configuration.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Project assets

You use the `assets` array in `.angular-cli.json` to list files or folders you want to copy as-is
when building your project.
You use the `assets` array inside the build target in `angular.json` to list files or folders
you want to copy as-is when building your project.

By default, the `src/assets/` folder and `src/favicon.ico` are copied over.

```json
"assets": [
"assets",
"favicon.ico"
"src/assets",
"src/favicon.ico"
]
```

Expand All @@ -18,45 +18,27 @@ The array below does the same as the default one:

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

`glob` is the a [node-glob](https://github.com/isaacs/node-glob) using `input` as base directory.
`input` is relative to the project root (`src/` default), while `output` is
relative to `outDir` (`dist` default).
`input` is relative to the workspace root, while `output` is relative to `outDir`
(`dist/project-name` default).

You can use this extended configuration to copy assets from outside your project.
For instance, you can copy assets from a node package:

```json
"assets": [
{ "glob": "**/*", "input": "../node_modules/some-package/images", "output": "./some-package/" },
{ "glob": "**/*", "input": "./node_modules/some-package/images", "output": "/some-package/" },
]
```

The contents of `node_modules/some-package/images/` will be available in `dist/some-package/`.

## Writing assets outside of `dist/`

Because of the security implications, the CLI will always refuse to read or write files outside of
the project itself (scoped by `.angular-cli.json`). It is however possible to write assets outside
the `dist/` build output folder during build.

Because writing files in your project isn't an expected effect of `ng build`, it is disabled by
default on every assets. In order to allow this behaviour, you need to set `allowOutsideOutDir`
to `true` on your asset definition, like so:

```json
"assets": [
{
"glob": "**/*",
"input": "./assets/",
"output": "../not-dist/some/folder/",
"allowOutsideOutDir": true
},
]
```

This needs to be set for every assets you want to write outside of your build output directory.
Because of the security implications, the CLI will always refuse to write files outside of
the project output path.