Angular与路由错误

Question

我的路由是抛出错误导致我的所有网页重叠。 下面是我在主页上看到的因为这些错误而登录的图片。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {MaterializeDirective} from "angular2-materialize";

import { routing, appRoutingProviders } from './app.routing';
import { HomePage }   from './pages/home/home.page';
import { RegisterPage }   from './pages/register/register.page';
import { LoginPage }   from './pages/login/login.page';
import { AdvancedRegisterPage }   from './pages/advanced-register/advanced-register.page';
import { FinalizationPage }   from './pages/finalization/finalization.page';
import { ContractPage }   from './pages/contract/contract.page';
import { JoinTeamPage }   from './pages/join-team/join-team.page';
import { TermsConditionsPage }   from './pages/terms-conditions/terms-conditions.page';
import { PrivacyPage }   from './pages/privacy/privacy.page';
import { PortfolioPage }   from './pages/portfolio/portfolio.page';

import { NavComponent } from './components/nav/nav.component';
import { HomeBannerComponent } from './components/home-banner/home-banner.component';
import { HomeMakeYouComponent } from './components/home-make-you/home-make-you.component';
import { HomeOurWayComponent } from './components/home-ourway/home-ourway.component';
import { HomeInovationComponent } from './components/home-inovation/home-inovation.component';
import { HomeReasonComponent } from './components/home-reason/home-reason.component';
import { ModalHomeAdvantagesComponent } from './components/modal-home-advantages/modal-home-advantages.component';



import { BannerHeaderComponent } from './components/banner-header/banner-header.component';


import { FormRegisterComponent } from './components/form-register/form-register.component';
import { FormLoginComponent } from './components/form-login/form-login.component';
import { FormAddressDataComponent } from './components/form-address-data/form-address-data.component';
import { FormAddUserPhotoComponent } from './components/form-add-user-photo/form-add-user-photo.component';
import { FormPersonalDataComponent } from './components/form-personal-data/form-personal-data.component';
import { FormProfessionalContactComponent } from './components/form-professional-contact/form-professional-contact.component';

import { ModalRememberPasswordComponent } from './components/modal-remember-password/modal-remember-password.component';
import { ModalProfessionalProfileComponent } from './components/modal-professional-profile/modal-professional-profile.component';
import { ModalPortfolioImageComponent } from './components/modal-portfolio-image/modal-portfolio-image.component';
import { ModalPortfolioServicesComponent } from './components/modal-portfolio-services/modal-portfolio-services.component';



import { HomeFooterComponent } from './components/home-footer/home-footer.component';
import { FooterPageComponent } from './components/footer-page/footer-page.component';

@NgModule({
imports: [ BrowserModule, routing ],
providers: [ appRoutingProviders ],
declarations: [   MaterializeDirective, 

                HomePage, 
                RegisterPage,
                LoginPage,
                AdvancedRegisterPage,
                FinalizationPage,
                ContractPage,
                JoinTeamPage,
                TermsConditionsPage,
                PrivacyPage,
                PortfolioPage,                  


                NavComponent, 

                HomeBannerComponent, 
                HomeMakeYouComponent, 
                HomeOurWayComponent,
                HomeInovationComponent,
                HomeReasonComponent, 
                HomeFooterComponent,
                ModalHomeAdvantagesComponent,

                BannerHeaderComponent, 
                FooterPageComponent, 


                FormRegisterComponent, 
                FormLoginComponent,
                FormAddressDataComponent,
                FormAddUserPhotoComponent,
                FormPersonalDataComponent,
                FormProfessionalContactComponent,


                ModalRememberPasswordComponent,
                ModalProfessionalProfileComponent,
                ModalPortfolioImageComponent,
                ModalPortfolioServicesComponent
            ],
 bootstrap:    [ HomePage ]
 })
 export class AppModule { 

 }

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

import { HomePage }   from './pages/home/home.page';
import { RegisterPage }   from './pages/register/register.page';
import { LoginPage }   from './pages/login/login.page';
import { AdvancedRegisterPage }   from './pages/advanced-register/advanced-register.page';
import { FinalizationPage }   from './pages/finalization/finalization.page';
import { ContractPage }   from './pages/contract/contract.page';
import { JoinTeamPage }   from './pages/join-team/join-team.page';
import { TermsConditionsPage }   from './pages/terms-conditions/terms-conditions.page';
import { PrivacyPage }   from './pages/privacy/privacy.page';
import { PortfolioPage }   from './pages/portfolio/portfolio.page';

const appRoutes: Routes = [
{path: 'home',  component: HomePage, data: { title: 'Home' }},
{path: 'login', component: LoginPage , data: { title: 'Login'}},
{path: 'contract', component: ContractPage , data: { title: 'Contrato'}},
{path: 'finalization', component: FinalizationPage , data: { title: 'Finalização'}},
{path: 'register', component: RegisterPage , data: { title: 'Registro'}},
{path: 'advancedregister', component: AdvancedRegisterPage , data: { title: 'Registro Avançado'}},
{path: 'terms', component: TermsConditionsPage , data: { title: 'Termos e Condições'}},
{path: 'portfolio', component: PortfolioPage , data: { title: 'Portfolio'}}
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

chrome督察员：

Answer 1

我认为您忘了写默认路线所以请按照下面的说明编写，

const appRoutes: Routes = [

{path: '',  redirectTo:'home OR login' , pathMatch: 'full',  //<<<===default route


{path: 'home',  component: HomePage, data: { title: 'Home' }},
{path: 'login', component: LoginPage , data: { title: 'Login'}},
...
...
];