При загрузке приложения Express / Angular 5, впервые размещенного в Google Cloud, в браузере появляется сообщение «Not Found» - PullRequest
Новая
       30

При загрузке приложения Express / Angular 5, впервые размещенного в Google Cloud, в браузере появляется сообщение «Not Found»

0 голосов
/ 18 мая 2018

Итак, у меня есть экспресс-приложение, которое обслуживает статическое угловое приложение 5 с сервисными работниками в Google Cloud, и по какой-то причине, когда я впервые загружаю приложение на что-либо, кроме индексного маршрута "/",на странице отображается сообщение «Не найдено».

Таким образом, мой маршрут "/ login / signin" не будет загружен или что-либо еще, пока я сначала не укажу маршрут "/", затем все загрузится правильно.Это происходит только один раз в любом браузере, который я использую, но после этого он работает нормально.

Я добавил подстановочные маршруты к моей экспресс-стороне, так как думал, что это может быть проблемой, но все равно не работает.Мое единственное предположение было бы связано с работником сервиса и его кэшированием.

Или это может быть связано с настройками безопасности в настройках облачного приложения Google, я не совсем уверен.

example of 'not found'

Вот мой экспресс-файл app.ts, он довольно простой.

app.ts 

import debug = require('debug');
import express = require('express');
import path = require('path');

import api from './routes/api';

const bodyParser = require('body-parser');
const app = express();

const cors = require('cors');
app.use(cors());
app.options('*', cors());

app.use(bodyParser.urlencoded({ extended: true }));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(express.static(path.join(__dirname, 'public')));

app.use('/api', api);

// Send all other requests to the Angular app
app.get('*', (req, res) => {
    res.render('/public/index.html');
});

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    var err = new Error('Not Found');
    err['status'] = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use((err: any, req, res, next) => {
        res.status(err['status'] || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use((err: any, req, res, next) => {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

app.set('port', process.env.port || 8080);

var server = app.listen(app.get('port'), function () {
    debug('Express server listening on port ' + server.address().port);
});

Единственное, что я думаю, этоможет быть полезным может быть мой модуль маршрутизации в Angular

app.routing.module.ts 

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

import {AdminModule} from '../../pages/main/admin/admin.module';
import {HomeComponent, HomeModule} from '../../pages/main/home/home.module';
import {LoginComponent, LoginModule, SigninComponent, SignupComponent} from '../../pages/login';
import {MainComponent} from '../../core/main';
import {NotFoundComponent} from '../../core/not-found';

import {AuthGuardService as AuthGuard} from '../services/guards/auth.guard.service';
import {RoleGuardService as RoleGuard} from '../services/guards/role.guard.service';
import {LoginGuardService as LoginGuard} from '../services/guards/login.guard.service';

import {ProfileComponent} from '../../pages/main/profile/profile.component';
import {GuardsModule} from '../../core/services/guards';


export const admin = 'app/pages/main/admin/admin.module#AdminModule';

export const routes: Routes = [
  { path: '',  redirectTo: 'main', pathMatch: 'full'},
  { path: 'login', component: LoginComponent, canActivate: [LoginGuard], data: { state: 'login' },
  children: [
    { path: 'signin', component: SigninComponent, data: { state: 'signin' }},
    { path: 'signup', component: SignupComponent, data: { state: 'signup' }},
  ]},
  { path: 'main', component: MainComponent, canActivate: [AuthGuard], data: { state: 'main' },
    children: [
      { path: 'home', component: HomeComponent, data: { state: 'home' }},
      { path: 'profile', component: ProfileComponent, data: { state: 'profile' }},
      {
        path: 'admin', loadChildren: admin, canActivate: [RoleGuard],
        data: {
          expectedRole: 'ADMIN_USER',
          state: 'admin'
        }
      },
      {path: '', redirectTo: 'home', pathMatch: 'full'}
    ]},
  { path: '**', component: NotFoundComponent }
];

  @NgModule({
    imports: [
      HomeModule,
      LoginModule,
      AdminModule,
      GuardsModule,
      RouterModule.forRoot(routes)],

    exports: [RouterModule]
  })
  export class AppRoutingModule {}

Edit 1

Так что я понял, что это был работник службы, ноЯ до сих пор не знаю, что вызывает это

ngsw-config.json 

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

1 Ответ

0 голосов
/ 18 мая 2018

Похоже, вам нужно добавить patterns в файл конфигурации вашего работника сервиса и включить глобальные URL.См. эту ссылку для получения дополнительной информации

...