Angular-cli: ng eject breaks asset loading

[lifenautjoe]

Versions

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.6 (e)
Node: 8.1.2
OS: darwin x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.6
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.6
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack-dev-server: 2.11.1
webpack: 3.10.0

Repro steps

Step 1

Include an asset

app/index.html

// ..
                <img src="/assets/images/logo.png">
// ..

Step 2

Run ng serve

ng serve

Step 3

Observe the image is loaded correctly

Step 4

Eject the project

ng eject

Step 5

Run the project with the npm command

npm start

Observed behavior

The image is no longer loaded correctly.

logo.png:1 GET http://localhost:4200/assets/images/logo.png 404 (Not Found)

Desired behavior

The image is loaded in the same manner that the unejected project does.

EDIT

I have pinpointed the issue.
The ng eject command creates the given CopyWebpackPublic config

new CopyWebpackPlugin([
            {
                "context": "src",
                "to": "",
                "from": {
                    "glob": "src/assets/**/*",
                    "dot": true
                }
            },
            {
                "context": "src",
                "to": "",
                "from": {
                    "glob": "src/favicon.ico",
                    "dot": true
                }
            }
        ], {
            "ignore": [
                ".gitkeep",
                "**/.DS_Store",
                "**/Thumbs.db"
            ],
            "debug": "warning"
        })

The problem is that the paths for assets and favicon.ico now contain the src/ directory.
When renaming them to "assets/**/*" and "favicon.ico" it all works.

[bampakoa]

I can confirm that it also happens in 1.6.7

[dragouf]

any fix ?

edit: ok, the fix was to remove 'src' from grlob path:

"from": {
      "glob": "src\\assets\\**\\*",
      "dot": true
}

to

"from": {
      "glob": "assets\\**\\*",
      "dot": true
}

[keego]

Just hit this with cli 1.6.7 as well; fixes mentioned above worked for me 👏

[clydin]

eject functionality is no longer available in the latest version (6.x+). For custom webpack configurations the following unofficial add-on is a suggested solution: https://github.com/manfredsteyer/ngx-build-plus

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