relative template and style urls in ionic2

[jgw96]

From @michaelknoch on June 15, 2016 14:48

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?

Copied from original issue: ionic-team/ionic-framework#6922

[jgw96]

From @BenjaminDieter on June 17, 2016 10:55

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!

[jgw96]

From @michaelknoch on June 17, 2016 22:45

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

ionic-team/ionic-gulp-tasks#35

[jgw96]

From @natevecc on June 19, 2016 13:52

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

[jgw96]

From @441N143G on July 6, 2016 12:43

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!

[jgw96]

From @vong-xiv on July 7, 2016 18:41

@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() { }
}

[jgw96]

From @mirkonasato on July 20, 2016 7:45

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.

[jgw96]

From @441N143G on July 20, 2016 13:49

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

[royipressburger]

+1

[mburger81]

What's about this issue?

I can not use scss file inside html file and I have to set templateUrl.

pages/widget/widget.html
pages/widget/widget.scss
pages/widget/widget.ts

in the .ts file I have to set up templateUrl, there is no magic finding of html file and there is no way to load scss files for html.

Some ideas?

[441N143G]

u can import scss to theme/app.core.scss, like this: @import "../+start/start.component"; why not angular way?) because BECAUSE)))