Angular-cli: Best place to put assets folder?

[sharpmachine]

Just wondering where you guys would recommend putting an assets (images, global styles, etc) folder?

[diegochavez]

The right place to put that type of content is the public directory.

[hansl]

There's a public/ directory in the root that gets copied as is and overwrite files if needed.

[dancancro]

Hi @hansl and @diegochavez would either of you be interested in spelling out the prescribed placement of _all_ types of code for angular-cli projects? I have profiled a few different approaches in this spreadsheet and could add a column for angular-cli
https://docs.google.com/spreadsheets/d/1I6VZNgnodju5KO3C07Ut3GLDvpZVYh0pBlUf2jYDsV0/edit#gid=1103163354

[sharpmachine]

What if your global styles are scss files? They would need to be complied...so if the public directory really the best place for those?

[diegochavez]

No problem at all public support sass compilation, I'm importing bootstrap-sass on a file and everything is working fine.

[sharpmachine]

So I moved my images and stylesheets asset folder into public and assets/images/ is not being copied to the dist/public/assets.

[diegochavez]

Looks like is a new issue

public directory only keep the CSS files but the assets folder is ported to the app as localhost:4200/assets/images/example.jpg this is a weird behavior right guys?

Examples
public/assets/images/ = assets/images/ public/styles/main.scss = public/styles/main.css

not compiling sass
public/assets/styles/main.scss = assets/styles/main.scss

[sharpmachine]

I feel like there shouldn't be any .scss files in dist at all...only complied files. If I'm using SASS for components, those are complied to CSS in dist and their .scss source is not copied over to dist. Seems like the same should apply for .scss files in public.

And there's still the issue of not compiling .scss partials, ex: _footer.scss.

[thorsten]

Same issue here, public/styles/app.scss will be copied to dist/assets/styles/app.scss and dist/public/assets/styles/app.css

[a5hik]

Guys, any update on this. I'm facing the same issue !

[dannyk08]

// my build
angular-cli: 1.0.0-beta.6
node: 4.1.2
os: darwin x64

@diegochavez's examples helped, I was able to get my styles and images to pull correctly
I think my angular cli version just published assets in the public folder as that assets

// my file structure
public
|--assets
|--|--images
|--|--|--loading-boxes.gif
|--|--styles
|--|--|--global-styles.css

// and this is in my index.html 
<img class="loading-gif" src="/assets/images/loading-boxes.gif" alt="loading screen">
<link rel="stylesheet" href="/assets/styles/global-styles.css">

[brendanalexdr]

I am not able to get this to work. For example,

<script type="text/javascript" src="/assets/lib/js-cookie/js-cookie.js"></script>

gives me

Cannot GET /assets/lib/js-cookie/js-cookie.js

What am I doing wrong?

[filipesilva]

@nukuuk can you open a new issue if you're still experiencing problems?

[brendanalexdr]

@filipesilva sorry I didn't follow-up sooner, I was able to solve the problem: it was a typo, instead of putting "js.cookie.js" I put "js-cookie.js"

[ustaDAH]

I am using angular-cli 1.0.0-beta.14 ng build --env=prod does NOT copy the /src/public (or /public) folder onto /dist. Is one supposed to manually add that step?

I moved favicon.ico to /src/public folder (NB I had tried /public too) and changed index.html reference too - just to have all my other assets also in the same folder. I think the generator should not put favicon.ico in the root of the project if it won't handle it properly.
But I am still explicitly copying the /src/public to /dist

[ustaDAH]

FYI turns out /src/assets folder is copied on to /dist
Rather the angular-cli.json folder has the property 'assets' that names the folder for assets and it happens to be assets by default

[dolanmiu]

Refer to the below for an updated answer for 1.0.0-beta.14:

https://github.com/angular/angular-cli/issues/2126

[CyberGolem]

The public folder wasn't created when the directory was initiated (ng new project-name). I manually created a folder (via right-click > add folder) but when things are put into it like a styles.css file, it was ignored. Even if I spelled out a complete path to it. How do I create it so it's properly recognized for use?

[filipesilva]

@CyberGolem the public/ folder was used in a much older version of the CLI. Nowadays you can use the src/assets/ folder as described in https://github.com/angular/angular-cli#project-assets.

[zakhenry]

Updated link to the wiki https://github.com/angular/angular-cli/wiki/stories-asset-configuration

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