js跳转到index.html,如何将所有路由重定向到nest.js中的index.html(角)?

洪彬
2023-12-01

您还可以将Cloud Functions for Firebase与Firebase Hosting一起使用。您在main.ts中拥有的一切都很好,使用这种方法,您甚至不需要控制器。您应该执行以下操作:

将index.html重命名为index2.html。这对于渲染路径很重要,否则,除了根/以外,所有路径上的渲染效果都很好。

更新angular.json使其具有以下"index": "apps/myapp/src/index2.html",(将index.html更改为index2.html)。 注意:index.html的路径可能与您不同,我正在使用Nx工作区。

将templatePath: join(BROWSER_DIR, 'index2.html'),添加到NestJS的ApplicationModule中,很可能是在服务器目录中将文件命名为app.module.ts。

像这样:

@Module({

imports: [

AngularUniversalModule.forRoot({

bundle: require('./path/to/server/main'), // Bundle is created dynamically during build process.

liveReload: true,

templatePath: join(BROWSER_DIR, 'index2.html'),

viewsPath: BROWSER_DIR

})

]

})

应该看起来像这样,或者至少是hosting部分。

{

"hosting": {

"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],

"public": "functions/dist/apps/path/to/browser",

"rewrites": [

{

"function": "angularUniversalFunction",

"source": "**"

}

]

}

}

在您的main.ts中,您需要在服务器上设置Cloud Functions。

在极简主义的情况下,它会像这样:

import * as admin from 'firebase-admin';

import * as functions from 'firebase-functions';

admin.initializeApp(); // Initialize Firebase SDK.

const expressApp: Express = express(); // Create Express instance.

// Create and init NestJS application based on Express instance.

(async () => {

const nestApp = await NestFactory.create(

ApplicationModule,

new ExpressAdapter(expressApp)

);

nestApp.init();

})().catch(err => console.error(err));

// Firebase Cloud Function for Server Side Rendering (SSR).

exports.angularUniversalFunction = functions.https.onRequest(expressApp);

使用这种方法,您不必关心NestJS方面的路由。您可以在Angular端设置所有内容,仅此而已。 Angular负责路由。您可能已经注意到,这是服务器端渲染(SSR),但是可以结合使用用于Firebase的NestJS + Cloud Functions将所有路由重定向到index.html(或更准确地说是index2.html)。另外,您还可以免费获得SSR:)

展示项目:

1)Firebase的Angular + Angular Universal(SSR)+云功能:https://github.com/Ismaestro/angular8-example-app(缺少NestJS)。

 类似资料: