ファイル数が少なくても角2の誤差

Question

私は、SystemJSでAngular 2プロジェクトに取り組んでいます。

私は、角度2のクイックスタートチュートリアルから始まり、less filesに変更しました。

systemjs.config.js

(function() { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      // ... 
      'css': 'npm:systemjs-plugin-css', 
      'less': 'npm:systemjs-plugin-less', 
      'lesscss': 'npm:less' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 

      lesscss: { 
       main: { 
        browser: './dist/less.min.js', 
        node: '@node/less' 
       } 
      }, 
      css: { 
       main: 'css.js' 
      }, 
      less: { 
       main: 'less.js' 
      } 
     }, 
     meta: { 
      '*.less': { loader: 'less' } 
     } 
    }); 
})(this); 

私はあまりプラグインをインストールしたファイルをロードしているが、私はエラーを取得：

Error: (SystemJS) Expected 'styles' to be an array of strings.

login.component.ts

import { Component } from '@angular/core'; 
import { Router }  from '@angular/router'; 

import { DwhService } from '../../theme/services/dwh.service' 

@Component({ 
    moduleId: module.id, 
    selector: 'login', 
    templateUrl: 'login.component.html', 
    styles: [require('./login.component.less')] 
}) 

export class LoginComponent implements OnInit { 

    user: string = ""; 
    password: string = ""; 

    loginPattern:Object = { 

    }; 

    loginData:Object = {}; 

    constructor(public dwhService:DwhService, public router: Router){ 

    } 

    ngOnInit() : void { 
     this.dwhService.json(this.loginPattern).toPromise().then(ret => { 
      $.extend(true, this.loginData, ret); 
     }); 
    } 

    login():void{ 
     // ... 
    } 
} 

回避策が見つかりましたが、less/cssファイルのローダーを設定することは可能ですか？ 私はすべて* .less輸入に（）文字列を追加したいいけない：

styles: [String(require('./login.component.less'))]

Answer 1

SystemJSあなたはstyleUrlsを使用する場合は、相対リンクをロードすることができるはずです。

@Component({ 
    moduleId: module.id, 
    selector: 'login', 
    templateUrl: 'login.component.html', 
    styleUrls: ['./login.component.less'] 
})