trilonio/ng-universal

Angular Universal & SEO Utilities/Helpers - Brought to you by Trilon

ng-universal's Issues

Can't setup ng-universal on simple project

Hi guys,
I'm trying to setup this interesting library to our project but following the example I can't make it work.

At the moment we are not using angular universal but we'll do in future. Is it possible to use ng-universal without angular universal?
I made a simple project on stackblitz to test and the title and other meta tags inside the application iframe are not updating.
Instead, if I use the angular Title service (with this.title.setTitle('hello') it work normally.
Am I doing somthing wrong?

Thank you
Davide

Feat: Add application/ld+json initialization & support

additionalWindowMocks not working

I am using the option additionalWindowMocks, however I am receiving an error from the element I informed in additionalWindowMocks not defined.
I use express-engine

Error:

My Server:

import 'zone.js/dist/zone-node';

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, readFileSync } from 'fs';
import { createGlobalMocks } from '@trilon/universal-ssr-mocks';

// 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/browser');
    const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

    // Mock
    // Make sure you grab wherever your index.html is, we want to use that html as a -base- for Domino
    // const DIST_FOLDER = join(process.cwd(), 'dist');
    // const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
    const template = readFileSync(join(distFolder, 'index.html')).toString();
    createGlobalMocks(template, { $: {}, Element: () => {} }, { $: {}, Element: () => {} });

    // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
    server.engine('html', ngExpressEngine({
        bootstrap: AppServerModule,
    }));

    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
    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 || 4000;

    // 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';

Config

Angular CLI: 11.1.4
Node: 12.18.1
OS: linux x64

Angular: 11.1.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1101.4
@angular-devkit/build-angular     0.1101.4
@angular-devkit/build-optimizer   0.1101.4
@angular-devkit/core              11.1.4
@angular-devkit/schematics        11.1.4
@angular/cli                      11.1.4
@angular/flex-layout              11.0.0-beta.33
@nguniversal/builders             11.1.2
@nguniversal/express-engine       11.1.2
@schematics/angular               11.1.4
@schematics/update                0.1101.4
rxjs                              6.6.3
typescript                        4.1.4

angular 10 compatibility issue

Hello,

I am getting error trying to ng update my project with following error:
Package "@trilon/ng-universal" has an incompatible peer dependency to "@angular/core" (requires "^7.0.0" (extended), would install "10.0.7").

Any plans on updating this library ?

Usage

@MarkPieszak How can this (https://github.com/TrilonIO/ng-universal#createwindowmocks) be used with this (https://github.com/TrilonIO/aspnetcore-angular-universal) as webpack.config.js rather than server.ts? Thanks muchly for the direction...