Angular2 - テンプレート/スタイルファイルが別々のライブラリコンポーネント

Question

私は（現在）単一のコンポーネントでサードパーティのモジュールを開発中です。現在、私は@Component注釈でテンプレートと比較的長いスタイルのルールをインラインに持っていますが、これは管理不能になっています。私は別のファイル（.component.html）にコードを分割しようとしましたが、ビルドプロセスを実行し、テストアプリケーション内のコンポーネントをテンプレート404で使用しようとしました。

1. ビルドステップでテンプレートのコンテンツをコンポーネント注釈に挿入しても、テンプレートを別のファイルに分割することはできますか。
2. CSSで同じことを実行できますか？
3. CSSをSCSSに置き換えて、コンポーネントアノテーションにコードを挿入する前にCSSをコンパイルする方法はありますか？

参考のため、以下の設定ファイルを含めます。他に役立つ情報があればお知らせください。アプリの一般的な構造はthis resource（Github repository for the library）から変更されていません。私はリポジトリを複製し、参照を削除/置換してベースを形成することによってプロジェクトを作成しました。

編集 可能であれば私はまた、ビルドプロセスにがぶ飲みを統合することを避けるために希望がthis SO linkを見てきました。

// package.json scripts 

"scripts": { 
    "cleanup": "rimraf dist/bundles dist/src dist/index.d.ts dist/index.js dist/index.js.map dist/LICENCE dist/README.md", 
    "bundling": "rollup -c", 
    "minify": "uglifyjs dist/bundles/ic-datepicker.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/async-local-storage.umd.min.js", 
    "copy": "copyfiles LICENSE README.md dist", 
    "build": "npm run cleanup && ngc && npm run bundling && npm run minify && npm run copy" 
    }, 

// rollup.config.js 
export default { 
    entry: 'dist/index.js', 
    dest: 'dist/bundles/ic-datepicker.umd.js', 
    sourceMap: false, 
    format: 'umd', 
    moduleName: 'ng.icDatepicker', 
    globals: { 
    '@angular/core': 'ng.core', 
    '@angular/common': 'ng-common', 
    'rxjs/Observable': 'Rx', 
    'rxjs/ReplaySubject': 'Rx', 
    'rxjs/add/operator/map': 'Rx.Observable.prototype', 
    'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype', 
    'rxjs/add/operator/pluck': 'Rx.Observable.prototype', 
    'rxjs/add/operator/first': 'Rx.Observable.prototype', 
    'rxjs/add/observable/fromEvent': 'Rx.Observable', 
    'rxjs/add/observable/merge': 'Rx.Observable', 
    'rxjs/add/observable/throw': 'Rx.Observable', 
    'rxjs/add/observable/of': 'Rx.Observable' 
    } 
} 

// tsconfig.json 
{ 
    "compilerOptions": { 
    "baseUrl": ".", 
    "declaration": true, 
    "stripInternal": true, 
    "experimentalDecorators": true, 
    "strictNullChecks": true, 
    "noImplicitAny": true, 
    "module": "es2015", 
    "moduleResolution": "node", 
    "paths": { 
     "@angular/core": ["node_modules/@angular/core"], 
     "rxjs/*": ["node_modules/rxjs/*"] 
    }, 
    "allowSyntheticDefaultImports": true, 
    "rootDir": ".", 
    "outDir": "dist", 
    "sourceMap": true, 
    "inlineSources": true, 
    "target": "es5", 
    "skipLibCheck": true, 
    "lib": [ 
     "es2015", 
     "dom" 
    ] 
    }, 
    "files": [ 
     "index.ts" 
    ], 
    "angularCompilerOptions": { 
    "strictMetadataEmit": true 
    } 
} 

編集

// Component decorator 
@Component({ 
    selector: 'ic-datepicker', 
    encapsulation: ViewEncapsulation.None, 
    template: ` 
    <!-- HTML Template --> 
    `, 
    styles: [` 
    // CSS styles 
    `] 
}) 

私はコンポーネントクラスと同じレベルでのHTMLファイルである、templateUrl: './ic-datepicker.component.html'でtemplateを交換するとき、私はこれをインポートアプリで次のエラーを取得しますモジュール（ビルド後）。

​​

Answer 1

のようなあなたのhtmlへのフルパスを指定してみてください：

// Component decorator 
@Component({ 
    selector: 'ic-datepicker', 
    encapsulation: ViewEncapsulation.None, 
    templateUrl: "approot/ic-datepicker.component.html" 
})