1

I have a hybrid environment with both Angular 1.x and Angular 7 routes. The Angular 1.x routes are using old bootstrap 3, while the Angular 7 should use bootstrap 4. I tried to encapsulate bootstrap 4 only for the Angular 7 routes by importing it

@import "../../../node_modules/bootstrap/scss/bootstrap.scss";

inside the component

styles: [`    
    @import '../../../node_modules/bootstrap/dist/css/bootstrap.css';
  `]

but I keep getting

ERROR in Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): TypeError: Cannot read property 'replace' of undefined at normalizeBackSlashDirection (C:\Users...\RequestShortener.js:16:17) at new RequestShortener (C:\Users...\RequestShortener.js:26:15) at new Compiler (C:\Users\r...\Compiler.js:185:27) at Compiler.createChildCompiler (C:\Users...\Compiler.js:508:25) at Compilation.createChildCompiler (C:\Users...\Compilation.js:2494:24) at Object.pitch (C:\Users...\mini-css-extract-plugin\dist\loader.js:70:43) The only option that worked was to directly import the css to the module by adding the following to the top of the component:

import '../../../node_modules/bootstrap/dist/css/bootstrap.css';

but then bootstrap 4 overrides bootstrap 3 classes and breaks my Angular 1.x styling.

Helpppp

Rony Fragin
  • 126
  • 9

2 Answers2

0

I think that you can use styleUrls: [], inside your component.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss', '../../node_modules/bootstrap/dist/css/bootstrap.css'],
})
joka00
  • 2,357
  • 1
  • 10
  • 27
0

IMO you can not have both 3 & 4 without conflicts.

I have a hybrid environment with both Angular 1.x and Angular 7 routes

why would you need this in the first place?

papastepan
  • 179
  • 9
  • I'm working on a big app and gradually upgrading it to Angular 7. I want to override 3 with 4 only for the Angular 7 code. – Rony Fragin Mar 13 '19 at 10:25