I used @nguniversal/express-engine and @ngneat/transloco, but when i build with command: npm run build:ssr then always build link dev: localhost:4200. This is function in transloco-root.module.ts always build with link dev:
getTranslation(lang: string) {
return this.http.get<Translation>(`${environment.baseUrl}/assets/i18n/${lang}.json`)
}
environment.prod.ts:
export const environment = {
production: true,
baseUrl: 'http://xxxx.com',
}
environment.ts
export const environment = {
production: false,
baseUrl: 'http://localhost:4200',
}
I added some files as below:
main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app/app.module'
import 'stream-browserify'
import { environment } from './app/environments/environment'
import { enableProdMode } from '@angular/core'
if (environment.production) {
console.log(environment.baseUrl)
enableProdMode()
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err))
})
File server.ts:
import 'zone.js/node'
import { APP_BASE_HREF } from '@angular/common'
import { ngExpressEngine } from '@nguniversal/express-engine'
import * as express from 'express'
import { existsSync } from 'node:fs'
import { join } from 'node:path'
import { AppServerModule } from './src/main.server'
export function app(): express.Express {
const server = express()
const distFolder = join(process.cwd(), 'dist/web/browser')
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index'
server.engine(
'html',
ngExpressEngine({
bootstrap: AppServerModule,
})
)
server.set('view engine', 'html')
server.set('views', distFolder)
server.get(
'*.*',
express.static(distFolder, {
maxAge: '1y',
})
)
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] })
})
return server
}
function run(): void {
const port = process.env['PORT'] || 8081
const server = app()
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`)
})
}
declare const __non_webpack_require__: NodeRequire
const mainModule = __non_webpack_require__.main
const moduleFilename = (mainModule && mainModule.filename) || ''
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run()
}
export * from './src/main.server'
Where did I go wrong, please show me. Thank you.
I found my fault. I miss setting architect/build/configurations/production in angular.json this:
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]