Relative path not working using SystemJS in Angular 2

Question

I have gone through this article

Here is my code

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

The line

moduleId: __moduleName,

is giving error: Cannot find name '__moduleName'.

tsconfig.json file:

{
"compilerOptions": {
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
},
"compileOnSave": false,
"filesGlob": [
  "src/**/*.ts",
  "src/**/*.tsx",
  "!typings/**",
  "!node_modules/**"
]
}

I am using SystemJS. Please Help!

Why are you using `template` together with `require` instead of `templateUrl`? It looks like a webpack feature — yurzui, Dec 15 '16 at 06:31
`require('...')` belongs to **CommonJS**, with **SystemJS** you should do: [`System.import('...');`](https://github.com/systemjs/systemjs#browser). — Hitmands, Dec 15 '16 at 06:34
Actually i am new to this, not sure about the require(...). I have updated the question. Can you please help me with the error? — amansoni211, Dec 15 '16 at 06:47

score 0 · Answer 1 · edited May 23 '17 at 11:46

You can use one of these options:

CommonJS

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // this line
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

component:

@Component({
  moduleId: module.id,
  selector: 'header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css']
})

SystemJS

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system", // this line
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

component:

declare var __moduleName: any;

@Component({
  moduleId: __moduleName,
  selector: 'header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css']
})

There are also special loaders to load your html without specifying module option (https://github.com/angular/angular/issues/6053#issuecomment-222341010)

Webpack users can use require('./some-template.html') - see https://angular.io/docs/ts/latest/guide/webpack.html for an example of how to use this.

SystemJS has the ability to use loaders for text in a similar fashion - https://github.com/systemjs/plugin-text

Relative path not working using SystemJS in Angular 2

1 Answers1