(Still new to Angular and need help please...)

---

Problem
-------

I'm using the latest, as of Feb 2018, Angular 5.2.1 and its CLI 1.7.0.

If I try to include PrimeNg in my project, I get failures (from webpack, I think):

Errors similar to this:

```
ERROR in ........ CssSyntaxError: <my_path>/node_modules/primeng/resources/primeng.css:5542:16: Can't resolve './images/line.gif'

```

---

How I Got to This Error
-----------------------

First, I install the components:

```
npm install --save font-awesome primeng

```

I included PrimeNg in my **styles.scss**, like this:

```
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

@import "~primeng/resources/themes/omega/theme.scss";
@import "~primeng/resources/primeng";

// rest of my styles.scss

```

And, run the server as normal:

```
ng serve

```

Errors will be thrown now!

---

A Very Ugly "Solution"
----------------------

I fixed this issue by some hacking of the primeng files (taking inspiration from how font-awesome does url paths), to use variables to point to the correct paths.

In my **styles.scss**:

```
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

$MYNEWfont-omega-path: "~primeng/resources/themes/omega/fonts";
$MYNEWimage-omega-path: "~primeng/resources/themes/omega/images";
@import "~primeng/resources/themes/omega/theme.scss";

$MYNEWimage-path: "~primeng/resources/images";
@import "~primeng/resources/primeng";

// rest of my styles.scss

```

Then, change one PrimeNg file name, so I can treat it as an scss file with variables:

```
mv node_modules/primeng/resources/primeng.css node_modules/primeng/resources/primeng.scss

```

And, edit two files (and/or whichever theme files you want to use):

```
node_modules/primeng/resources/primeng.scss
node_modules/primeng/resources/themes/omega/theme.scss

```

to make use of the new variables I created where-ever I find "url". For example, in the newly named **primeng.scss**:

```
-     background: transparent url("images/color.png")
+     background: transparent url("#{$MYNEWimage-path}/color.png")

```

And, all works fine! :-)

---

What Would be a Simple and Correct Solution?
--------------------------------------------

I've seen many possible (I don't really know, as they are not explained or clear), that suggest using webpack config, [resolve-url](https://www.npmjs.com/package/resolve-url-loader), or something that can maybe be found in the [primeng quickstart](https://github.com/primefaces/primeng-quickstart-webpack).

All of these, I do NOT understand, because (again, being new to Angular) I really haven't encountered webpack configuration yet.

So...
**Can someone please give me a quick/simple solution, or pointer to something that has a clear explanation of how to figure out a solution?**

I suspect there are a few areas (of the tool-chain) I should learn to understand how to do this, seemingly, simple include. So, would appreciate pointers on what I need to learn, if that's the only way I can understand the problem and its solution.

Thanks!