应用程序始终以“ /”表示应用程序

时间:2019-03-10 15:52:36

标签: node.js angular firebase express angular-universal

拥有一个angular 7应用程序,并已使用node和express实现了通用角度,然后部署到了Firebase。

尝试加载除根(/)之外的页面时出现问题,这导致服务器返回根(/)的html而不是用户请求的页面。

不确定问题的出处(Angular,Angular Universal或Firebase)。

这是我的import tkinter as tk root = tk.Tk() root.geometry('300x200') edit = tk.Text(root) print(edit.winfo_reqwidth(), edit.winfo_reqheight()) edit.pack(fill=tk.BOTH, expand=1) label = tk.Label(root, bg="red") label.pack(fill=tk.X) tk.mainloop()

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

非常感谢您提供有关此问题的帮助!

2 个答案:

答案 0 :(得分:1)

useHash: true中删除app-routing.module.ts后,此问题已解决。

感谢,帮助您找到了解决方案。

答案 1 :(得分:0)

您的问题与Browser URL styles

有关

基于此answer:尝试将重写从"function": "ssrApp"更改为"destination": "/index-server.html"

请求index-server.html将触发该功能。