universal

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #llm #android #linux #docker #macos #nodejs #java #windows #cli #ios #openai

(★ 112)

A counterpart to common package to be used with Angular Universal

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - feature_request.md
- CODEOWNERS
- FUNDING.yml
- PULL_REQUEST_TEMPLATE.md
- - karma.conf.js
  - LICENSE
  - ng-package.json
  - package.json
  - tsconfig.lib.json
  - tsconfig.spec.json
- coveralls.js
- postbuild.js
- syncVersions.js
.editorconfig
.eslintrc.js
.gitignore
.travis.yml
angular.json
CHANGELOG.md
CODE_OF_CONDUCT.md
commitlint.config.js
CONTRIBUTING.md
LICENSE
logo.svg
package-lock.json
package.json
prettier.config.js
README.md
tsconfig.eslint.json
tsconfig.json
web-api.svg

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

___
___
**Attention!** This repository is archived and the library has been moved to [tinkoff/ng-web-apis](https://github.com/Tinkoff/ng-web-apis) monorepository
___
___
# ![logo](https://raw.githubusercontent.com/ng-web-apis/universal/master/logo.svg) Angular Universal fallbacks

> Part of <img src="web-api.svg" align="top"> [Web APIs for Angular](https://ng-web-apis.github.io/)

[![npm version](https://img.shields.io/npm/v/@ng-web-apis/universal.svg)](https://npmjs.com/package/@ng-web-apis/universal)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/universal)](https://bundlephobia.com/result?p=@ng-web-apis/universal)
[![Travis (.org)](https://img.shields.io/travis/ng-web-apis/universal)](https://travis-ci.org/ng-web-apis/universal)
[![Coveralls github](https://img.shields.io/coveralls/github/ng-web-apis/universal)](https://coveralls.io/github/ng-web-apis/universal?branch=master)

A set of fallbacks to seamlessly use
[@ng-web-apis/common](https://github.com/ng-web-apis/common) in
[Angular Universal](https://github.com/angular/universal) apps.
These packages have synced versions down to minor.

## How to use

Add constants imported from this package to providers of your `ServerAppModule`.
Typically, you can also use these mocks for tests. Idea of this package is — you shouldn't
have to mock DOM on the server side or test `isPlatformBrowser` all the time. Instead,
you leverage Angular DI system to abstract from implementation. When possible, this package
will provide the same functionality on the server side as you have in browser. In other cases
you will get type-safe mocks and you can at least be sure you will not have
`cannot read propery of null` or `undefined is not a function` errors in SSR.

> **IMPORTANT:** This library relies on **_Node.js_ v10** and above on your server side

## Mocks

Add following line to your `server.ts` to mock native classes used in other @ng-web-apis packages:

```js
import '@ng-web-apis/universal/mocks';
```

> It is recommended to keep the import statement at the top of your `server.ts` file
## Tokens

You can provide tokens from this package into your `app.server.module.ts`
to have type safe mocks for global objects on server side with `UniversalModule`:

```ts
@NgModule({
    imports: [
        AppBrowserModule,
        ServerModule,
        UniversalModule, // <-- add this
    ],
    bootstrap: [AppComponent],
})
export class AppServerModule {}
```

Alternatively, if you have a standalone app that is initialized using the bootstrapApplication function, you can import `UniversalModule` in the following manner:

```ts
const serverConfig: ApplicationConfig = {
  providers: [
  	provideServerRendering(), 
    importProvidersFrom(UniversalModule), // <-- add this
  ],
};

const config = mergeApplicationConfig(appConfig, serverConfig);
const bootstrap = () => bootstrapApplication(AppComponent, config);
```

## Special cases

When you use plain SSR without prerender you can retrieve some of the information
from requests. Use the following helpers to harvest that info:

**server.ts:**

```typescript
import {provideLocation, provideUserAgent} from '@ng-web-apis/universal';
// ...
app.get('/**/*', (req: Request, res: Response) => {
    res.render('../dist/index', {
        req,
        res,
        providers: [provideLocation(req), provideUserAgent(req)],
    });
});
```

universal

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

universal

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README