Angular versiyonunu 7'den Angular 8'e güncelledikten sonra server side rendering işlemlerinizde hata alabilirsiniz. Bu sorunu uzun uğraşlar sonunda çözmüş biri olarak çözümünden bahsedeceğim.


İlk olarak sorun Lazy Loading işleminden kaynaklanıyor. Hatırlarsanız eğer lazy loading rotaları Angular 8 ile beraber dinamik sözdizimini kullanıyordu. Böylelikle hata ayıklama ve uyarı vermek daha iyi olacaktı hani...

Hatırlamıyorsanız Angular 8'de neler değişti? yazımıza göz atın.

Angular Universal ile build ettiğimizde yaşadığımız sorunda tam olarak bu değişiklikten kaynaklanıyor. Öncelikle bu sorun nasıl bir şey onu görelim daha sonrada 2 tane çözüm paylaşacağım.


Build işlemi başarılı oluyor. Ve sitede açılıyor hiçbir sıkıntı yok gibi görünebilir. Ancak sayfa kaynağını açtığımızda SSR nin çalışmadığını anlayabiliriz.


Konsola baktığımızda da bir şeylerin ters gittiğini anlayabiliriz.


Hatalar şu şekilde;

Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined

Error: Uncaught (in promise): TypeError: __webpack_require__(...) is not a function

gibi uzuuun uzun yazıyor. Şimdi çözümlerimize geçelim;


Çözüm 1;

tsconfig.json dosyasını açın ve compilerOptions içerisindeki "module" nin değerini "commonjs" olarak değiştirin.


Bu kadar.

Bu şekilde yaparsanız proje boyutunuz olması gerektiğinden biraz daha yüksek olacaktır. O yüzden çözüm 2'yi uygulamanız daha iyi olacaktır.


Çözüm 2;

1. adım

tsconfig.json dosyasındaki compilerOptions içerisindeki "module" nin değeri "esnext" olduğundan emin olun.


2. adım

package.json dosyasını açın "scripts" içerisindeki "build:client-and-server-bundles" in değerinin sonuna --bundleDependencies all ekleyin. Yani;

"build:client-and-server-bundles": "ng build --prod --aot && ng run projenizinAdi:server:production --bundleDependencies all"

olmuş olacak.


3. adım

server.ts dosyasını açın ve şu satırları silin;

import {enableProdMode} from '@angular/core';
import {ngExpressEngine} from '@nguniversal/express-engine';
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
enableProdMode();
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

ve şu satırı ekleyin;

const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');


4. adım

main.server.ts dosyasını açın ve şu satırları en alta ekleyin;

export {ngExpressEngine} from '@nguniversal/express-engine';
export {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';


5. adım

webpack.server.config.js dosyasını açın ve objenin sonuna şunu ekleyin;

externals: {
  './dist/server/main': 'require("./dist/server/main")'
}

Eğer yine hata alırsanız birde aşağıdaki gibi denersiniz;

externals: {
  './dist/server/main': 'require("./server/main")'
}


Bu kadar. Artık npm run build:ssr && npm run serve:ssr komutumuzu tekrar çalıştırdığımızda build işlemide başarılı olacak siteye girdiğimizde ssr işlemide başarılı olacak.


Umarım faydalı olur.