PacktPublishing / ASP.NET-Core-2-and-Angular-5

ASP.NET Core 2 and Angular 5, published by Packt
MIT License
79 stars 75 forks source link

Logo.svg => Location / Configuration #41

Closed sbroskie closed 6 years ago

sbroskie commented 6 years ago

Hi, really basic here. In the book you mention adding logo.svg. The book only mentions pulling the one that was created but not where to put it in the project.

The sample solutions do not have this logo in them. Where should this logo be placed so that it gets propagated into the built application?

The image source in the app.component.html file referenced ./dist/res/img/logo.svg so that's where I put it. Obviously, I don't think WebPack knows to build/copy it over to the final wwwroot.

Where should it go and what needs to be configured to copy it into the final site build?

Thanks.

Darkseal commented 6 years ago

Hi there,

manually placing in wwwroot/dist/res/img/logo.svg does the trick for the book sample application.

It goes without saying that you can also place it in a /ClientApp/app/res/img/logo.svg folder (or any other folder of your choice) and then add a Webpack rule in the webpack.config.js file that will copy such folder in /wwwroot/dist/ using CopyWebpackPlugin in the following way:

...
...
var CopyWebpackPlugin = require('copy-webpack-plugin');
...
...
module.exports = {
    ....
    ...
    plugins: [
        ...
        ...
        new CopyWebpackPlugin([
            {from:'ClientApp/app/res',to:'dist/res'} 
        ]), 
    ...
    ]
...

This would arguably be the recommended approach when you have to deal with multiple resources.