load templates via systemJS plugin-text

[Hotell]

using templateUrl for loading templates in ng1 introduces a lot of problems / testing/no guarantees about children template resolution.

It would awesome if you can provide loading templates via systemJS

import tpl from './my-component.html!text';

// ...
@Component{(
// ...
 template: tpl
// ...
)}
class MyComponent{}

[dmorosinotto]

Hi @Hotell I've published a plugins branch to address this use-case
Take a look at my-app.components.ts and SystemJS config in index.html + package.json additions
I had to done some quirks to handle TS compilation error, see here, but finally it works...

To be honest I definitly prefer inline template using ES6 template string but if someone prefer to use external file for template, they can follow the sample to handle this case or simply ignore the TS2307 error, and do the relative path import as you suggest...

import tpl from './my-component.html!';

[dmorosinotto]

@Hotell let's me know if the proposed solution looks good to you, and the I close the issue 😉

[Hotell]

I don't like the html loading via ! syntax.
It's more cleaner to define a meta for this

System.config({
  // locate the plugin via map configuration
  // (alternatively have it in the baseURL)
  map: {
    text: '/path/to/text-plugin.js'
  },
  // use meta configuration to reference which modules
  // should use the plugin loader
  meta: {
    '*.html': {
      loader: 'text'
    }
  }
});

then you can just import tpl from './my-component.html';

[Hotell]

also creating "temporary" modules to make TS happy is overkill. I prefer traditional commonJS syntax for this
const tpl = require('./my-component.html') you just need to download node typings or define your own
declare const require: (moduleOrPath:string)=>any;

[dmorosinotto]

Hi @Hotell I totally agree with you that my solution is not clear and the typings hacking is so bad 👎

But I tried to follow your suggestions without success... 😞
If you can, please take a look of my last commit on branch plugins cfdd2c0
If you download it and uncomment the WIP line and then run npm start you get runtime errors when SystemJS try to load html...

Hope that you can try it and point me in the right direction to resolve this problem.
Any suggestions is very welcome!

[dmorosinotto]

Hi @Hotell ignore last comment, I think I've found a way to make it work with require as you suggest,
I've just to fix a little problem with relative path, but finally I think that it'll work, stay tuned ...

[Hotell]

perfecto! looking forward to it!

[dmorosinotto]

Hi @Hotell I made a refactor (ver 1.2.0) of all the branches of the repo to avoid using
the outFile: "dist/app_bundle.js" in tsconfig.js and simply compiling TS-->JS
using module: commonjs + outDir: "dist"
I'm still using SystemJs to load/run the application from the dist folder and to handle external resources css+html with plugins, but with this configuration now I can use require('...*.html/css') to dynamically load html for component or even load css styles for the app.

Take a look of this solution, and if it LGTY then I'll close this issue.