2

Está dando problema quando instancio meu activated route, ja fiz minha aplicação passar o ID devidamente para a URL e o mapeamento já inclui o RouterModule.ForRoot() nas rotas.

App module:

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { TopoComponent } from './topo/topo.component'
import { TableHeadComponent } from './table-head/table-head.component'
import { PainelComponent } from './painel/painel.component'
import {RouterModule} from '@Angular/router'
import {ROUTES} from './app-routes';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { PlanilhawebComponent } from './planilhaweb/planilhaweb.component';
import { DetalhesPlanilhaComponent } from './detalhes-planilha/detalhes-planilha.component';
import { CadastroComponent } from './cadastro/cadastro.component'
import { ReactiveFormsModule } from '@angular/forms';
import { MDBBootstrapModule } from '../../node_modules/angular-bootstrap-md';


@NgModule({  
declarations: [
  AppComponent,
  TopoComponent,
  TableHeadComponent,
  PainelComponent,
  HomeComponent,
  LoginComponent,
  PlanilhawebComponent,
  DetalhesPlanilhaComponent,
  CadastroComponent
],
imports: [
  BrowserModule,
  ReactiveFormsModule,
  RouterModule.forRoot(ROUTES)
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule {}

Rotas:

import {Routes} from '@angular/router'
import {PainelComponent} from './painel/painel.component'
import { TableHeadComponent } from './table-head/table-head.component';
import{ HomeComponent} from './home/home.component'
import{LoginComponent} from './login/login.component'
import {PlanilhawebComponent} from './planilhaweb/planilhaweb.component'
import { DetalhesPlanilhaComponent } from './detalhes-planilha/detalhes-planilha.component';
import { CadastroComponent } from './cadastro/cadastro.component';

export const ROUTES: Routes = [
    { path: '', component: HomeComponent},
    { path: 'login', component: LoginComponent},
    { path: 'producao', component: TableHeadComponent},
    { path: 'plan', component: PlanilhawebComponent},
    { path: 'detalhes', component: HomeComponent},
    { path: 'cadastro', component: CadastroComponent},
    { path: 'detalhes/:id', component: DetalhesPlanilhaComponent}
]

Componente que está dando problema ao capturar:

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import{PlanilhawebComponent} from '../planilhaweb/planilhaweb.component'
import {ActivatedRoute, Routes } from '@angular/router'
import {ROUTES} from'../app-routes'

@Component({
  selector: 'app-detalhes-planilha',
  templateUrl: './detalhes-planilha.component.html',
  styleUrls: ['./detalhes-planilha.component.css']
})
export class DetalhesPlanilhaComponent implements OnInit {
  private route: ActivatedRoute
  constructor(route: ActivatedRoute ) {
    this.route =route 
  }

  cadastroForm = new FormGroup({
    ID            : new FormControl(''), 
    CLIENTE       : new FormControl(''),   
    CODIGODMD     : new FormControl(''),
    SIGLARM       : new FormControl(''),
    SIGLAPORTAL   : new FormControl(''),
    COMERCIAL     : new FormControl(''),
    ATENDIMENTO   : new FormControl(''),
    AUDITORIA     : new FormControl(''),
    PERIODICIDADE : new FormControl(''),
    ENTREGA       : new FormControl(''),
    RESPONSAVEL   : new FormControl(''),
    LAYOUT        : new FormControl(''),
    DM            : new FormControl(''),
    ODSDM         : new FormControl(''),
    EFV           : new FormControl(''),
    CAMINHO       : new FormControl(''),
    ORIGEM        : new FormControl(''),
    PORTAL        : new FormControl(''),
    FTP           : new FormControl(''),
    OBSERVACAO    : new FormControl(''),
    MAILING       : new FormControl('')
    });

    ngOnInit() {

    console.log(this.route.snapshot.queryParamMap);
  }

}

Mensagem de erro completa:

core.js:15724 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[DetalhesPlanilhaComponent -> ActivatedRoute]: 
  StaticInjectorError(Platform: core)[DetalhesPlanilhaComponent -> ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!
Error: StaticInjectorError(AppModule)[DetalhesPlanilhaComponent -> ActivatedRoute]: 
  StaticInjectorError(Platform: core)[DetalhesPlanilhaComponent -> ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveNgModuleDep (core.js:21218)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21907)
    at resolveDep (core.js:22278)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Notei também que a propriedade ROUTE nunca foi lida,

(Property 'route' is declared but its value is never read.ts(6138))

não sei se normalmente consta assim neste caso.

1
  • Vale ressaltar que o ID está sendo capturado na URL, o componente só para de funcionar ao adicionar o ActivatedRoutes Commented 27/05/2019 às 12:36

2 Respostas 2

1

Faz assim:

 // private route: ActivatedRoute
  constructor(private route: ActivatedRoute ) {
  }
3
  • Tentei desta forma e o erro persistiu., já havia tentado desta forma por ser menos verbosa. Alguma outra sugestão? Obrigado de qualquer forma! Commented 27/05/2019 às 13:46
  • Edita sua pergunta com a mensagem de erro completa por favor. Commented 27/05/2019 às 13:47
  • Acabei de editar agora Eduardo, assim está de acordo? Commented 27/05/2019 às 13:51
0

Resolvido, o erro estava na importação, era pra importar o router do @Angular e não @angular.

Importação correta:

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import{PlanilhawebComponent} from '../planilhaweb/planilhaweb.component'
import {ActivatedRoute, Routes } from '@Angular/router'
import {ROUTES} from'../app-routes'

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .