Relative url with templateUrl not work with bundle file

Ionic Framework ionic-v3
1

hi,

how to use relative url with templateUrl

i already put moduleId: module.id

but it doesn’t work when use ionic serve

when i debug the bundle file i find the problem in this line

var sourceAbsUrl = this._urlResolver.resolve(directiveType.moduleUrl, template.templateUrl);

because
directiveType.moduleUrl == "package:5.js"
and template.templateUrl == “app.html”

and when do debugging without bundle file i found the same line
var sourceAbsUrl = this._urlResolver.resolve(directiveType.moduleUrl, template.templateUrl);

but
directiveType.moduleUrl =="http://localhost:63342/MyIonic2Project/www/app/app.js"
and template.templateUrl == “app.html”

this line of code is from angular2 path
node_modules/angular2/src/compiler/angular2/src/compiler/template_normalizer.ts

what is the library that ionic use to make this bundle file ?
any suggestions to solve this problem

sorry for my bad english
thanks in advance .

3

i get the solution , if someone need it

1- you should add html-loader webpack plugin or raw-loader

npm install html-loader --save
or
npm install raw-loader --save

2- add this line to webpack config file
{ test: /.html$/, loader: ‘raw-loader’ }

it will be like this

module: {
loaders: [
…
…
…,
{ test: /.html$/, loader: ‘raw-loader’ }
]

3- then you can use relative url in your component like this

template:require( “./app.html”)

===========================

this was not my target only , my target was how to not using webpack bundle file , i want to use systemjs to load and debug my code with separated files

there is a good example here

systemjs can use templateURl with relative url without any problem

but i want to use systemjs and webpack in the same project (systemjs to debug, webpack to build bundle file)

the problem is how to make systemjs work with require( “./app.html”) as html file

the solution is

1- add text systemjs plugin which will load html file as as string
npm install --save git://github.com/systemjs/plugin-text

2- in systemjs config file add this line

map: {
text: ‘/node_modules/systemjs-plugin-text/text.js’
},

this plugin need to add “!text” in the end of html file , but we not want to edit our require method to use it with webpack so the solution is >>

3- Edite systemjs.js file which you added to index.html file
from

if (normalized.match(absURLRegEx)) {
// defaultJSExtensions backwards compatibility
if (this.defaultJSExtensions && normalized.substr(normalized.length - 3, 3) != ‘.js’)
normalized += ‘.js’;
return normalized;
}

to

if (normalized.match(absURLRegEx)) {
// defaultJSExtensions backwards compatibility
if (this.defaultJSExtensions && normalized.substr(normalized.length - 3, 3) != ‘.js’ && normalized.substr(normalized.length - 5, 5) != ‘.html’) {
normalized += ‘.js’;
}
if(normalized.substr(normalized.length - 5, 5) == ‘.html’)
{
normalized += ‘!text’;
}
return normalized;
}

now we can use systemjs and webpack in the same project with relative url without any chang in our code :smile:

sorry for my bad english