Angular - What is the meanings of module.id in com

Question

In an Angular app, I have seen that @Component has property moduleId. What does it mean?

And when module.id is not defined anywhere, the app still works. How can it still work?

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

Answer 1

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

Answer 2

Looks like if your using "module": "es6" in tsconfig.json, you dont have to use this :)

Answer 3

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

Answer 4

This moduleId value is used by the Angular reflection processes and the metadata_resolver component to evaluate the fully-qualified component path before the component is constructed.

Answer 5

Adding moduleId: module.id fixes several issues that can occur when building native-angular apps and angular web apps. It's best practice to use it.

It also enables the component to look in the current directory for files instead of from the top folder

Answer 6

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