I've been working on setting up a module to route the application, and although I believe I've set all the variables correctly, I seem to be missing something as I keep encountering this error: "Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'IndexComponent' Error: Cannot find primary outlet to load 'IndexComponent'" I've spent 2 hours analyzing my code but still can't figure out where the issue lies.
Here's my code:
routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
//Components
import { IndexComponent } from './index/index.component';
export const routes: Routes = [
{path: '', pathMatch: 'full', component: IndexComponent}
];
@NgModule({
imports: [
CommonModule,
[RouterModule.forRoot(routes)],
],
exports: [RouterModule],
providers: [],
declarations: []
})
export class RoutingModule { }
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule } from 'ng2-bootstrap';
import { RoutingModule } from './routing.module';
import { AppComponent } from './app.component';
import { NavBarComponent } from './components/nav-bar/nav-bar.component';
import { IndexComponent } from './index/index.component';
@NgModule({
declarations: [
AppComponent,
NavBarComponent,
IndexComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RoutingModule,
[AlertModule.forRoot()]
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }