각도 SystemJS는 .html 파일에 확장자를 추가해야합니다.

Question

저는 Typescript를 사용하여 간단한 Angular Application을 구축하고 있습니다. 나는 그것을 만들기 위해 꿀꺽 꿀꺽 삼키는 것을 사용하고 있습니다. 각 구성 요소의 HTML 및 CSS 파일을 별도의 파일로 저장하려고합니다.

예 :이 같은 파일을 포함하고있어

components 
    - app.component.ts 
    - app.component.html 
    - app.component.scss 

app.component.ts

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: require('./app.component.html') 
}) 
export class AppComponent { } 

문제가있다을로드하려고하고있는 파일 ./app.component.html.js은 네트워크 도구의 chrome에 표시되어 있습니다. 난 내 브라우저에서 요청 된 URL을 열고 끝에 의 .js에게을 제거하면 Chrome Network-Tools Request

파일이 올바르게 표시됩니다.

systemjs.config.js

(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
     'app':      '', // 'dist', 
     '@angular':     'libs/@angular', 
     'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api', 
     'rxjs':      'libs/rxjs' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app':      { main: 'main.js', defaultExtension: 'js' }, 
     'rxjs':      { defaultExtension: 'js' }, 
     'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' } 
    }; 
    var ngPackageNames = [ 
     'common', 
     'compiler', 
     'core', 
     'forms', 
     'http', 
     'platform-browser', 
     'platform-browser-dynamic', 
     'router', 
     'router-deprecated', 
     'upgrade' 
    ]; 
    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
     packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
     packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
    // Most environments should use UMD; some (Karma) need the individual index files 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 
    var config = { 
     map: map, 
     packages: packages 
    }; 
    System.config(config); 
})(this); 

내가 구성 요소에 직접 HTML과 CSS를 저장하고있어 경우는, 모든 것이 기대 작품으로.

templateUrl: 'components/app.component.html', styleUrls: ['components/app.component.css']

그리고 당신은 구성 요소에 상대적인 경로를 만드는 대신 응용 프로그램을 기준으로 할 수 있습니다

Project Structure

Answer 1

cheatsheet구성 요소 구성 장에 따르면 당신은 다음과 같은 외부 HTML과 CSS를 전달할 수 있습니다 루트에 moduleId: module.id에 @Component 지시문을 추가합니다.

@Component({ moduleId: module.id, selector: 'my-app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] })

당신은 자세한 설명 here을 찾을 수 있습니다.

하지만 CSS를 사용하기 전에 sass 파일을 변환하는 방법을 관리해야합니다.