2

I am trying to learn Angular Universal using nestjs It seems to be working fine at my localhost port 4000 but when the build is made on Netlify I can see the site is working but the Angular Universal is not working.

I use npm run serve:ssr in my localhost to run the project. Whereas in netlify I have configured the build and deploy setting as below screenshot.

Netlify build and deploy setting

My live site click here

package.json

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run bharatas:serve-ssr",
    "serve:ssr": "node dist/bharatas/server/main.js",
    "build:ssr": "ng build --prod && ng run bharatas:server:production",
    "prerender": "ng run bharatas:prerender",
    "prebuild:ssr": "ngcc"
  },

server/app.module.ts

import { Module } from '@nestjs/common';
import { AngularUniversalModule } from '@nestjs/ng-universal';
import { join } from 'path';
import { AppServerModule } from '../src/main.server';

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      bootstrap: AppServerModule,
      viewsPath: join(process.cwd(), 'dist/bharatas/browser')
    })
  ]
})
export class AppModule {}

server.ts

import 'zone.js/dist/zone-node';
import './server/main';
export * from './src/main.server';

Can you help me what I am doing wrong. Why can't I see content while I do view source ? Why it is working on only my localhost:4000

1
  • 2
    Yes same issue with me. Commented Jan 4, 2021 at 8:26

1 Answer 1

1

First of all you need to install plugin in netlify dashboard: Angular Universal (https://github.com/netlify/netlify-plugin-angular-universal#readme).
But .toml file from docs wasn't working for me (see working configs below - netlify.toml)
Build settings:

Base directory: Not set
Build command: npm run prerender
Publish directory: dist/project-name/browser

netlify.toml

[build]
  command = "npm run prerender -- --c production && ng run project-name:serverless:production"
  publish = "dist/project-name/browser"

[[plugins]]
  package = "@netlify/plugin-angular-universal"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

package.json

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "prerender": "ng run project-name:prerender",
  "dev:ssr": "ng run project-name:serve-ssr",
  "build:ssr-prod": "ng build --configuration production && ng run project-name:server",
  "build:ssr": "ng build --configuration development && ng run project-name:server",
  "serve:ssr": "PORT=3333 node dist/project-name/server/main.js"
},
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.