Angular: ¿cuál es el significado de module.id en el componente?


221

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

77
mejor artículo encontrado hasta ahora, por el mismo schwarty.com/2015/12/22/…
Pardeep Jain

Respuestas:


182

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


de nada, eche un vistazo a esta pregunta, espero que pueda ayudarme. stackoverflow.com/q/36451917/5043867
Pardeep Jain

29
+1 para la referencia del paquete web, no tenía idea de por qué las cosas se rompían cuando se suponía que iban a funcionar y cuando se suponía que debían romperse ...
João Mendes

99
no puedo pensar en algo más contra-intuitivo para inventar
khusrav

15
¿Cómo explica esto qué es module.id?
gyozo kudor

1
@gyozokudor Si no tiene eso, entonces Angular 2 buscará sus archivos en el nivel raíz.
Nishchit Dhanani

89

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


Motivo de usomoduleId :

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


Ejemplo de uso:

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

8
Pero cómo funciona, dónde está la referencia de module.id
Nishchit Dhanani

1
@NishchitDhanani no es necesario, pero sugiero que compruebes github.com/angular/angular/issues/6053 que se asigna a tus mapteclas dentro de tu configuración. Al igual app.
eko

1
El enlace de echonax a los documentos actualmente no funciona, aunque es el enlace en la página del componente Angular.io. Prueba: angular.io/docs/js/latest/api/core/index/…
John Pankowicz

1
Parece que olvidó el subdirectorio 'componentes' del directorio raíz 'aplicación' en el enfoque sin module.id, ¿no? Creo que debería ser: templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Ilker Cat

23

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


1
tnq mucho! finalmente pude ng build --prod --aottrabajar npm install -D @types/nodedespués de pasar mucho tiempo tocando el violín :)
Anand Rockzz

Una cosa más que hice fue moduleId: 'module.id'(observe las comillas simples alrededor de module.id)
Anand Rockzz

@AnandRockzz Me alegra que hayas encontrado útil esta publicación. No creo que necesites agregar module.idcomo una cadena. Si funcionó, algo parece ser incorrecto. Es posible que deba investigar esto más a fondo.
Akash

3

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í .


3

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.


1
También agregaré esto a mi respuesta como descargo de responsabilidad, gracias por la actualización.
eko

1

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


¿no se trasladará a ES6 si hacemos esto?
Akash

0

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.


-2

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.