Best place to put assets folder?

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

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

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

@hansl

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

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?

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

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

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

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.

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

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

@diegochavez

// 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">

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?

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

@filipesilva

@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"

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

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

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

#2126

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?

@CyberGolem

@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.

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

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

Navigation Menu

Repository navigation

Best place to put assets folder? #713

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Best place to put assets folder? #713

Description

Activity

diegochavez commented on May 10, 2016

hansl commented on May 11, 2016

dancancro commented on May 11, 2016

sharpmachine commented on May 11, 2016

diegochavez commented on May 11, 2016

sharpmachine commented on May 11, 2016

diegochavez commented on May 12, 2016

sharpmachine commented on May 12, 2016

thorsten commented on May 13, 2016

a5hik commented on Jun 13, 2016

danieljoffe commented on Jun 22, 2016

brendanalexdr commented on Aug 15, 2016

filipesilva commented on Aug 22, 2016

brendanalexdr commented on Aug 22, 2016

ustaDAH commented on Sep 19, 2016

ustaDAH commented on Sep 21, 2016

dolanmiu commented on Sep 28, 2016

CyberGolem commented on Jan 28, 2017

filipesilva commented on Jan 28, 2017

zakhenry commented on Mar 7, 2017

angular-automatic-lock-bot commented on Sep 6, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions