server side rendering - Class constructor AppComponent2 cannot be invoked without 'new' Angular 16 SSR - Stack O

I have an angular app with standalone compoents that i migrate from version 15 to 16 and when i try to

I have an angular app with standalone compoents that i migrate from version 15 to 16 and when i try to run my app via ssr i get error like :

TypeError: Class constructor AppComponent2 cannot be invoked without 'new'

I don't have this AppComponent2 in my app, only AppComponent.

server.ts

import 'zone.js/node';
import 'reflect-metadata';

import {ngExpressEngine} from '@nguniversal/express-engine';
import * as express from 'express';
import {existsSync} from 'fs';
import {join} from 'path';

const domino = require('domino');

import {LRUCache} from 'lru-cache'

import 'localstorage-polyfill'
import {AppComponent} from "app/appponent";

// Set up LRU cache
const ssrCache = new LRUCache({
    max: 50, // Maximum number of items in the cache
    ttl: 1000 * 60 * 60 // Cache for 1 hour
});

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
    const server = express();
    const distFolder = join(process.cwd(), 'dist/my-app/browser');
    const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
    const win = domino.createWindow(indexHtml);
    global['localStorage'] = localStorage;
    global['window'] = win;
    global['document'] = win.document;
    global['DOMTokenList'] = win.DOMTokenList;
    global['Node'] = win.Node;
    global['Text'] = win.Text;
    global['HTMLElement'] = win.HTMLElement;
    global['Event'] = win.Event;
    global['Event']['prototype'] = win.Event.prototype;
    global['KeyboardEvent'] = win.Event;
    global['MouseEvent'] = win.Event;

    // const proxy = httpProxy.createProxyServer({changeOrigin: true});
    // server.use('/api/', (req, res) => {
    //     console.log('[node] req.url', req.url);
    //     // Forward the request to the backend server (replace with your backend URL)
    //     proxy.web(req, res, {
    //         target: 'http://localhost:3000/api/',
    //         changeOrigin: true
    //     });
    // });

    const nonSSRRoutes = ['/app/*'];
    server.get(nonSSRRoutes, (req, res) => {
        console.log(`Not rendering SSR for ${req.originalUrl}`);
        res.sendFile(join(distFolder, 'index.html'));
    });

    // Our Universal express-engine (found @ )
    server.engine('html', ngExpressEngine({
        bootstrap: AppComponent,
    }));

    server.set('view engine', 'html');
    server.set('views', distFolder);

    // Example Express Rest API endpoints
    // server.get('/api/**', (req, res) => { });
    // Serve static files from /browser
    server.get('*.*', express.static(distFolder, {
        maxAge: '1y'
    }));

    // All regular routes use the Universal engine
    // @ts-ignore
    server.get('*', (req, res) => {
        const url = req.originalUrl;

        // Check if the request is for a cached route
        const cachedRoutes = ['/', '/page-not-found'];
        if (cachedRoutes.some(route => url === route || url.startsWith(route + '/?'))) {
            const cachedPage = ssrCache.get(url);

            if (cachedPage) {
                console.log('Serving from cache:', url);
                return res.send(cachedPage);
            } else {
                res.render(indexHtml, {req}, (err, html) => {
                    if (err) {
                        // @ts-ignore
                        return req.next(err);
                    }

                    ssrCache.set(url, html);
                    res.send(html);
                });
            }
        } else {
            // Non-cached routes
            res.render(indexHtml, {req});
        }
    });

    return server;
}


function run(): void {
    const port = process.env['PORT'] || 4001;

    // Start up the Node server
    const server = app();

    server.listen(port, () => {
        console.log(`Node Express server listening on http://localhost:${port}`);
    });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
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';

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import {appConfig} from "app/app.config";
import {AppComponent} from "app/appponent";

bootstrapApplication(AppComponent, appConfig)
    .catch((err) => console.error(err));


server.ts

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideServerRendering } from '@angular/platform-server';
import { provideHttpClient } from '@angular/common/http';
import {AppComponent} from "app/appponent";

enableProdMode();

bootstrapApplication(AppComponent, {
    providers: [
        provideHttpClient(),
        provideServerRendering()
    ]
}).catch(err => console.error(err));


appponent

@Component({
    selector: 'app-root',
    templateUrl: './appponent.html',
    styleUrls: ['./appponent.scss'],
    standalone: true,
    imports: [
        RouterOutlet,
        CommonModule,
    ]
})
export class AppComponent {
    title: string = 'my-app';

    constructor(
    ) {
    }
}


发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744753611a4591746.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信