Question

我有一个简单的Angular示例，其中路由不起作用。我已经放入其中的所有其他组件都有效，但从今天开始，没有其他组件可以工作。在调用路径时，我总是得到＆＃34;错误404 / test＆＃34;形成Angular CLI。

这是我的app.module.ts

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

import { EventAppComponent } from './events-app.component'
import { EventsListComponent } from './events/events-list.component'
import { EventThumbnailComponent } from './events/events-thumbnail.component'
import { NavBarComponent } from './nav/navbar.component'
import { EventDetailsComponent } from './events/event-details/event-details.component'
import { CreateEventComponent } from './events/create-event.component'
import { Error404Component } from './errors/404.component'
import { TestComponent } from './events/test.component'

import { EventService } from './events/shared/event.service'
import { ToastrService } from './common/toastr.service'
import { EventRouteActivator } from './events/event-details/event-route-activator.service'

import { appRoutes } from './route'

@NgModule({
    imports: [
        BrowserModule,
        RouterModule.forRoot(appRoutes)
    ], 
    declarations: [
        EventAppComponent,
        EventsListComponent,
        EventThumbnailComponent,
        EventDetailsComponent,
        NavBarComponent,
        CreateEventComponent,
        Error404Component,
        TestComponent
    ],
    providers: [ EventService, ToastrService, EventRouteActivator ],
    bootstrap: [ EventAppComponent ]
})

export class AppModule {}

这是我的route.ts

import { Routes } from '@angular/router'
import { EventsListComponent } from './events/events-list.component'
import { EventDetailsComponent } from './events/event-details/event-details.component'
import { CreateEventComponent } from './events/create-event.component'
import { Error404Component } from './errors/404.component'
import { EventRouteActivator } from './events/event-details/event-route-activator.service'
import { TestComponent } from './events/test.component'

export const appRoutes: Routes = [
    { path: 'test', component: TestComponent },
    { path: 'events/new', component: CreateEventComponent },
    { path: 'events', component: EventsListComponent },
    { path: 'events/:id', component: EventDetailsComponent, canActivate: [EventRouteActivator] },
    { path: '404', component: Error404Component },
    { path: '', redirectTo: '/events', pathMatch: 'full' }
]

test.component.ts（不工作localhost：8808 / test）

import { Component } from '@angular/core'

@Component({
  template:
  `
    <h1>Hello World</h1>
  `,
  styles: [``]
})

export class TestComponent {
  constructor() {

  }
}

这是一个工作组件（localhost：8808/404）：

import { Component } from '@angular/core'

@Component({
  template: `
    <h1 class="errorMessage">404'd</h1>
  `,
  styles: [`
    .errorMessage { 
      margin-top:150px; 
      font-size: 170px;
      text-align: center; 
    }`]
})

export class Error404Component {
  constructor() {

  }
}

重命名时

{ path: '404', component: Error404Component },

到

{ path: '405', component: Error404Component },

我也遇到了这个错误。我错过了什么？当Strg +单击组件名称时，VS Code会将我带到类中，因此我认为文件路径是正确的。

编辑：我也可以更改

{ path: '', redirectTo: '/events', pathMatch: 'full' }

到

{ path: '', redirectTo: '/test', pathMatch: 'full' }

然后我重定向到正确的页面@ localhost：8808 / test。但是，再次在URL栏中输入以直接转到此URL后，它会再次失败。

Answer 1

所以这是我对路由模块的一个例子。与你所拥有的有点不同。

<强> app.routing.ts

loop1  x=new y=old 
loop2  z=new  x=old

然后在我的 app.module.ts 中我调用这样的路径文件：

clc;
  clear;
 format long;
 x=input('input  high guess:      ');
 y=input('input low guess:      ');    
 N=100;
 P=1;
 T=[];
 for i= 1:N

f1=(x.^3)-(2*x.^2)-(4*x)+8;
f2=(y.^3)-(2*y.^2)-(4*y)+8;
 z=x-(((f1)*(y-x))/(f2-f1));

  Z=(z.^3)-(2*z.^2)-(4*z)+8;
  x=z;
  y=x;
   T=[T;z];

   end

   disp(T);

希望这会有所帮助

角度路由无法正常工作 - 找不到404错误

1 个答案: