Thiết kế website giá rẻ

Question

i have problem with Angular Universal when i load homepage http://localhost:85 page loads but in view source i get

<body class="h-100 v-robots">
    <app-core class="h-100">
      <div id="loading"></div>
      <div class="loadingSplash"><div class="loadingSplashImage"></div></div>
    </app-core>
  </body>
</html>

this is my routing
`import { Routes } from ‘@angular/router’;

export const ROUTES: Routes = [
{
path: ”,
loadChildren: () => import(‘./homepage/homepage.module’).then(m => m.HomepageModule)
},
{
path: ‘account’,
loadChildren: () => import(‘./account/account.module’).then(m => m.AccountModule)
},
{
path: ‘page/:name’,
loadChildren: () => import(‘./generic-static-page/static-page.module’).then(m => m.StaticPageModule)
},
{
path: ‘promotion/:slug’,
loadChildren: () => import(‘./landing-page/landing-page.module’).then(m => m.LandingPageModule)
},
{
path: ‘expert-advice’,
loadChildren: () => import(‘./expert-advice/expert.module’).then(m => m.ExpertModule)
},
{
path: ‘contact’,
loadChildren: () => import(‘./contact/contact.module’).then(m => m.ContactModule)
},
{
path: ‘checkout’,
loadChildren: () => import(‘./checkout/checkout.module’).then(m => m.CheckoutModule)
},
{
path: ‘wishlist’,
loadChildren: () => import(‘./wishlist/wishlist.module’).then(m => m.WishlistModule)
},
{
path: ‘**’,
loadChildren: () => import(‘./exceptions/exceptions.module’).then(m => m.ExceptionsModule)
}
];`

homepagemodule

@NgModule({
  imports: [CommonModule, SharedModule, 
    RouterModule.forChild([
    {
      path: '',
      component: HomepageComponent,
    },
  ])],
  declarations: [
    HomepageComponent,
    FeaturedCategoriesComponent,
    PostComponent,
    PromoSliderComponent,
    PostImagePipe,
    DecodeUrlPipe
  ]
})
export class HomepageModule {}

when i add custom path like

 {
      path: 'test',
      component: HomepageComponent,
    },

localhost:85/test page loads and in view source everything is correct

this is my server.ts

import '@angular/localize/init';
import 'zone.js/dist/zone-node';
import '@angular/compiler';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
import compression from 'compression';

import * as zlib from 'zlib';

// Polyfill for getComputedStyle for SSR
global.getComputedStyle =
  global.getComputedStyle ||
  function () {
    return {
      getPropertyValue: function () {
        return '';
      },
    } as any; // Type assertion to 'any'
  };
import { productRouter } from './server/routes/product.route';
import { productlistRouter } from './server/routes/productlist.route';
import { searchRouter } from './server/routes/search.route';
import { promotionRouter } from './server/routes/promotion.route';
import { loggerMidware } from './server/helpers/winston.helper';
import { SsrRequest } from './server/interfaces';
import { setGlobals } from './server/helpers/set-globals.helper';
// Constants for server configuration
export const DIST_FOLDER = join(process.cwd(), 'dist');
const PORT = parseInt(process.env.PORT, 10) || 85;

// Function to configure and return the Express app
export function app(): express.Express {
  const server = express();
  const indexHtml = existsSync(join(DIST_FOLDER, 'index.original.html')) ? 'index.original.html' : 'index';

  // Use Brotli compression
  server.use(
    compression({
      // Specify Brotli as the preferred encoding
      brotli: {
        enabled: true,
        zlib: {
          level: zlib.constants.BROTLI_MAX_QUALITY, // Use maximum Brotli compression level
        },
      },
    })
  );

  // Configure Angular Universal to use the ngExpressEngine
  server.engine(
    'html',
    ngExpressEngine({
      bootstrap: AppServerModule,
    })
  );

  server.set('view engine', 'html');
  server.set('views', DIST_FOLDER);
  server.disable('view cache');

  // Serve static files
  server.get(
    '*.*',
    express.static(DIST_FOLDER, {
      maxAge: '1y',
    })
  );
  // Application routes
  server.use('/product', productRouter);
  server.use('/productlist', productlistRouter);
  server.use('/search', searchRouter);
  server.use('/promotion', promotionRouter);

  // Server-side rendering of Angular routes
  server.get('*', loggerMidware, (req: SsrRequest, res: express.Response) => {
    setGlobals();
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

// Function to start the Express server
function run(): void {
  const server = app();
  server.listen(PORT, () => {
    console.log(`Node Express server listening on http://localhost:${PORT}`);
  });
}

// Ensure server runs only when this module is the entry point
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';

iam trying to get correct data in view source in localhost:85

Thiết kế website giá rẻ

Danh mục

Angular universal routing issue