Need help with angular-universal-starter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Angular-RU
506 Stars 195 Forks MIT License 455 Commits 15 Opened issues

Description

Angular 9 Universal repo with many features

Services available

!
?

Need anything else?

Contributors list

No Data

Angular RU Universal Starter Angular-RU Angular-RU Universal

Build Status Build Status

If you like this project please show your support with a GitHub star. Much appreciated!

Repository with Angular CLI and Angular Universal

Translations: - Русский - English - Românesc

Resources: - public chat https://t.me/angularuniversalru - https://ssr.angular.su/ - server-side rendering of the master - https://csr.angular.su/ - client rendering master

Plans:

  • [x] Angular 8
  • [x]
    document is not defined
    and
    window is not defined
    - here
  • [x] Angular Material2 UI components - individual branch
  • [x] Primeng UI components - individual branch
  • [x] modules import depending on the platform (
    MockServerBrowserModule
    )
  • [x] execution of queries to api on the server
    TransferHttp
  • [x] work with cookies on the server
    UniversalStorage
  • [x] Uses ngx-meta for SEO (title, meta tags, and Open Graph tags for social sharing).
  • [x] uses ngx-translate to support internationalization (i18n)
  • [x] uses ORIGIN_URL - for absolute queries
  • [x] @angular/service-worker(
    ng add @angular/pwa --project universal-demo
    )

How to start

  • yarn
    or
    npm install
  • yarn start
    or
    npm run start
    - for client rendering
  • yarn ssr
    or
    npm run ssr
    - for server-side rendering
  • yarn build:universal
    or
    npm run build:universal
    - for assembly in release
  • yarn server
    or
    npm run server
    - to start the server
  • yarn build:prerender
    or
    npm run build:prerender
    - to generate static by
    static.paths.ts
  • for watch with ssr -
    npm run ssr:watch

How to use this repository in your project:

To transfer ssr to your repository, you need the following files: - .angular-cli.json - server.ts - prerender.ts - webpack.config.js - main.server.ts - main.browser.ts - shared/* - forStorage/* - environments/* - app.browser.module.ts - app.server.module.ts

References

Official example in English: https://github.com/angular/universal-starter Modules used for universal: - https://github.com/angular/universal/tree/master/modules/aspnetcore-engine - web for .net core - https://github.com/angular/universal/tree/master/modules/common - TransferHttpCacheModule for http request only server side and sync with TransferHttp for browser - https://github.com/angular/universal/tree/master/modules/express-engine - Express Engine to run the rendering in node, in our application is used. Please note that the current version is not lower than 5.0.0-beta.5 - https://github.com/angular/universal/tree/master/modules/hapi-engine - Hapi Engine is an alternative engine for rendering. In the example is not used, in principle in the connection scheme does not differ from express-engine - https://github.com/angular/universal/tree/master/modules/module-map-ngfactory-loader - the module search module for LazyLoading - the thing needed and used. Please note that the current version is not lower than 5.0.0-beta.5

Features (Important)

  • The module for TransferHttp uses
    import {TransferState} from '@angular/platform-browser';
    and it is necessary to implement the request rest api on the server and the absence of the second request a second time. See
    home.component.ts
    (delay 3c)
this.http.get('https://reqres.in/api/users?delay=3').subscribe(result => {
    this.result = result;
});
  • export const AppRoutes = RouterModule.forRoot(routes, { initialNavigation: 'enabled' });
    - so that there is no flashing of the page!
  • to work with cookies, it is written

    AppStorage
    , which with DI allows you to give different implementations for the server and the browser. See
    server.storage.ts
    and
    browser.storage.ts
    for implementations. In
    server.ts
    there is
providers: [
    {
        provide: REQUEST, useValue: (req)
    },
    {
        provide: RESPONSE, useValue: (res)
    }
]

to work with REQUEST and RESPONSE via DI - this is necessary for implementing UniversalStorage when working with cookies.

  • webpack.config.js
    is written exclusively for building server.ts file in server.js, since angular-cli has bug to work with 3d dependencies. - To solve some problems, use the following code in
    server.ts
    Solving the problems of global variables, including
    document is not defined
    and
    window is not defined
    ``
    ts
    const domino = require('domino');
    const fs = require('fs');
    const path = require('path');
    const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
    const win = domino.createWindow(template);
    const files = fs.readdirSync(
    ${process.cwd()}/dist-server
    );
    // const styleFiles = files.filter(file => file.startsWith('styles'));
    // const hashStyle = styleFiles[0].split('.')[1];
    // const style = fs.readFileSync(path.join(__dirname, '.', 'dist-server',
    styles.${hashStyle}.bundle.css`)).toString();

global['window'] = win; Object.defineProperty(win.document.body.style, 'transform', { value: () => { return { enumerable: true, configurable: true }; }, }); global['document'] = win.document; global['CSS'] = null; // global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest; global['Prism'] = null; ```

  global['navigator'] = req['headers']['user-agent'];

this allows you to remove some of the problems when working with

undefined
.

Migrate 5 to 6

  • https://github.com/ReactiveX/rxjs-tslint
  • ng update @angular/cli
  • preboot
    is not working now

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.