We know that the decorator functions of @Component take object and this object contains many properties. So we will learn about the properties of moduleId in this article.

it is used to resolve relative paths for your stylesheets and templates.Module ID of the module that contains the component. We had to be able to resolve relative URLs for templates styles. In Dart, this can be determined automatically and it is not necessary to configure it. In CommonJS or SystemJS, this can always be set in module.id.

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

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:

Google has added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. This plugin dynamically converts "component-related" paths into templateUrl and styleUrls into "absolute paths".

It is strongly recommended to write only paths related to the components. This is the only form of URL discussed in these documents. You no longer need to write @Component ({moduleId: module.id})

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

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:

{
  "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
})