如何在Angular2中加载仅第三方的CSS页面

Question

我在Angular2中使用了pikaday.js和moment.js。

为了在Angular2使用第3方库进行构建，请将脚本路径添加到angular-cli.json 。

我看到了如何建立第三方图书馆。 链接在下面。

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

我安装了pikaday.js和moment.js。

$ npm install pikaday moment --save-dev

然后，我将脚本路径和css文件路径添加到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"
    ]
}]

那就是成功！ angular-cli非常有用。

但是，我发现了一个问题。

Angular cli使用Angular2将第3方CSS输出到页面的html中。

但是有一个页面不想使用该库。 因为，页面布局样式已损坏。

因此，请告诉我如何解决此问题。

感谢您提供任何帮助。

编辑

我修改了组件。 下面。

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
}

谢谢VadimB。

Answer 1

我不确定我的解决方案能否解决您的特定问题，因为它取决于该库的内部结构，但是对我来说，这是一个解决方案-我使用了require模块加载器；

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

请先尝试一下。

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