Linking an image outside of app root

[CSchulz]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

node: 6.9.5
os: win32 x64
@angular/animations: 4.1.2
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.1.0-rc.0
@angular/compiler-cli: 4.1.2

Repro steps.

1. create a component under app
2. create a folder resources/icons in the project root and put an image in that directory
3. in the template link the image

Additional information

I have tried different ways all without success:

<img src="assets/icons/monitor.png">
<img src="resources/icons/monitor.png">
<img src="../resources/icons/monitor.png">
<img src="icons/monitor.png">

You can see no resources from icons are included:

The css is included via the styles of angular-cli.json.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "version": "0.0.1",
    "name": "test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "../resources",
        "../resources/icons/favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/bootstrap/theme.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../resources/css/test.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

Related to #3292

Desired functionality.

The image should be found out side of the app root directory f.e. src.
The assets array should be used for ng serve too.

[clydin]

ng serve essentially performs an ng build in memory so the assets configured in .angular-cli.json should be available. Which also means that the output of ng build can be used to preview what is available via ng serve.

Can you provide your .angular-cli.json file?

[sumitarora]

@CSchulz You can specify custom folders as { "glob": "**/*", "input": "../resources/", "output": "./resources/" }, Please see the story for more details https://github.com/angular/angular-cli/wiki/stories-asset-configuration

[CSchulz]

I was expecting that ../resources would be the short form like assets for { "glob": "**/*", "input": "./assets/", "output": "./assets/" }

I can't find anything special for assets in the https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/plugins/glob-copy-webpack-plugin.ts .

Why is there a different behavior?

[sumitarora]

@CSchulz These are passed as arguments to copy plugin https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/models/webpack-configs/common.ts#L56.

[CSchulz]

Yes for sure, but why is there different behavior?

[angular-automatic-lock-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.}