Além das excelentes explicações echonax
e Nishchit Dhanani
quero 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.id
metadados de seus componentes.
Dos documentos :
Aplicações compiladas-JIT que usam o SystemJS
carregador e componente relativa URLs deve definir a @Component.moduleId
propriedade 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.html
arquivo 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.id
linha)
@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.css
e arquivos de modelo, como my.component.html
relativo aos my.component.ts
caminhos 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 .