1

アプリケーションにAngular 4 +ユニバーサルを使用しており、不明なURLが見つかった場合は以下のコードを使用して404ページにリダイレクトしています。

  {
path: '',
component: FullLayoutComponent,
data: {
  title: 'Home'
},
children: [
  {
    path: '',
    loadChildren: 'app/core/components/static/static.module#StaticModule'
  },
  {
    path: 'move',
    loadChildren: 'app/core/components/move/move.module#MoveModule'
  },
  {
    path: 'account',
    loadChildren: 'app/core/components/account/account.module#AccountModule'
  },
  { path: "**",redirectTo:"404"}
]

}

不明な URL については localhost:4200/404 にリダイレクトしますが、URL localhost:4200 に移動すると、 404 にもリダイレクトされます。

どんなリードも確かに大いに役立ちます。

ありがとう

4

2 に答える 2

2

これまでの回答には最も重要な部分が欠けているため、リダイレクトを行うだけでなく、正しいステータス コードを設定する必要があります。そのためには、Angular コードに request オブジェクトが必要です。次に、通常はリクエストに添付されているレスポンスオブジェクトにアクセスできます-少なくとも明示的に。

export class NotFoundComponent implements OnInit {

  constructor(@Inject(PLATFORM_ID) private platformId: Object,
              @Optional() @Inject(RESPONSE) private response: Response) {
  }


  ngOnInit() {
    if (!isPlatformBrowser(this.platformId)) {
      this.response.status(404);
    }
  }

}

Express および ng ユニバーサル エクスプレス エンジンを使用している場合は、次のように要求と応答を依存性注入に渡すことができます。

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    extraProviders: [
      // make req and response accessible when angular app runs on server
      <ValueProvider>{
        provide: REQUEST,
        useValue: options.req
      },
      <ValueProvider>{
        provide: RESPONSE,
        useValue: options.req.res,
      },
    ]
  }).then(html => {
    callback(null, html);
  });
})

私は自分でこの問題に出くわしたので、ブログ投稿に手順を記録しました. さらにガイダンスが必要な場合は、以下をご覧ください。

https://blog.thecodecampus.de/angular-universal-handle-404-set-status-codes/

于 2018-02-07T10:18:19.737 に答える