Приложение всегда служит '/', чтобы выразить приложение - PullRequest
Новая
       8

Приложение всегда служит '/', чтобы выразить приложение

0 голосов
/ 10 марта 2019

Имейте приложение angular 7 и внедрили angular universal, используя node и express, а затем разверните его в firebase.

Возникла проблема при попытке загрузить страницы, отличные от корня (/), из-за которых серверчтобы вернуть HTML-код корня (/), а не страницы, которую запрашивает пользователь.

Не уверен, откуда возникла проблема (Angular, Angular Universal или Firebase).

Это мойindex.ts: 

import * as functions from 'firebase-functions';

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import {renderModuleFactory} from '@angular/platform-server';
import {enableProdMode} from '@angular/core';

import * as express from 'express';
import {readFileSync} from 'fs';

enableProdMode();

const app = express();

const indexHtml = readFileSync(__dirname + '/index-server.html', 'utf-8').toString();

const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./main');

import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', (_, options, callback) => {
  // Always '/' (root path)
  console.log('OPTIONS.REQ.URL', options.req.url);

  renderModuleFactory(AppServerModuleNgFactory, {
    // My index-server.html
    document: indexHtml,
    url: options.req.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');
app.set('views', __dirname);

app.get('*.*', express.static(__dirname + '/dist', {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render(__dirname + '/index-server.html', {req});
});

exports.ssrApp = functions.https.onRequest(app);

Это мой app-routing.module.ts: 

import {RouterModule, Routes} from '@angular/router';
import {NgModule} from '@angular/core';
import {HomePageComponent} from './home-page/home-page.component';
import {ToursComponent} from './tours/tours.component';
import {MaltaComponent} from './malta/malta.component';
import {AboutComponent} from './about/about.component';
import {ContactComponent} from './contact/contact.component';
import {TourComponent} from './tours/tour/tour.component';
import {ErrorComponent} from './error/error.component';
import {BlogComponent} from './blog/blog.component';
import {BlogPageComponent} from './blog/blog-page/blog-page.component';
import {PageResolver} from './services/pages/page-resolver.service';

const AppRoutes: Routes = [
  {
    path: 'home',
    component: HomePageComponent,
    data: {
      state: 'home',
      pageId: 'home'
    },
    resolve: {
      page: PageResolver
    }
  },
  {
    path: 'tours',
    component: ToursComponent,
    data: {
      state: 'tours',
      pageId: 'tours'
    },
    resolve: {
      page: PageResolver
    }
  },
  {
    path: 'tours/:id',
    component: TourComponent,
    data: {
      state: 'tour'
    }
  },
  {
    path: 'blog',
    component: BlogComponent,
    data: {
      state: 'blogs',
      pageId: 'blog'
    },
    resolve: {
      page: PageResolver
    }
  },
  {
    path: 'blog/:id',
    component: BlogPageComponent,
    data: {
      state: 'blog'
    }
  },
  {
    path: 'malta',
    component: MaltaComponent,
    data: {
      state: 'malta',
      pageId: 'malta'
    },
    resolve: {
      page: PageResolver
    }
  },
  {
    path: 'about',
    component: AboutComponent,
    data: {
      state: 'about',
      pageId: 'about'
    },
    resolve: {
      page: PageResolver
    }
  },
  {
    path: 'contact',
    component: ContactComponent,
    data: {
      state: 'contact',
      pageId: 'contact'
    },
    resolve: {
      page: PageResolver
    }
  },
  {
    path: 'something-went-wrong',
    component: ErrorComponent,
    data: {
      state: 'error',
      pageId: 'error'
    }
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: '/something-went-wrong'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(AppRoutes, {
      useHash: true,
      scrollPositionRestoration: 'enabled',
      initialNavigation: 'enabled'
    })
  ],
  exports: [RouterModule]
})

export class AppRoutingModule {

}

Это мой firebase.json: 

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrApp"
      }
    ]
  },
  "functions": {
    "predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
  }
}

Буду признателен за любую помощь сэтот выпуск!

Ответы [ 2 ]

1 голос
/ 10 марта 2019

Проблема решена после удаления useHash: true из app-routing.module.ts.

Спасибо yeya за помощь в поиске решения.

0 голосов
/ 10 марта 2019

Ваша проблема связана с Стили URL браузера

Основано на этом ответе : Попробуйте изменить изменения с "function": "ssrApp" на "destination": "/index-server.html"

Запрос index-server.html вызовет функцию.

...