CODEWITHSUNDEEP
javascriptcssangular
aipa
aipa

Reputation: 55

How to load 3rd party css only required pages in Angular2

I used pikaday.js and moment.js in Angular2.

In order to build with 3rd party libraries at Angular2, added script path to angular-cli.json.

I saw what how to build 3rd party library. Link is below.

https://github.com/angular/angular-cli#3rd-party-library-installation

I installed pikaday.js and moment.js.

$ npm install pikaday moment --save-dev

Then, I added scripts path, and css files path to angular-cli.json.

"app": [{ 
    "styles": [
      "styles.css",
      "../node_modules/pikaday/css/pikaday.css",
      "../node_modules/pikaday/css/site.css",
      "../node_modules/pikaday/css/theme.css",
      "../node_modules/pikaday/css/triangle.css",
    ],
    "scripts": [
      "../node_modules/pikaday/pikaday.js"
    ]
}]

That is success! angular-cli is really useful.

But, I found one problem.

Angular cli output 3rd party css that into html of the page using Angular2.

But there is a page that does not wanna use the library. Because, the page layout style was broken.

So, please tell me how to resolve this problem.

Thank you for any help you can provide.

Edit

I modified my component. below.

import {Component, OnInit, Input, ElementRef, ViewEncapsulation} from '@angular/core';
const pikaday = require('../node_modules/pikaday/pikaday');
const pikadayStyle = require('../node_modules/pikaday/scss/pikaday.scss');

@Component({
    selector: '[appDatePicker]',
    template: '',
    styleUrls: [pikadayStyle],
    encapsulation: ViewEncapsulation.None
})

export class DatePickerComponent {
    // implement
}

Thank you VadimB.

Upvotes: 1

Views: 765

Answers (1)

VadimB
VadimB

Reputation: 5711

I'm not sure if my solution can solve your particular problem as it depend how this library is structured inside, but for me this was a solution - I used require module loader;

var app = require('some-non-ES6-library');

Just try this first.

<script>
    System.amdRequire();
    System.amdDefine();
    System.config({
      ...
    });
  </script>

Upvotes: 0

Related Questions