Ionic-framework: relative template and style urls in ionic2

[michaelknoch]

is there a possibility to use relative template and style urls for ionic2 components when using browserify bundle?

I am running an angular2 web app using CommonJS and module.id in my components. The plan is to reuse these ng2 components in my ionic application, but i was not able to fix the relative/absolute path problem for now.

Anny suggestions?

[BenjaminKauer]

Ionic uses WebPack, which allows us to use require() or import.

Require: _(did not work for me because of missing typings which I didn't want to include)_

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: require('./header.component.html'),
  styles: [require('./header.component.css')]
})
export class HeaderComponent implements OnInit {
}

Import:

import { Component } from '@angular/core';

import { Component }  from '@angular/core';
import headerTemplate from './header.component.html';
import headerStyle    from './header.component.css';

@Component({
  selector : 'my-app',
  template : headerTemplate,
  styles   : [headerStyle]
})
export class HeaderComponent implements OnInit {
}

Source: Component-Relative Paths in Angular 2 on ThoughtRam. Thomas Burleson describes how to achieve the ability to use relative paths while using WebPack there.

[jgw96]

Hello @BenjaminDieter we actually use browserify for Ionic 2 (we used to use Webpack). @michaelknoch i will speak with some of our build team and see if they have an answer for this question. Thanks for using Ionic!

[michaelknoch]

I made some experience with https://github.com/ludohenin/gulp-inline-ng2-template. Maybe rendering referenced templateurl and style files inline is a solution @jgw96

https://github.com/driftyco/ionic-gulp-tasks/pull/35

[natevecc]

Is there a way this could be handled by the @Component's moduleId property instead of inlining the html/css? https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html#!#moduleId-anchor

[441N143G]

any news about relative paths?

[jgw96]

Hello all, just a heads up that were changing up our build chain to support minification, tree shaking and offline template compilation, so all this will be changing relatively soon. Once that is done I will be revisiting this issue. Thanks everyone!

[vong-srey]

@jgw96 this is a pain that need to be addressed.
I would suggest that you guys remove the need of using templateUrl and styleUrls out (as you guys did with selector) and let it handle by the build.
So, as long as the app developer keep their html and scss files in the same folder as .ts file, then the build will grab those html and scss and place them in the correct place and add a correct path into app.bundle.js.

example:

Let's say a developer has hello-ionic page in his app and here is the structure of his files

app/
------ pages/
------ ------ hello-ionic/
------ ------ ------ hello-ionic.html
------ ------ ------ hello-ionic.scss
------ ------ ------ another-hello-ionic.scss
------ ------ ------ hello-ionic.ts

and here's need to be added into hello-ionic.ts

import {Component} from '@angular/core';

@Component({
// developer doesn't need to config templateUrl and styleUrls here
})
export class HelloIonicPage {
  constructor() { }
}

[mirkonasato]

Following. Currently, code generated by ionic start has e.g.

@Component({
  templateUrl: 'build/pages/home/home.html'
})

and it's not immediately clear 1. where that build folder comes from; and 2. why it only references home.html and not home.scss. Too much magic going on there.

[441N143G]

yeap, we realy need normal angular2-style with relative paths 4 this.

[jgw96]

This issue was moved to driftyco/ionic-cli#1196

[jgw96]

Hello all! I have decided to move this issue to the ionic-cli repo as it is more of a cli/build related issue than a framework issue. Thanks for using Ionic!