Skip to content

Stivin/angular-universal-starter

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular RU Universal Starter Angular-RU Angular-RU Universal

Build Status

Repository with Angular CLI and Angular Universal

Translations:

Resources:

Plans:

  • Angular 6
  • document is not defined and window is not defined - here
  • Angular Material2 UI components - individual branch
  • Primeng UI components - [individual branch] (https://github.com/Angular-RU/angular-universal-starter/tree/primeng)
  • modules import depending on the platform (MockServerBrowserModule)
  • execution of queries to api on the server TransferHttp
  • work with cookies on the server UniversalStorage
  • Uses ngx-meta for SEO (title, meta tags, and Open Graph tags for social sharing).
  • uses ngx-translate to support internationalization (i18n)
  • uses ORIGIN_URL - for absolute queries
  • @angular/service-worker(ng add @angular/pwa --project universal-demo)
  • Ionic - it is necessary to compile the web version while there are problems separate branch

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:cw - build client
    • npm run ssr:sw - build server
    • npm run ssr:webpack -build server.js
    • npm run ssr:server - server with 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:

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](https: //github.com / angular/angular-cli/issues/7200) 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
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

About

A simple Angular Universal starter with Angular 5+

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 70.2%
  • CSS 20.8%
  • JavaScript 5.0%
  • HTML 4.0%