angular - [ng-jhipster]: how to extend ng-library to load 'templateUrl' in component instead of 'template' -

i trying create angular 2 library. working on modifying , extending ng-jhipster library , adding code. using v0.1.10 of ng-jhipster lib. when create component (test.component) , using 'template' html code, lib works. when replace 'template' 'templateurl', got following errors:

 failed: uncaught (in promise): failed load test.component.html error: uncaught (in promise): failed load test.component.html     @ resolvepromise (webpack:///~/zone.js/dist/zone.js:486:0 <- config/spec-bundle.js:58238:31) [proxyzone]     @ resolvepromise (webpack:///~/zone.js/dist/zone.js:471:0 <- config/spec-bundle.js:58223:17) [proxyzone]     @ webpack:///~/zone.js/dist/zone.js:520:0 <- config/spec-bundle.js:58272:17 [proxyzone]     @ proxyzonespec.oninvoketask (webpack:///~/zone.js/dist/proxy.js:103:0 <- config/spec-bundle.js:57672:39) [proxyzone]     @ zonedelegate.invoketask (webpack:///~/zone.js/dist/zone.js:274:0 <- config/spec-bundle.js:58026:40) [proxyzone]     @ zone.runtask (webpack:///~/zone.js/dist/zone.js:151:0 <- config/spec-bundle.js:57903:47) [<root> => proxyzone]     @ drainmicrotaskqueue (webpack:///~/zone.js/dist/zone.js:418:0 <- config/spec-bundle.js:58170:35) [<root>]     @ xmlhttprequest.zonetask.invoke (webpack:///~/zone.js/dist/zone.js:349:0 <- config/spec-bundle.js:58101:25) [<root>] 

i modified both tsconfig , webpack.config.js still got same errors.

package.json:

{   "name": "ngx-test",   "description": "test library",   "main": "bundles/ngx-test.umd.js",   "module": "index.js",   "typings": "index.d.ts",   "peerdependencies": {     "@angular/core": "^2.0.0",     "@angular/http": "^2.0.0"   },   "devdependencies": {     "@angular/common": "2.4.1",     "@angular/compiler": "2.4.1",     "@angular/compiler-cli": "2.4.1",     "@angular/core": "2.4.1",     "@angular/forms": "2.4.1",     "@angular/http": "2.4.1",     "@angular/platform-browser": "2.4.1",     "@angular/platform-browser-dynamic": "2.4.1",     "@angular/platform-server": "2.4.1",     "@types/hammerjs": "2.0.34",     "@types/jasmine": "2.5.38",     "@types/node": "6.0.53",     "angular2-template-loader": "0.6.2",     "awesome-typescript-loader": "3.0.7",     "css-loader": "0.26.1",     "exports-loader": "0.6.3",     "image-webpack-loader": "3.2.0",     "style-loader": "0.13.1",     "to-string-loader": "1.1.5",     "codelyzer": "2.0.0-beta.4",     "core-js": "2.4.1",     "istanbul-instrumenter-loader": "1.2.0",     "jasmine-core": "2.5.2",     "karma": "1.3.0",     "karma-chrome-launcher": "2.0.0",     "karma-coverage": "1.1.1",     "karma-jasmine": "1.1.0",     "karma-mocha-reporter": "^2.1.0",     "karma-remap-coverage": "0.1.4",     "karma-sourcemap-loader": "0.3.7",     "karma-webpack": "1.8.1",     "loader-utils": "0.2.16",     "raw-loader": "0.5.1",     "reflect-metadata": "0.1.9",     "rxjs": "5.0.2",     "shx": "0.2.2",     "source-map-loader": "0.1.5",     "ts-helpers": "1.1.2",     "tslint": "4.2.0",     "tslint-loader": "3.3.0",     "typescript": "2.0.10",     "webpack": "2.2.0-rc.2",     "zone.js": "0.7.4",     "html-webpack-plugin": "2.28.0",     "add-asset-html-webpack-plugin": "1.0.2",     "string-replace-webpack-plugin": "0.0.5"   },   "version": "0.1.0",   "scripts": {     "lint": "tslint --project tslint.json",     "test": "npm run lint && karma start",     "test-watch": "karma start --singlerun=false --autowatch=true",     "ngc": "ngc",     "ngc-aot": "ngc -p tsconfig-aot.json",     "build": "webpack && shx cp bundles/ngx-test.umd.js bundles/index.js",     "prepublish": "ngc && npm run build && npm run test",     "release": "git push && git push --tags && npm publish",     "release-patch": "npm version patch -a -m \"update %s\" && npm run release",     "release-minor": "npm version minor -a -m \"update %s\" && npm run release",     "release-major": "npm version major -a -m \"update %s\" && npm run release"   } } 

tsconfig.json

{   "compileroptions": {     "target": "es5",     "module": "es2015",     "moduleresolution": "node",     "emitdecoratormetadata": true,     "experimentaldecorators": true,     "removecomments": false,     "declaration": true,     "nounusedlocals": true,     "suppressimplicitanyindexerrors": true,     "types": [       "hammerjs",       "jasmine",       "node"     ],     "lib": ["es2015", "dom"]   },   "exclude": [     "node_modules",     "bundles"   ],   "angularcompileroptions": {     "strictmetadataemit": true,     "skiptemplatecodegen": true   },   "awesometypescriptloaderoptions": {     "forkchecker": true,     "usewebpacktext": true   } } 

webpack.config.js

/**  * adapted angular2-webpack-starter  */  const helpers = require('./config/helpers'),     webpack = require('webpack'); const htmlwebpackplugin = require('html-webpack-plugin'); const stringreplaceplugin = require('string-replace-webpack-plugin'); const addassethtmlplugin = require('add-asset-html-webpack-plugin');  /**  * webpack plugins  */ const provideplugin = require('webpack/lib/provideplugin'); const defineplugin = require('webpack/lib/defineplugin'); const loaderoptionsplugin = require('webpack/lib/loaderoptionsplugin');  module.exports = {     devtool: 'inline-source-map',      resolve: {         extensions: ['.ts', '.js']     },      entry: helpers.root('ngx-test.ts'),      output: {         path: helpers.root('bundles'),         publicpath: '/',         filename: 'ngx-test.umd.js',         librarytarget: 'umd',         library: 'ngx-test'     },      // require dependencies don't bundle them     externals: [/^\@angular\//, /^rxjs\//],      module: {         rules: [             {                 enforce: 'pre',                 test: /\.ts$/,                 loader: 'tslint-loader',                 exclude: [helpers.root('node_modules')]             },             {                 test: /\.ts$/,                 loaders: [                     'angular2-template-loader',                     'awesome-typescript-loader?declaration=false'                 ],                 exclude: [/\.e2e\.ts$/]             },             {                 test: /\.html$/,                 loader: 'raw-loader',                 exclude: ['./src/main/webapp/index.html']             },             {                 test: /\.css$/,                 loaders: ['to-string-loader', 'css-loader'],                 exclude: /(vendor\.css|global\.css)/             },             {                 test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i,                 loaders: [                     'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', {                         loader: 'image-webpack-loader',                         query: {                             gifsicle: {                                 interlaced: false                             },                             optipng: {                                 optimizationlevel: 7                             }                         }                     }                 ]             }         ]     },      plugins: [         // fix warning in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js         new webpack.contextreplacementplugin(             /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,             helpers.root('./src')         ),          new webpack.loaderoptionsplugin({             options: {                 tslintloader: {                     emiterrors: false,                     failonhint: false                 }             }         })     ] };