CODEWITHSUNDEEP
angularroutes
Marcos
Marcos

Reputation: 338

Problems with routing in Angular

I am going to ask a question that I have seen many times and I have searched a lot about it, it seems that everyone has the same problem, but nobody is solved the same.

I'm doing a hello world with Angular and I'm on the routing side. I have generated the file as it says the docs of the framework, but when I start opening the application in the navigator it jumps to the following error:

 Error: StaticInjectorError(AppModule)[RouterOutlet -> ChildrenOutletContexts]: 
 StaticInjectorError(Platform: core)[RouterOutlet -> ChildrenOutletContexts]: 
 NullInjectorError: No provider for ChildrenOutletContexts!

I have followed the tutorial since the beginning several times, I have looked for solutions and nothing. To see if someone can help me, I show you my code, just as it is right now:

This is the app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello- 
world.component';

const routes: Routes = [
  {
    path: '',
    component: HelloWorldComponent,
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

this is the app.modules file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MatButtonModule, MatDialogModule, MatTableModule,MatFormFieldModule, MatInputModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { UserCardComponent, DialogExampleComponent} from './usercard/user-card.component';
import { BrowserAnimationsModule } from '@angular/platformbrowser/animations';
import { HelloWorldComponent } from './hello-world/helloworld.component';


@NgModule({
  declarations: [
  AppComponent,
  UserCardComponent,
  DialogExampleComponent,
  HelloWorldComponent
],
entryComponents:[DialogExampleComponent],
imports: [
BrowserModule,
MatTableModule,
MatButtonModule,
MatDialogModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
RouterModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

And I do not think it's necessary, but this is the app.component.html file:

<router-outlet></router-outlet>

Can anyone see the problem?? Maybe I'm blind...

Upvotes: 0

Views: 442

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

Since you've already set up routing in your AppRoutingModule and you've also exported the RouterModule the AppRoutingModule, that's what you should be adding to the imports array of your AppModule.

Change this:

imports: [
  ...
  RouterModule,
],

To this:

imports: [
  ...
  AppRoutingModule,
],

Here's a Working Sample StackBlitz for your ref.

Upvotes: 2

Related Questions