Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 228595

Relative url with templateUrl not work with bundle file

$
0
0

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
https://github.com/ackerdev/jspm-ionic-starter

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


Viewing all articles
Browse latest Browse all 228595

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>