Skip to content

Commit e4cf6a3

Browse files
author
Кравченко Игорь Александрович
committed
update readme
1 parent efc58c5 commit e4cf6a3

File tree

1 file changed

+53
-0
lines changed

1 file changed

+53
-0
lines changed

README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,55 @@
11
# angular-universal-starter
22
Репозиторий с angular cli и universal
3+
4+
- публичный чат https://t.me/angular_universal_ru
5+
6+
## Как запустить
7+
- `yarn` или `npm install`
8+
- `npm run start` - для клиенского рендеринга
9+
- `npm run ssr` - для серверного рендеринга
10+
- `npm run build:universal` - для сборки в релиз
11+
- `npm run server` - для запуска сервера
12+
13+
## Ссылки
14+
Официальный пример на анлийиском: https://github.com/angular/universal-starter
15+
Модули используемые для universal:
16+
- https://github.com/angular/universal/tree/master/modules/aspnetcore-engine -движок для .net core
17+
- https://github.com/angular/universal/tree/master/modules/common - TransferHttpCacheModule, на данный момент мной не используется, если знаете куда и зачем его встаить - напишите мне или в issue, pull request
18+
- https://github.com/angular/universal/tree/master/modules/express-engine - Express Engine для запуска рендеринга в node, в нашем приложении используется. Обратите внимание, что актуальная версия не ниже 5.0.0-beta.5
19+
- https://github.com/angular/universal/tree/master/modules/hapi-engine - Hapi Engine альтернативный движок для рендеринга. В примере не используется, принципиально в схеме подключения не отличается от express-engine
20+
- https://github.com/angular/universal/tree/master/modules/module-map-ngfactory-loader - модуль поиска модулей для LazyLoading - вещь нужная и используемая. Обратите внимание, что актуальная версия не ниже 5.0.0-beta.5
21+
22+
## Особенности
23+
- модуль для TransferHttp использует `import { TransferState } from '@angular/platform-browser';` и необходим для реализации запроса rest api на сервере и остутствия повторного запроса второй раз. Смотрите `home.component.ts` (задержка 3с)
24+
25+
```ts
26+
this.http.get('https://reqres.in/api/users?delay=3').subscribe(result => {
27+
this.result = result;
28+
});
29+
```
30+
31+
- для работы с куками написан `AppStorage`, которыйй при помощи DI позволяет отдавать разную реализацию для сервера и бразуера. Смотрите `server.storage.ts` и `browser.storage.ts` по реализациям. В `server.ts` есть
32+
```ts
33+
providers: [
34+
{
35+
provide: REQUEST, useValue: (req)
36+
},
37+
{
38+
provide: RESPONSE, useValue: (res)
39+
}
40+
]
41+
```
42+
для работы с REQUEST и RESPONSE через DI - это необходимо для реализации UniversalStorage при работе с cookies.
43+
44+
- webpack.config.js прописан исключительно для сборки файла server.ts в server.js, так как angular-cliт имеет [баг](https://github.com/angular/angular-cli/issues/7200) для работы с 3d зависимостями.
45+
- для решения части проблем используется следущий код в `server.ts`
46+
```ts
47+
global['window'] = global;
48+
global['document'] = template;
49+
global['navigator'] = req['headers']['user-agent'];
50+
global['CSS'] = null;
51+
```
52+
это позволяет убрать часть проблем при работе с `undefined`.
53+
54+
55+

0 commit comments

Comments
 (0)