How to properly include CSS/JS in an Angular distribution

Question

I'm trying to implement an Admin Template I used in my classic PHP application in a new Angular project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" sizes="16x16" href="/plugins/images/favicon.png">
    <title>Ample Admin Template - The Ultimate Multipurpose admin template</title>
    <link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/colors/blue-dark.css" id="theme" rel="stylesheet">      
</head>
<body>
  <app-root></app-root>
</body>
</html>

The application is properly rendered by now I have some questions:

How can I include these CSS/JS package (and all the dependencies) in an Angular distribution?
What is the proper way to includes external CSS/libraries in Angular?

take a look at this SO answer!

Tcraw
– Tcraw

2018-01-29 17:46:17 +00:00
Commented Jan 29, 2018 at 17:46 — Tcraw
– Tcraw, Commented Jan 29, 2018 at 17:46

Tcraw · Accepted Answer · 2018-01-29 18:27:17Z

2

Top-Level Styles

If the styling items you have shown in the <head> tag are meant to be top-level styles (as opposed to component styles: Angular Components Styling), add the file references in your angular-cli.json file under the "styles" property.

This SO answer has an example: Angular - including CSS file in index.html.

You can place as many files into the "styles" array as you would like -- these will be added to a styling bundle when Webpack runs on your application's initialization, which will then be placed in the index.html's <head> tag.

Webpack

If you need some information on how Webpack is used in Angular or how to configure it, the Angular Documentation site has a solid explanation.

External CSS Libraries

For "external CSS/libraries" you may use the styleUrls property in your Components. You can review the Component Styles Angular Documentation information here.

edited Jan 29, 2018 at 18:27

answered Jan 29, 2018 at 17:50

Tcraw

2741 silver badge11 bronze badges

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

Collectives™ on Stack Overflow

How to properly include CSS/JS in an Angular distribution

1 Answer 1

Top-Level Styles

Webpack

External CSS Libraries

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Top-Level Styles

Webpack

External CSS Libraries

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related