Skip to content
Angular 7 Universal repo with many features
Branch: master
Clone or download
Latest commit ee0f721 May 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode up Feb 24, 2019
e2e init Nov 6, 2017
src fix: routing with right guard Apr 27, 2019
test test: up Apr 27, 2019
.dockerignore fix: build webpack and docker.ssr Aug 14, 2018
.editorconfig build: update packages Aug 25, 2018
.gitignore Before checkout to 'socket' branch Mar 27, 2019
.prettierrc refactor: prettier --config ./.prettierrc --list-different \"src/{app… Oct 17, 2018
CHANGELOG.md chore(release): 7.0.0 Oct 24, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Oct 12, 2018
Dockerfile.csr refactor: fix test timeout, cancel karma test at docker build Dec 14, 2018
Dockerfile.ssr feat: add mocha test:ssr and run test with build Dec 14, 2018
LICENSE Initial commit Nov 6, 2017
README-RO.md update readme Oct 20, 2018
README-RU.md typo Apr 15, 2019
README.md Update README.md May 23, 2019
angular.json update config for server dev - important for ssr:watch Apr 27, 2019
debug.md more example and test for use cookies Apr 27, 2019
defined.md new readme Nov 22, 2017
gzip.conf add docker Nov 13, 2017
karma.conf.js update angular version to 6.0.0. May 4, 2018
mime.types add docker Nov 13, 2017
nginx.conf Hot Fix Mar 27, 2019
ngsw-config.json feat(pwa): ng add @angular/pwa --project universal-demo May 22, 2018
package-lock.json more example and test for use cookies Apr 27, 2019
package.json more example and test for use cookies Apr 27, 2019
prerender.ts Fixed bug with prerender on Windows system May 14, 2019
protractor.conf.js init Nov 6, 2017
server.ts Update server.ts Mar 13, 2019
static.paths.ts refactor: prettier --config ./.prettierrc --list-different \"src/{app… Oct 17, 2018
tsconfig.json Create shared module and layouts module Feb 12, 2018
tslint.json Refactrored auth/form services and home component. Mar 27, 2019
webpack.config.js fix build Feb 28, 2019

README.md

Angular RU Universal Starter Angular-RU Angular-RU Universal

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:

Resources:

Plans:

  • Angular 7
  • 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: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

You can’t perform that action at this time.