Angular cannot load assets folder with angular-cli

Question

Opened a new angular 4 project and I'm trying to load my assets folder and I get error

net: ERR_ABORTED

I'm trying to get fonts.css or any file from the assets folder and I get this error. what I'm doing wrong?

I tried this way and I still the project not compile

  "styles": [
        "styles.css",
        "assets/fonts/fonts.css",
        "assets/stylesheets/ionicons.min",
        "assets/stylesheets/fonts/fonts.css",
        "assets/stylesheets/bootstrap.css",
        "assets/stylesheets/isotope.css",
        "assets/stylesheets/venobox.css",
        "assets/stylesheets/sinister.css",
        "assets/stylesheets/slimmenu.css",
        "assets/stylesheets/main.css",
        "assets/stylesheets/main-bg.css",
        "assets/stylesheets/main-responsive.css"

    ],

read up on how to include assets / external scripts / stylesheets in angular.cli. Take a look at the .angular-cli.json — malifa
– malifa, Commented Nov 6, 2017 at 19:42

malifa · Accepted Answer · 2017-11-06 20:09:17Z

2

During your build process with angular-cli a production folder is created, therefore your path to local files (like assets, fonts, stylesheets or plugins / scripts) will change.

Angular CLI has a build in way to handle this, by specifiying these paths in the .angular-cli.json.

There you will find a part that looks like this:

...
"apps": [
    {
        "root": "src",
        "outDir": "dist",
        "assets": [
            "favicon.ico",
            // place the relative paths to your assets, like images, here
        ],
        "styles": [
            "assets/fonts/fonts.css"
        ],
        "scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "assets/javascript/libs/common.js"
        ],
        ...
     }
  ],
  ...

Hope it helps.

Update: Using wildcards / globs for including multiple stylesheets in a certain folder is not possible:

We're not looking at adding glob support to styles, because loading order is relevant. Instead, just make a single file that imports everything in the order you want and put that in the styles array. Source: https://github.com/angular/angular-cli/issues/3069

As suggested, you should look into SASS or LESS, create one main stylesheet which includes all of your stylesheets in the correct order, and include the generated css file.

edited Nov 6, 2017 at 20:09

answered Nov 6, 2017 at 19:47

malifa

8,1552 gold badges44 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Manspof Over a year ago

hey, what to write into assets? the whole path to assets?

malifa Over a year ago

the relative path from the angular-cli.json to your specific file / folder

malifa Over a year ago

@AdirZoari Edited the example above

malifa Over a year ago

Wait a moment, for fonts.css it has to go to the styles array, i will edit it once again to make it clearer

Manspof Over a year ago

really I need to do for each style I want to include from assets??

|

Manzer A · Accepted Answer · 2017-11-06 22:34:41Z

0

Try to write your `css`  in `styles.css` and in `component.css`

However, if you want to use external css library like bootstrap then install it with npm and pass reference in angular-cli.json styles section.

answered Nov 6, 2017 at 22:34

Manzer A

3,9266 gold badges41 silver badges79 bronze badges

Collectives™ on Stack Overflow

Angular cannot load assets folder with angular-cli

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related