Angular 4 + Universal Redirect на страницу 404, если найден неверный URL

Я использую Angular 4 + universal для своего приложения и использую приведенный ниже код для перенаправления на страницу 404, если найден какой-то неизвестный URL-адрес.

  {
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"}
]

}

он перенаправляет на localhost: 4200/404 для любого неизвестного URL-адреса, но если я перехожу по URL-адресу localhost: 4200, он также перенаправляет меня на 404.

любые выводы, безусловно, очень помогут.

Спасибо


typescript angular angular-universal angular4-forms
person Arryn    schedule 25.09.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

измените свой код следующим образом:

  {
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"}
person Raaj Dubey    schedule 25.09.2017

arrow_upward
2
arrow_downward

Поскольку в ответах пока отсутствует самая важная часть: вы должны не только сделать перенаправление, но и установить правильный код состояния. Для этого вам нужен объект запроса в вашем коде Angular. Затем вы можете получить доступ к объекту ответа, который обычно прикрепляется к запросу - по крайней мере, в экспресс.

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);
    }
  }

}

Если вы используете экспресс-движок и универсальный экспресс-движок 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/

person Can    schedule 07.02.2018
comment
Привет, Can K, я добавил указанный код, но все еще получаю статус 200 или статус 304. Я понял, что inject.preload.js имеет ошибку GET, но я не уверен, как это решить - person Shaun Chua; 15.06.2018
comment
Я столкнулся с той же проблемой, и я немного смущен тем, почему это применимо только к стороне сервера, а не к стороне клиента. Почему вы проверяете, не является ли это браузером, прежде чем отправлять 404? Не должны ли мы также отправить 404 от клиента? - person abyrne85; 04.04.2019
comment
Вы не можете отправить 404 в клиенте, и ответ вводится с необязательным, проверка if также может быть в ответе. Если я правильно помню, ответ будет неопределенным, если код запускается на клиенте. - person Can; 04.04.2019