entre - modulos angular 4

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

Question

En una aplicación angular, he visto que @Component tiene la propiedad moduleId . Qué significa eso?

Y cuando module.id no está definido 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]
});

Answer 1

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

De los AoT-compilation :

Las aplicaciones compiladas con JiT que usan el cargador SystemJS y las URL relativas a componentes deben establecer la propiedad @Component.moduleId 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 archivo index.html no es absolutamente aceptable!

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

@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, como my.component.css y archivos de plantilla, como my.component.html relación con las my.component.ts archivos del componente my.component.ts .

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", "."]
}

Por favor, eche un vistazo a esta answer para obtener más detalles.

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

Answer 2

Agregar moduleId: module.id corrige varios problemas que pueden ocurrir al construir 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

Answer 3

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.

Answer 4

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

module.id funciona 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 lo tiene, Angular 2 buscará sus archivos en el nivel raíz.

Fuente de schwarty.com/2015/12/22/… de schwarty.com/2015/12/22/… , gracias a @Pradeep Jain

Actualización el 16 de septiembre de 2016:

Si está utilizando webpack para la agrupación, no necesita module.id en el decorador. Webpack plugins auto handle (add it) module.id en el paquete final

Answer 5

Parece que si estás usando "module": "es6" en tsconfig.json, no tienes que usar esto :)

Answer 6

Si obtiene un typescript error , simplemente declare la 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 palabra clave del module está disponible en el node . Entonces, si instala @types/node , en su proyecto, tendrá palabras clave de module disponibles automáticamente en sus archivos de mecanografiado sin necesidad de declare .

npm install -D @types/node

Dependiendo de su configuración, es posible que tsconfig.json incluir esto en su archivo tsconfig.json 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

Answer 7

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

Toda mención de moduleId eliminado. 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 necesita escribir @Component({ moduleId: module.id }) , ni debería hacerlo.

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

Definición:

moduleId?: string

moduleId parámetro moduleId dentro de la anotación @Component toma un valor de string que es;

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

Uso de CommonJS: module.id ,

Uso de __moduleName : __moduleName

Razón para usar moduleId :

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

El id 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 los archivos de plantilla y estilo en relación con el 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 la carpeta:

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

Answer 8

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 eliminado. 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 necesita escribir @Component({ moduleId: module.id }) , ni debería hacerlo.