How to use templateUrl?

[wembernard]

Description

I'm going with the following file structure:

./src
   app/
      app.component.html
      app.component.ts
   index.html
   index.ts

But when I want to use templateUrl: 'app.component.html' in my app.component.ts I get the following Error Message & Stack Trace (see below).

I succeeded to fix the problem by writing the full relative path: ./app/app.component.html but this is bad and when my app will grow (and it will grow pretty fast), moving components in subfolders will be a real pain.

In Angular Style guide, they suggest just to use templatename.html instead of ./relativepath/templatename.html but this does not work for me. Have you tried? Is it related to Webpack? Should I switch to SystemJS instead?

By the way, I suggest your generator to use templateUrl in one of your samples (todoMVC for example?) as a best practice 👍

Error Message & Stack Trace

VM4477:77 EXCEPTION: Error: Uncaught (in promise): Failed to load app.component.html

VM4477:77 STACKTRACE:BrowserDomAdapter.logError @ VM4477:77ExceptionHandler.call @ VM4253:59(anonymous function) @ VM4266:265schedulerFn @ VM4268:123SafeSubscriber.__tryOrUnsub @ VM4275:223SafeSubscriber.next @ VM4275:172Subscriber._next @ VM4275:125Subscriber.next @ VM4275:89Subject.next @ VM4270:55EventEmitter.emit @ VM4268:112onError @ VM4267:120onHandleError @ VM4291:66ZoneDelegate.handleError @ zone.js?fad3:327Zone.runGuarded @ zone.js?fad3:233_loop_1 @ zone.js?fad3:487drainMicroTaskQueue @ zone.js?fad3:494ZoneTask.invoke @ zone.js?fad3:426
VM4477:77 Error: Uncaught (in promise): Failed to load app.component.html
    at resolvePromise (eval at <anonymous> (index.js:1813), <anonymous>:538:32)
    at PromiseCompleter.eval [as reject] (eval at <anonymous> (index.js:1813), <anonymous>:515:14)
    at eval (eval at <anonymous> (index.js:813), <anonymous>:295:35)
    at ZoneDelegate.invoke (eval at <anonymous> (index.js:1813), <anonymous>:323:29)
    at Object.onInvoke (eval at <anonymous> (index.js:1474), <anonymous>:45:41)
    at ZoneDelegate.invoke (eval at <anonymous> (index.js:1813), <anonymous>:322:35)
    at Zone.run (eval at <anonymous> (index.js:1813), <anonymous>:216:44)
    at eval (eval at <anonymous> (index.js:1813), <anonymous>:571:58)
    at ZoneDelegate.invokeTask (eval at <anonymous> (index.js:1813), <anonymous>:356:38)
    at Object.onInvokeTask (eval at <anonymous> (index.js:1474), <anonymous>:36:41)BrowserDomAdapter.logError @ VM4477:77ExceptionHandler.call @ VM4253:60(anonymous function) @ VM4266:265schedulerFn @ VM4268:123SafeSubscriber.__tryOrUnsub @ VM4275:223SafeSubscriber.next @ VM4275:172Subscriber._next @ VM4275:125Subscriber.next @ VM4275:89Subject.next @ VM4270:55EventEmitter.emit @ VM4268:112onError @ VM4267:120onHandleError @ VM4291:66ZoneDelegate.handleError @ zone.js?fad3:327Zone.runGuarded @ zone.js?fad3:233_loop_1 @ zone.js?fad3:487drainMicroTaskQueue @ zone.js?fad3:494ZoneTask.invoke @ zone.js?fad3:426

COPY THE ERROR MESSAGE, INCLUDING STACK TRACE HERE

Config

Content from .yo-rc.json:

{
  "generator-fountain-angular2": {
    "version": "0.5.4",
    "props": {
      "framework": "angular2",
      "modules": "webpack",
      "js": "typescript",
      "css": "scss",
      "resolved": "/usr/local/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular2/generators/app/index.js",
      "namespace": "fountain-angular2",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "skip-cache": false,
      "skip-install": false,
      "sample": "hello",
      "router": "none"
    }
  }
}

Environment

node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v6.2.2
darwin 15.4.0

yo --version
1.8.4

npm --version
3.9.5

[micaelmbagira]

Hi, thanks for following the issue template @wembernard External template with Angular 2 will be part of the next release, the code is already on master. Meanwhile here are the steps you need to go through with angular2/webpack:

• template = require('relative/path/to/template.html')
• you also need to add moduleId: __moduleName in @Component({...})

• at last, you need to install and set up the Webpack html loader

  • In conf/webpack-*.conf.js you have to add the following into module.loaders array

  {
  test: /.html$/,
    loaders: [
      'html'
    ]
  }

  • npm install html-loader --save-dev

All this will be in next release in few days 😉