0

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

net: ERR_ABORTED

enter image description here

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"

    ],
2
  • 1
    read up on how to include assets / external scripts / stylesheets in angular.cli. Take a look at the .angular-cli.json Commented Nov 6, 2017 at 19:42
  • it is under assets/fonts/fonts.css Commented Nov 6, 2017 at 19:44

2 Answers 2

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.

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

13 Comments

hey, what to write into assets? the whole path to assets?
the relative path from the angular-cli.json to your specific file / folder
@AdirZoari Edited the example above
Wait a moment, for fonts.css it has to go to the styles array, i will edit it once again to make it clearer
really I need to do for each style I want to include from assets??
|
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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.