Angular 4 - Not use styles from angular-cli.json

Question

I have an angular 4 application where I have the global styles and scripts in angular-cli.json. Then I worked separately on the Landing page. After I turn the landing page into an angular component, I add all its styles in angular-cli.json as well. And now my landing page's bootstrap conflicts with global bootstrap in node_modules and my application breaks.

Currently angular-cli.json looks like this:

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "./dist/css/landing/bootstrap.min.css",
    "./dist/css/landing/font-awesome.min.css",
    "styles.css",
    "./dist/css/AdminLTE.min.css",
    "./dist/css/skins/_all-skins.min.css",
    "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
    "../node_modules/froala-editor/css/froala_style.min.css"
  ],

This is in landing.component.ts:

import { Component, OnInit } from '@angular/core';

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

export class LandingComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

I am almost missing my deadline, I can not resolve the conflicts between two huge css files. I was wondering if I could keep my Landing Page styles separated from application styles. Any help will be largely appreciated. Thank you.

Answer 1

You could try encapsulate your landing page as follows.

ViewEncapsulation.Native will wrap your component and its styles within a shadow root. Change your component style file to scss and import those styles in component style file and delete them from .angular-cli.json .

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss'],
  encapsulation: ViewEncapsulation.Native 
})

export class LandingComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

landing.component.scss

@import '<path-to-dist>/dist/css/landing/bootstrap.min.css';
@import '<path-to-dist>/dist/css/landing/font-awesome.min.css';

When you inspect DOM, you'll see app-landing as encapsulated.

Edit

Alternatively, you can use ViewEncapsulation.Emulated which is default (you do not have to set it within metadata). What this will do is to create custom attributes with all the styles and add those attributes to your markup as well. Shadow DOM may not be supported in some browsers. Try both and if Emulated works for you, use that.