How to integrate external css and js in angular 2 and expressjs nodejs

Question

I am new to Angular2 and NodeJs. I just wanted to know possible way to integrate external css and js in angular2 and Nodejs express app. For example I want to integrate bootstrap admin theme in Nodejs. Below is screenshot attached for the reference of app structure.

Screenshot inside client folder angular2.

Screenshot for express Nodejs App.

Thanks. In advance.

Answer 1

To allow external styles to affect the content of components you can change view encapsulation (that's what prevents styles to "bleed into" components).

@Component({
    selector: 'some-component',
    template: '<div></div>',
    styleUrls: [
        'http://example.com/external.css',
        'app/local.css'
    ], 
})

Note: View encapsulation fulfills a purpose. The better way is to add styles directly to the component they should affect. ViewEncapsulation is set per component and may come handy in some situations. See also this related issue https://github.com/angular/angular/issues/5390

Example for script

    <head>
       <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.css" rel="stylesheet">
       <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.js"></script>
       <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', function () {
          var image = document.querySelector('#image');
          var cropper = new Cropper(image, {
            viewMode: 3,
            dragMode: 'move',
            autoCropArea: 1,
            restore: false,
            modal: false,
            guides: false,
            highlight: false,
            cropBoxMovable: false,
            cropBoxResizable: false,
            toggleDragModeOnDblclick: false,                                                  
          });
        });

      </script>

</head>

Note: the above links may vary according to JS libraries cdn links.

How to integrate external css and js in angular 2 and expressjs nodejs

Question

1 answers

solution1
0 2017-06-21 03:48:30

How to integrate external css and js in angular 2 and expressjs nodejs

Question

1 answers

solution1 0 2017-06-21 03:48:30

solution1
0 2017-06-21 03:48:30