Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erro de roteamento ao importar módulos em vez de componentes

Recebo mensagens de erro ao carregar aplicação, quando importo módulos ListagemModule e FormularioModule na classe AppModule. Mas se eu importar as classes ListagemComponent e FormularioComponent, em vez dos módulos, então a aplicação é carregada e executada com sucesso. Alguém saberia me explicar o motivo disso?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FotoModule } from './foto/foto.module';
import { HttpModule } from '@angular/http';
import { PainelModule } from './painel/painel.module'
import { FormularioModule } from './formulario/formulario.module'
import { ListagemModule } from './listagem/listagem.module'
import { routing } from './app.routes';
import 'rxjs/add/operator/map';

@NgModule({
    imports: [ 
        BrowserModule, 
        FotoModule, 
        HttpModule, 
        PainelModule, 
        routing,
        FormularioModule,
        ListagemModule
    ],
    declarations: [ AppComponent],
    bootstrap: [ AppComponent ]
})
export class AppModule {

}
3 respostas

Bom dia.

Código de ListagemModule e FormularioModule . Aliás, eu não crio esses módulos no treinamento. Vamos dar uma olhada no seu código.

Você diz que há erro mas não diz qual. Qual erro?

solução!

Se esses componentes não fazem parte de AppModule e possuem um módulo em separado, você precisará nesses módulos importar CommonModule. Sem ele, as diretivas padrões do Angular não estarão disponíveis para eles. Inclusive, se eles usaram diretivas do módulo de rotas, terá que importar o módulo de rotas também, inclusive as rotas configuradas ou nada feito.

Não faz muito sentido adicionar esses componentes em módulos em separadas, porque são específicos da aplicação, não serão reutilizados.

Boa noite. Obrigado por me responder e desculpe por minha falta de clareza. Em vez de importar os componentes na classe app.modules.ts, eu importei os módulos e no log do chrome recebi o erro abaixo:

zone.js:344 Unhandled Promise rejection: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("lass="input-group"> ][routerLink]="['/listagem']" class="btn btn-primary"> Listar fotos "): FormularioComponent@8:27 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("lass="input-group"> ][routerLink]="['/listagem']" class="btn btn-primary"> Listar fotos "): FormularioComponent@8:27 at TemplateParser.parse (compiler.umd.js:8530) at RuntimeCompiler._compileTemplate (compiler.umd.js:16905) at eval (compiler.umd.js:16828) at Set.forEach () at compile (compiler.umd.js:16828) at ZoneDelegate.invoke (zone.js:192) at Zone.run (zone.js:85) at zone.js:451 at ZoneDelegate.invokeTask (zone.js:225) at Zone.runTask (zone.js:125) Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("lass="input-group"> ][routerLink]="['/listagem']" class="btn btn-primary"> Listar fotos "): FormularioComponent@8:27 at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21) at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53) at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85) at Set.forEach () at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49) at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28) at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43) at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57 at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)

Pelo fato de os demais módulos importados terem seu componentes funcionando, então fiz o teste de importar os módulos de Cadastro e Listagem para ver se funcionaria. Agora já sei que, tratando-se de rotas, o ideal é importar os componentes. O FormularioModule equivale ao CadastroModule, com o componente FormularioComponent e assim por diante. Obrigado pela resposta e parabéns pelo ótimo trabalho.