I am working on a personal portfolio webiste in Angular 7 and am having problems when getting the routing to work. The site opens but displays nothing on the page. If I comment out my paths the site loads properly. I cannot find any resources that solve this problem.
//This is what I receive on my command line when I run ng serve.
「wdm」: Compiled successfully.
ERROR in src/app/app.module.ts(20,31): error TS2304: Cannot find name 'Contact'.
src/app/app.module.ts(21,33): error TS2304: Cannot find name 'Portfolio'.
//This is my code to get the routing working.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SideBarComponent } from './side-bar/side-bar.component';
import { MainContentComponent } from './main-content/main-content.component';
import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
import { RouterModule, Routes } from '@angular/router';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { ContactComponent } from './contact/contact.component';
const appRoutes: Routes = [
{path: 'contact', redirectTo: '/contact', pathMatch:'full'},
{path: 'portfolio', redirectTo: '/portfolio', pathMatch:'full'},
//this seems to be where I get the problem
{ path: 'contact', component: Contact.Component },
{ path: 'portfolio', component: Portfolio.Component }
]
@NgModule({
declarations: [
AppComponent,
SideBarComponent,
MainContentComponent,
NavigationBarComponent,
PortfolioComponent,
ContactComponent,
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes,{ enableTracing: true })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
please remove the dot in 'Contact.Component' and in 'Portfolio.Component' in lines 20 and 21 like this:
{ path: 'contact', component: ContactComponent },
{ path: 'portfolio', component: PortfolioComponent }
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments