CODEWITHSUNDEEP
cssangular
Doomenik
Doomenik

Reputation: 866

Angular 2 keeps style from one component to the next

I got a small problem, I define my components like this: 

@Component({
    selector: 'documents',
    styleUrls: ['./documents.scss', '../../../../node_modules/primeng/resources/primeng.min.css', '../../../../node_modules/primeng/resources/themes/omega/theme.css', '../../../../node_modules/font-awesome/css/font-awesome.min.css'],
    templateUrl: './documents.html',
    encapsulation: ViewEncapsulation.None,
    providers:[

    ],
})

Inside my css files I have sometimes the same name for classes e.g.

//CSS 1 
.boxHeader {
  position: absolute
  background-color: red;
}
//CSS 2
.boxHeader {
  background-color: blue;
}

So if I open the components directly its working like excepted, only css1 or css2 gets loaded. The problem is if the user navigates between them, angular keeps the css files of the previous one. The result if I navigate from 1 to 2 is this:

//CSS 2
.boxHeader {
  position: absolute; //This one gets inserted from CSS1
  background-color: blue; //This one gets overwritten
}

Is there a way to tell ngOnDestroy() to delete all style references ?

EDIT This way I bound it:

"styles": [
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
        "../node_modules/normalize.css/normalize.css",
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/ionicons/scss/ionicons.scss",
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/leaflet/dist/leaflet.css",
        "../node_modules/chartist/dist/chartist.css",
        "../node_modules/fullcalendar/dist/fullcalendar.css",
        "../node_modules/handsontable/dist/handsontable.full.css",
        "../node_modules/ng2-slim-loading-bar/style.css",
        "../node_modules/primeng/resources/primeng.min.css", //new
        "../node_modules/primeng/resources/themes/omega/theme.css", //new
        "app/theme/theme.scss",
        "styles.scss"
      ],

The comments are not inside, this little Error it returns now:

Error: Expected 'styles' to be an array of strings.

Upvotes: 1

Views: 762

Answers (1)

brijmcq
brijmcq

Reputation: 3418

Don't insert your css links inside your styleUrls, it should only include css for that specific components only. From your code it should only contain the documents.scss.

For your primeng and font awesome styles, insert it in your index.html or you can insert it in your angular-cli.json

I.e

 "styles": [
     "styles.css",
    "../node_modules/primeng/resources/primeng.min.css", 
    "../node_modules/primeng/resources/themes/omega/theme.css", 
    "../node_modules/font-awesome/css/font-awesome.min.css"
      ],

Also, remove the ViewEncapsulation.None as it will leak your css to other components, unless if that is what you want.

Update 1

If you are getting this error

Error: Expected 'styles' to be an array of strings.

The error is how you define your styleUrl. Try this

styleUrls: ['./documents.scss']

instead of just a string.

Upvotes: 2

Related Questions