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
moduleId
El parámetro dentro de la @Component
anotación toma un string
valor 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
})