En una aplicación angular, he visto que @Componenttiene propiedades moduleId. Qué significa eso?

Y cuando module.idno se define en ningún lado, la aplicación aún funciona. ¿Cómo puede seguir funcionando?

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

La versión beta de Angular (desde vesion 2-alpha.51) admite activos relativos para componentes, como templateUrl y styleUrls en el @Componentdecorador.

module.idfunciona cuando se usa CommonJS. No necesita preocuparse por cómo funciona.

Recuerde : la clave aquí es configurar moduleId: module.id en el decorador @Component. Si no tiene eso, entonces Angular 2 buscará sus archivos en el nivel raíz.

Fuente de la publicación de Justin Schwartzenberger , gracias a @Pradeep Jain

Actualización el 16 de septiembre de 2016:

Si está utilizando webpack para empaquetar, no necesita module.iddecorador. Webpack plugins auto manejo (agregarlo) module.iden el paquete final

Actualización para (2017-03-13) :

Toda mención de moduleId eliminada. Libro de cocina "Rutas relativas de componentes" eliminado

Agregamos un nuevo complemento SystemJS (systemjs-angular-loader.js) a nuestra configuración recomendada de SystemJS. Este complemento convierte dinámicamente rutas "relativas a componentes" en templateUrl y styleUrls en "rutas absolutas" para usted.

Le recomendamos encarecidamente que solo escriba rutas relativas a componentes. Esa es la única forma de URL discutida en estos documentos. Ya no necesitas escribir @Component({ moduleId: module.id }), ni deberías hacerlo.

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

Definición:

moduleId?: string

moduleIdEl parámetro dentro de la @Componentanotación toma un stringvalor que es;

" La identificación del módulo que contiene el componente " .

El uso CommonJS: module.id,

Uso de SystemJS: __moduleName

moduleId se utiliza para resolver rutas relativas para sus hojas de estilo y plantillas como se dice en la documentación.

La identificación del módulo que contiene el componente. Necesario para poder resolver las URL relativas de plantillas y estilos. En Dart, esto se puede determinar automáticamente y no es necesario configurarlo. En CommonJS, esto siempre se puede establecer en module.id.

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

podemos especificar ubicaciones de la plantilla y los archivos de estilo relativos al archivo de clase de componente simplemente configurando la propiedad moduleId de los metadatos @Component

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

Estructura de carpetas:

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

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

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

Si obtiene typescript error, solo declarela variable en su archivo.

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

UPDATE - December 08, 2016

La modulepalabra clave está disponible en node. Entonces, si instala @types/node, en su proyecto, tendrá modulepalabras clave disponibles automáticamente en sus archivos de mecanografía sin necesidad de declareello.

npm install -D @types/node

Dependiendo de su configuración, es posible que deba incluir esto en su tsconfig.jsonarchivo para obtener las herramientas :

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

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

Buena suerte

Además de las excelentes explicaciones de echonaxy Nishchit Dhananiquiero agregar, que realmente odio la población de componentes module.id. Especialmente, si tiene soporte para la compilación de AoT (antes de tiempo) y para un proyecto realista, esto es a lo que debe apuntar, no hay lugar para algo comomodule.id en los metadatos de sus componentes.

De los documentos :

Las aplicaciones compiladas con JiT que usan el SystemJScargador y las URL relativas a los componentes deben establecer la @Component.moduleIdpropiedad en module.id. El objeto del módulo no está definido cuando se ejecuta una aplicación compilada con AoT. La aplicación falla con un error de referencia nulo a menos que asigne un valor de módulo global en index.html como este:

<script>window.module = 'aot';</script>

¡Creo que tener esta línea en la versión de producción del index.htmlarchivo no es absolutamente aceptable!

Por lo tanto, el objetivo es tener una compilación JiT (Just-in-Time) para el desarrollo y soporte AoT para la producción con la siguiente definición de metadatos de componentes: (sin moduleId: module.idlínea)

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

Al mismo tiempo, me gustaría colocar estilos, me gusta my.component.cssy archivos de plantilla, como my.component.html relativos a las my.component.tsrutas de los archivos componentes .

Para lograr todo esto, la solución que estoy usando es alojar un servidor web (servidor lite o sincronización de navegador) durante la fase de desarrollo desde múltiples fuentes de directorio.

bs-config.json:

{
  "port": 8000,
  "server": ["app", "."]
}

Echa un vistazo a esta respuesta para obtener más detalles.

El ejemplar proyecto de inicio rápido angular 2, que se basa en este enfoque, está alojado aquí .

Según el documento angular, no debe usar @Component ({moduleId: module.id})

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

Aquí está el texto relevante de esa página:

Toda mención de moduleId eliminada. Libro de cocina "Rutas relativas de componentes" eliminado (13/03/2017)

Agregamos un nuevo complemento SystemJS ( systemjs-angular-loader.js) a nuestra configuración recomendada de SystemJS. Este complemento convierte dinámicamente rutas "relativas a componentes" en templateUrl y styleUrls en "rutas absolutas" para usted.

Le recomendamos encarecidamente que solo escriba rutas relativas a componentes. Esa es la única forma de URL discutida en estos documentos. Ya no necesitas escribir @Component({ moduleId: module.id }), ni deberías hacerlo.

Parece que si usa "module": "es6" en tsconfig.json, no tiene que usar esto :)

Este valor de moduleId es utilizado por los procesos de reflexión angular y el componente metadata_resolver para evaluar la ruta del componente completamente calificado antes de que se construya el componente.

Agregar moduleId: module.idsoluciona varios problemas que pueden ocurrir al crear aplicaciones angulares nativas y aplicaciones web angulares. Es una buena práctica usarlo.

También permite que el componente busque archivos en el directorio actual en lugar de hacerlo desde la carpeta superior