How to add external CSS files - styleUrls - Angular 5 component

Question

I have an Angular 5 application in a subdirectory of another parent application.

The parent application is a set of JSP, and other angularJs applications... etc.

What I'm trying to do is include a CSS file, from this parent application, into a component of the Angular 5 application.

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: [....] //Here
})

Is it possible ?

I looked at this question : Load external css style into Angular 2 Component already asked, but it does not correspond to my case.

Thanks for your help

Is the css file available at build time? Or just at runtime, once the application is embedded — David, Apr 13 '18 at 15:30
That's the same principle, you can either add in in `styleUrls` array in the component, or in `.angular-cli` styles setting if you are using it. You just need to provide the correct relative path — David, Apr 13 '18 at 16:42

score 5 · Answer 1 · answered Apr 13 '18 at 14:48

5

Try the following:

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['my-form.css']
})

Your file will be a SCSS file: myform.scss.

And then you can import an external css file like this:

@import "my-external-stylesheet.css"; // this on the top of `my-form.scss`

answered Apr 13 '18 at 14:48

SrAxi

19,787
11
46
65

1

"What I'm trying to do is include a CSS file, from this parent application, into a component of the Angular 5 application", means that you want to include an external CSS file into an Angular component. Therefore if you include the CSS file to the component's SCSS file... Isn't that what you want? Maybe I'm missing something... – SrAxi Apr 13 '18 at 19:53

Malcor · Accepted Answer · 2018-04-13T15:29:49.153

3

In the .angular-cli.json file of your child application look for the styles property of your app. Add the path to your parent CSS in there.

Here is an example of the JSON config.

 "apps": [
    {
      "styles": [
        "../../../../apec-template-bootstrap-responsive/src/main/resources/css/old-apec.css",
        "styles.css"
      ],
    }
  ],

This should give your child application any style you require from the parent.

edited Apr 13 '18 at 15:29

answered Apr 13 '18 at 14:51

Malcor

2,667
21
29

1

I have this error when using this : *Module not found: Error: Can't resolve* '...path to my css...' in '... path to my angular 5 app...' – L Y E S - C H I O U K H Apr 13 '18 at 15:19
you've set your path wrong. The path is relative to the location of the `.angular-cli.json` file. – Malcor Apr 13 '18 at 15:21
And whats the path you have in your styles array? – Malcor Apr 13 '18 at 15:25
and the absolute path for the css file you're trying to add? – Malcor Apr 13 '18 at 15:27
Updated my answer. – Malcor Apr 13 '18 at 15:30
I may have missed one more `../` sorry I can't offer more than, the path is incorrect, make it correct. That way will work, you just need to get the right path. – Malcor Apr 13 '18 at 15:37

score 2 · Answer 3 · answered Apr 13 '18 at 14:50

2

your styleUrls can be the default one:

styleUrls: './my-form.component.css'

while in your my-form.component.css you can import the CSS files you want:

@import ".../component.css";

answered Apr 13 '18 at 14:50

Gabax

124
2
11

How to add external CSS files - styleUrls - Angular 5 component

3 Answers3