Angular2 - Library component with separate template/style files

Question

I'm working on a third party module with (currently) a single Component. Currently I have the template and the relatively lengthy style rules inline in the @Component annotation however this is becoming unmanageable. I have tried breaking the code out into separate files ( .component.html ) however when I run the build process and attempt to use the component within my test application the template 404s.

1. Can I break the template out to a separate file (even if a build step inserts the template's content into the Component annotation).
2. Can I do the same with the CSS?
3. Is there a way I can replace the CSS with SCSS, and have it compile that CSS prior to inserting the code into the Component annotation?

For reference I'll include the configuration files below, please let me know if anything else would be helpful!. The general structure of the app is unchanged from this resource ( Github repository for the library ). I created the project by cloning the repository and removing/replacing references to form a base.

Edit I have seen this SO link however if possible I would like to avoid having to also integrate gulp into the build process.

// 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
  }
}

Edit

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

When I replace the template with templateUrl: './ic-datepicker.component.html' , which is a HTML file at the same level as the component class, I get the following error in the app that imports this module (post build);

Answer 1

Try specifying the full path to your html as such:

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