Angular - What is the meanings of module.id in component?

The beta release of Angular (since vesion 2-alpha.51) supports relative assets for components, like templateUrl and styleUrls in the @Component decorator.

module.id works when using CommonJS. You don't need to worry about how it works.

Remember: setting moduleId: module.id in the @Component decorator is the key here. If you don't have that then Angular 2 will be looking for your files at the root level.

Source from Justin Schwartzenberger's post, thanks to @Pradeep Jain

Update on 16 Sep 2016:

If you are using webpack for bundling then you don't need module.id in decorator. Webpack plugins auto handle (add it) module.id in final bundle

If you get typescript error, just declare the variable in your file.

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

UPDATE - December 08, 2016

The module keyword is available on node. So if you install @types/node, in your project, you will have module keyword automatically available in your typescript files without needing to declare it.

npm install -D @types/node

Depending on your configuration, you might have to include this in your tsconfig.json file to get the tooling:

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

Good Luck

Update for (2017-03-13):

All mention of moduleId removed. "Component relative paths" cookbook deleted

We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.

We strongly encourage you to only write component-relative paths. That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.

Source: https://angular.io/docs/ts/latest/guide/change-log.html

Definition:

moduleId?: string

moduleId parameter inside the @Component annotation takes a string value which is;

"The module id of the module that contains the component."

CommonJS usage: module.id,

SystemJS usage: __moduleName

---

Reason to use moduleId:

moduleId is used to resolve relative paths for your stylesheets and templates as it says in the documentation.

The module id of the module that contains the component. Needed to be able to resolve relative urls for templates and styles. In Dart, this can be determined automatically and does not need to be set. In CommonJS, this can always be set to module.id.

ref(old): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

we can specify locations of the template and style files relative to the component class file simply by setting the moduleId property of the @Component metadata

ref: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

---

Example usage:

Folder structure:

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html

Without module.id:

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

With module.id:

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

As per Angular doc, You should not use @Component({ moduleId: module.id })

Please ref : https://angular.io/docs/ts/latest/guide/change-log.html

Here is the relevant text from that page:

All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13)

We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.

We strongly encourage you to only write component-relative paths. That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.