CODEWITHSUNDEEP
angularangular-cli
Manspof
Manspof

Reputation: 357

Angular cannot load assets folder with angular-cli

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"

    ],

Upvotes: 0

Views: 6082

Answers (2)

Manzer A
Manzer A

Reputation: 3806

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.

Upvotes: 0

malifa
malifa

Reputation: 8165

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.

Upvotes: 2

Related Questions