transloco

@nguniversal/express-engine always build environment dev


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.


Solution

  • 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"
        }
    ]