Em um aplicativo Angular, eu vi que @Componenttem propriedade moduleId. O que isso significa?

E quando module.idnão está definido em nenhum lugar, o aplicativo ainda funciona. Como ainda pode funcionar?

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

A versão beta do Angular (desde a versão 2-alpha.51) suporta ativos relativos para componentes, como templateUrl e styleUrls no @Componentdecorador.

module.idfunciona ao usar o CommonJS. Você não precisa se preocupar com como isso funciona.

Lembre - se : definir moduleId: module.id no decorador @Component é a chave aqui. Se você não possui, o Angular 2 procurará seus arquivos no nível raiz.

Fonte da publicação de Justin Schwartzenberger , graças a @Pradeep Jain

Atualização em 16 de setembro de 2016:

Se você estiver usando o webpack para agrupar, não precisará module.iddo decorador. Identificador automático de plug-ins do Webpack (adicione-o) module.idno pacote final

Atualização para (13/03/2017) :

Todas as menções de moduleId removidas. Livro de receitas "Caminhos relativos aos componentes" excluído

Adicionamos um novo plug-in SystemJS (systemjs-angular-loader.js) à nossa configuração recomendada do SystemJS. Este plug-in converte dinamicamente caminhos "relativos ao componente" em templateUrl e styleUrls em "caminhos absolutos" para você.

Recomendamos que você escreva apenas caminhos relativos aos componentes. Essa é a única forma de URL discutida nesses documentos. Você não precisa mais escrever @Component({ moduleId: module.id }), nem deveria.

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

Definição:

moduleId?: string

moduleIdparâmetro dentro da @Componentanotação assume um stringvalor que é;

" A identificação do módulo que contém o componente. "

Uso commonjs: module.id,

Uso do SystemJS: __moduleName

moduleId é usado para resolver caminhos relativos para suas folhas de estilo e modelos, conforme indicado na documentação.

A identificação do módulo que contém o componente. Precisava ser capaz de resolver URLs relativos para modelos e estilos. No Dart, isso pode ser determinado automaticamente e não precisa ser definido. No CommonJS, isso sempre pode ser definido como module.id.

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

podemos especificar locais dos arquivos de modelo e estilo em relação ao arquivo de classe do componente simplesmente configurando a propriedade moduleId dos metadados @Component

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

Estrutura de pastas:

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

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

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

Se você receber typescript error, apenas declarea variável em seu arquivo.

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

UPDATE - December 08, 2016

A modulepalavra-chave está disponível em node. Portanto, se você instalar @types/node, no seu projeto, você terá a modulepalavra-chave disponível automaticamente em seus arquivos datilografados sem precisar declare.

npm install -D @types/node

Dependendo da sua configuração, talvez você precise incluir isso em seu tsconfig.jsonarquivo para obter as ferramentas :

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

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

Boa sorte

Além das excelentes explicações echonaxe Nishchit Dhananiquero acrescentar, eu realmente odeio a população de componentes module.id. Especialmente, se você tem suporte para a compilação AoT (antecipada ) e para um projeto realista, é isso que você deve procurar, não há lugar para algo como os module.idmetadados de seus componentes.

Dos documentos :

Aplicações compiladas-JIT que usam o SystemJScarregador e componente relativa URLs deve definir a @Component.moduleIdpropriedade para module.id. O objeto do módulo é indefinido quando um aplicativo compilado pelo AoT é executado. O aplicativo falha com um erro de referência nulo, a menos que você atribua um valor global do módulo no index.html assim:

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

Eu acho que ter essa linha na versão de produção do index.htmlarquivo não é absolutamente aceitável!

Portanto, o objetivo é ter uma compilação JiT (just-in-time) para desenvolvimento e suporte ao AoT para produção com a seguinte definição de metadados de componente: (sem moduleId: module.idlinha)

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

Ao mesmo tempo, gostaria de colocar estilos, like my.component.csse arquivos de modelo, como my.component.html relativo aos my.component.tscaminhos de arquivo do componente .

Para conseguir tudo isso, a solução que estou usando é hospedar servidor da Web (lite-server ou browser-sync) durante a fase de desenvolvimento de várias fontes de diretório!

bs-config.json:

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

Por favor, dê uma olhada nesta resposta para me detalhes.

O projeto de início rápido angular 2 exemplar, que se baseia nessa abordagem, está hospedado aqui .

Conforme o documento Angular, você não deve usar @Component ({moduleId: module.id})

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

Aqui está o texto relevante dessa página:

Todas as menções de moduleId removidas. Livro de receitas "Caminhos relativos aos componentes" excluído (13-03-2017)

Adicionamos um novo plugin SystemJS ( systemjs-angular-loader.js) à nossa configuração recomendada do SystemJS. Este plug-in converte dinamicamente caminhos "relativos ao componente" em templateUrl e styleUrls em "caminhos absolutos" para você.

Recomendamos que você escreva apenas caminhos relativos aos componentes. Essa é a única forma de URL discutida nesses documentos. Você não precisa mais escrever @Component({ moduleId: module.id }), nem deveria.

Parece que se você estiver usando "module": "es6" no tsconfig.json, não precisará usar isso :)

Esse valor moduleId é usado pelos processos de reflexão angular e pelo componente metadata_resolver para avaliar o caminho completo do componente antes da construção do componente.

A adição moduleId: module.idcorrige vários problemas que podem ocorrer ao criar aplicativos angulares nativos e aplicativos da web angulares. É uma prática recomendada usá-lo.

Também permite que o componente procure arquivos no diretório atual, e não na pasta superior