Angular 9 Universal repo with many features
If you like this project please show your support with a GitHub star. Much appreciated!
Repository with Angular CLI and Angular Universal
Translations:
Resources:
document is not defined
and window is not defined
- here
MockServerBrowserModule
)TransferHttp
UniversalStorage
ng add @angular/pwa --project universal-demo
)yarn
or npm install
yarn start
or npm run start
- for client renderingyarn ssr
or npm run ssr
- for server-side renderingyarn build:universal
or npm run build:universal
- for assembly in releaseyarn server
or npm run server
- to start the serveryarn build:prerender
or npm run build:prerender
- to generate static by static.paths.ts
npm run ssr:watch
To transfer ssr to your repository, you need the following files:
Official example in English: https://github.com/angular/universal-starter Modules used for universal:
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
.
ng update @angular/cli
preboot
is not working now