Angular error: Staticinjectorerror(Appmodule) for Activatedroute

Asked

Viewed 1,648 times

2

It’s a problem when I ask my Activated route, I already have my application pass the ID properly to the URL and the mapping already includes the Routermodule.Forroot() on the routes.

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

Routes: 

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

Component that is giving problem when capturing:

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

}

Full error message:

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)

I also noticed that the ROUTE property was never read,

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

I don’t know if that’s usually the case in this case.

angular angular-routes

  • Note that the ID is being captured in the URL, the component only stops working when adding Activatedroutes

2 answers

1


Do it like this:

 // private route: ActivatedRoute
  constructor(private route: ActivatedRoute ) {
  }

  • I tried this way and the error persisted. , I had tried this way for being less verbose. Any other suggestion? Thanks anyway!

  • Edit your question with the full error message please.

  • I just finished editing Eduardo, so it’s okay?

0

Solved, the error was in the import, it was to import the router @Angular and not @angular.

Correct import:

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'

Browser other questions tagged angular angular-routes

You are not signed in. Login or sign up in order to post.