Skip to content

Commit e50aa9e

Browse files
authored
Create README-RO.md
1 parent d63eaa3 commit e50aa9e

File tree

1 file changed

+119
-0
lines changed

1 file changed

+119
-0
lines changed

README-RO.md

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
# Angular RU Universal Starter [![Angular-RU](https://img.shields.io/badge/Telegram_chat:-Angular_RU-216bc1.svg?style=flat)](https://t.me/angular_ru) [![Angular-RU Universal](https://img.shields.io/badge/Telegram_chat:-Angular_RU_Universal-14b102.svg?style=flat)](https://t.me/angular_universal_ru)
2+
3+
[![Build Status](https://semaphoreci.com/api/v1/angularru/angular-universal-starter/branches/master/badge.svg)](https://semaphoreci.com/angularru/angular-universal-starter)
4+
5+
> Repozitoriul Angular CLI și Angular Universal
6+
7+
**Traduceri**:
8+
- [Rusă](./README-RU.md)
9+
- [Engleză](./README.md)
10+
11+
**Resurse**:
12+
- chat public https://t.me/angular_universal_ru
13+
- http://master-ssr.gorniv.com/ - rendering pe server master
14+
- http://master-csr.gorniv.com/ - rendering pe client master
15+
16+
# Planuri:
17+
- [x] Angular 5
18+
- [x] `document is not defined` și `window is not defined` - [aici](./defined.md)
19+
- [x] [Angular Material2](https://material.angular.io/) **UI componente** - [branch aparte](https://github.com/Angular-RU/angular-universal-starter/tree/material2)
20+
- [x] [Primeng](https://www.primefaces.org/primeng/) **UI компоненты** - [branch aparte](https://github.com/Angular-RU/angular-universal-starter/tree/primeng)
21+
- [x] importăm modulele în dependență de platformă (`MockServerBrowserModule`)
22+
- [x] comunicăm cu api pe server `TransferHttp`
23+
- [x] folosim Cookies pe server `UniversalStorage`
24+
- [x] folosim **[ngx-meta](https://github.com/fulls1z3/ngx-meta)** pentru SEO (*title, meta tags, and Open Graph tags for social sharing*).
25+
- [x] folosim ngx-translate pentru i18n
26+
- [x] folosim ORIGIN_URL - pentru drumuri absolute
27+
- [ ] @angular/service-worker
28+
- [ ] Ionic - e nevoie să creăm versiunea web, până când avem probleme [branch aparte](https://github.com/Angular-RU/angular-universal-starter/tree/ionic)
29+
30+
## Cum să pornim?
31+
- `yarn` sau `npm install`
32+
- `yarn start` sau `npm run start` - pentru rendering pe client
33+
- `yarn ssr` sau `npm run ssr` - pentru rendering pe server
34+
- `yarn build:universal` sau `npm run build:universal` - pentru production
35+
- `yarn server` sau `npm run server` - pentru a porni serverul
36+
- `yarn build:prerender` sau `npm run build:prerender` - pentru a genera statica pe `static.paths.ts`
37+
- cum pornim watch: odată: `yarn ssr:cw` sau `npm run ssr:cw`, odată: `yarn ssr:sw` sau `npm run ssr:sw`, după fiecare modificare: `yarn ssr:server` sau `npm run ssr:server`
38+
39+
## Cum să folosesc repozitoriul în proiectul meu?
40+
Pentru a adăuga ssr în proiectul dumneavoastră e nevoie de următoarele fișiere:
41+
- .angular-cli.json
42+
- server.ts
43+
- prerender.ts
44+
- webpack.config.js
45+
- main.server.ts
46+
- main.browser.ts
47+
- modules/*
48+
- forStorage/*
49+
- environments/*
50+
- app.browser.module.ts
51+
- app.server.module.ts
52+
53+
## Linkuri
54+
Exemplu oficial în engleză: https://github.com/angular/universal-starter
55+
Module folosite pentru universal:
56+
- https://github.com/angular/universal/tree/master/modules/aspnetcore-engine - motorul pentru .net core
57+
- https://github.com/angular/universal/tree/master/modules/common - TransferHttpCacheModule, la acest moment nu-l folosesc, dar dacă știți pentru ce și unde se poate de-l pus - deschideți o issue sau pull request
58+
- https://github.com/angular/universal/tree/master/modules/express-engine - Express Engine pentru a porni renderingul pe node, folosim în repozitoriul nostru. Fiți atenți, versiunea acutală nu mai mică de 5.0.0-beta.5
59+
- https://github.com/angular/universal/tree/master/modules/hapi-engine - Hapi Engine un motor alternativă. În exemplu nu folosim, în principui nu-i mare diferența în conectare față de express-engine
60+
- https://github.com/angular/universal/tree/master/modules/module-map-ngfactory-loader - modul pentru LazyLoading - e ceva folositor. Fiți atenți, versiunea actuală nu mai mică de 5.0.0-beta.5
61+
62+
## Caracteristici (Important)
63+
- modulul pentru TransferHttp folosește `import { TransferState } from '@angular/platform-browser';` și e nevoie de el pentru a realiza interogările la rest api pe server și pentru a evita dublarea interogărilor (pe client). Uitați-vă la `home.component.ts` (așteptați 3 secunde)
64+
65+
```ts
66+
this.http.get('https://reqres.in/api/users?delay=3').subscribe(result => {
67+
this.result = result;
68+
});
69+
```
70+
- `export const AppRoutes = RouterModule.forRoot(routes, { initialNavigation: 'enabled' });` - ca pagina să nu clipească!
71+
72+
- pentru a lucra cu cookie e scris `AppStorage`, care cu ajutorul DI ne permite să facem realizare pentru server și browser. Uitați-vă la `server.storage.ts` și `browser.storage.ts` pentru a vedea realizările. În `server.ts` este
73+
```ts
74+
providers: [
75+
{
76+
provide: REQUEST, useValue: (req)
77+
},
78+
{
79+
provide: RESPONSE, useValue: (res)
80+
}
81+
]
82+
```
83+
pentru a lucra cu REQUEST și RESPONSE prin DI - asta-i necesar pentru a lucra cu UniversalStorage când folosim cookies.
84+
85+
- webpack.config.js e scris doar ca să strângă fișierul server.ts și server.js, pentru că angular-cli are o [eroare](https://github.com/angular/angular-cli/issues/7200) la 3d dependențele.
86+
- pentru a rezolva o mare parte din probleme se folosește următorul cod `server.ts`
87+
88+
Rezolvarea problemei cu variabilele globale, inclusiv `document is not defined` și `window is not defined`
89+
```ts
90+
const domino = require('domino');
91+
const fs = require('fs');
92+
const path = require('path');
93+
const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
94+
const win = domino.createWindow(template);
95+
const files = fs.readdirSync(`${process.cwd()}/dist-server`);
96+
const styleFiles = files.filter(file => file.startsWith('styles'));
97+
const hashStyle = styleFiles[0].split('.')[1];
98+
const style = fs.readFileSync(path.join(__dirname, '.', 'dist-server', `styles.${hashStyle}.bundle.css`)).toString();
99+
100+
global['window'] = win;
101+
Object.defineProperty(win.document.body.style, 'transform', {
102+
value: () => {
103+
return {
104+
enumerable: true,
105+
configurable: true
106+
};
107+
},
108+
});
109+
global['document'] = win.document;
110+
global['CSS'] = style;
111+
// global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
112+
global['Prism'] = null;
113+
114+
```
115+
116+
```ts
117+
global['navigator'] = req['headers']['user-agent'];
118+
```
119+
asta ne permite să excludem o parte din problemele apărute cu `undefined`.

0 commit comments

Comments
 (0)