Angular - Quais são os significados do module.id no componente?


221

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

7
melhor artical encontrado até agora, para a mesma schwarty.com/2015/12/22/...
Pardeep Jain

Respostas:


182

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


de nada, por favor, dê uma olhada nesta pergunta espero que você possa me ajudar. stackoverflow.com/q/36451917/5043867
Pardeep Jain 12/16

29
+1 para a referência Webpack, eu não tinha idéia de por que as coisas estavam quebrando quando eles deveriam trabalhar e trabalhar quando eles deveriam pausa ...
João Mendes

9
Não consigo pensar em uma coisa mais contra-intuitiva para inventar
khusrav

15
Como isso explica o que é module.id?
Gyozo kudor

1
@gyozokudor Se você não tiver, o Angular 2 procurará seus arquivos no nível raiz.
Nishchit Dhanani

89

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


Razão para usarmoduleId :

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


Exemplo de uso:

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

8
Mas como ele funciona, onde é a referência do module.id
Nishchit Dhanani

1
@NishchitDhanani não é necessário, mas sugiro que verifique github.com/angular/angular/issues/6053 que mapeia para suas mapchaves dentro da sua configuração. Like app.
Eko

1
No momento, o link do echonax para os documentos não está funcionando - mesmo que seja o link na página do componente Angular.io. Tente: angular.io/docs/js/latest/api/core/index/…
John Pankowicz 3/16

1
Parece que você esqueceu o subdiretório 'components' do diretório raiz 'app' na abordagem sem module.id, não é? Eu acho que deveria ser: # templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Ilker Cat 27/12

23

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


1
tnq muito! finalmente eu comecei o meu ng build --prod --aottrabalho npm install -D @types/nodedepois de passar muito tempo brincando:)
Anand Rockzz

mais uma coisa que eu fiz foi moduleId: 'module.id'(note as aspas simples ao redor module.id)
Anand Rockzz

@AnandRockzz Estou feliz que você achou este post útil. Eu não acho que você precise adicionar module.idcomo uma string. Se funcionou, algo parece estar incorreto. Você pode precisar pesquisar mais isso.
Akash

3

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 .


3

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.


1
Também adicionarei isso à minha resposta como um aviso, obrigado pela atualização.
eko

1

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


ele não transpilará para o ES6 se fizermos isso?
quer

0

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.


-2

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.