Using require to set templateUrl in Angular 2 while getting error

Question

in my component, I want to set templateUrl using require, like this:

import {Component} from 'angular2/core';


@Component({
    selector: 'header',
    styleUrls: ['app/header/header.css'],
    templateUrl: require('./hahaha.html')
})
export class HeaderComponent {

  logoUrl: string = '/resources/img/branding.png';


  constructor () {

  }

}

In my console, I got an error

angular2-polyfills.js:332 Error: TypeError: require is not a function at eval (http://localhost:3000/app/header/header.js:29:35) at execute (http://localhost:3000/app/header/header.js:34:14) Error loading http://localhost:3000/app/main.js

I want to be able to do something like this: (I do know a work around, but I just want to know more, how to make this works in other way)

// Note that this is a relative path, which I will get error for now, I have to write from root path, don't like it.
styleUrls: ['./header.css']  
templateUrl: require('./hahaha.html')

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

@LukaJacobowitz I want to know how can make require work, though I do know a work around, I just curious. — Xinrui Ma
– Xinrui Ma, Commented Apr 5, 2016 at 19:10
What do you expect the difference to be between templateUrl: require('./hahaha.html') and just plain templateUrl: 'hahaha.html'? — Luka Jacobowitz
– Luka Jacobowitz, Commented Apr 5, 2016 at 19:19
@LukaJacobowitz I do not expect any difference, I simply want to know why the require won't work in this case, cause I thought it should work. — Xinrui Ma
– Xinrui Ma, Commented Apr 5, 2016 at 19:21
Well require is a part of CommonJS, you'd need to have a module loader that speaks CommonJS. But you're already using the import from syntax in your other code. You can't have it bothways. — Luka Jacobowitz
– Luka Jacobowitz, Commented Apr 5, 2016 at 19:23

Nodarii · Accepted Answer · 2016-09-02 11:48:40Z

2

The result of require('./hahaha.html') will be the template string, but templateUrl field expects the PATH to the .html template.

Solution 1: use template field if you want to proceed with require function

Example:

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  template: require('./hahaha.html')
})

Solution 2: use templateUrl but in this case, you have to path to the .html template

Example:

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  templateUrl: './hahaha.html'
})

Update: in case with templateUrl - template load should be asynchronous(AMD), but with template - template will be inlined into javascript

edited Sep 2, 2016 at 11:48

answered Apr 6, 2016 at 6:38

Nodarii

9738 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wearetherock Over a year ago

In Solution 1 you say template but you put templateUrl

Luka Jacobowitz · Accepted Answer · 2016-04-05 19:59:11Z

0

Instead of require just use a relative path from the root of your document.

@Component({
    selector: 'header',
    styleUrls: ['app/header/header.css'],
    templateUrl: 'app/header/hahaha.html'
})

answered Apr 5, 2016 at 19:59

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

2 Comments

Xinrui Ma Over a year ago

Why I can't write this: styleUrls: ['./header.css'], the header.ts file is in the same fold of header.css

Luka Jacobowitz Over a year ago

Because your module loader loads all your js code into one location. :)

Collectives™ on Stack Overflow

Using require to set templateUrl in Angular 2 while getting error

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related