entre - modulos angular 4
Angular: ¿cuál es el significado de module.id en el componente? (8)
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]
});
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
SystemJSy las URL relativas a componentes deben establecer la propiedad@Component.moduleIdenmodule.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 .
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
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.
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.iden el decorador. Webpack plugins auto handle (add it)module.iden el paquete final
Parece que si estás usando "module": "es6" en tsconfig.json, no tienes que usar esto :)
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
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
})
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.