当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

ng-universal

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者赫连明诚

操作系统跨平台

开源组织无

适用人群未知

软件概览

A progressive Node.js framework for building efficient and scalable server-side applications.

Description

Angular Universal module for Nest.

Installation

Using the Angular CLI:

$ ng add @nestjs/ng-universal

Or manually:

$ npm i @nestjs/ng-universal

Example

See full example here.

Usage

If you have installed the module manually, you need to import AngularUniversalModule in your Nest application.

import { Module } from '@nestjs/common';
import { join } from 'path';
import { AngularUniversalModule } from '@nestjs/ng-universal';

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      bootstrap: AppServerModule,
      viewsPath: join(process.cwd(), 'dist/{APP_NAME}/browser')
    })
  ]
})
export class ApplicationModule {}

API Spec

The forRoot() method takes an options object with a few useful properties.

Property	Type	Description
`viewsPath`	string	The directory where the module should look for client bundle (Angular app)
`bootstrap`	Function	Angular server module reference (`AppServerModule`).
`templatePath`	string?	Path to index file (default: `{viewsPaths}/index.html`)
`rootStaticPath`	string?	Static files root directory (default: `.`)
`renderPath`	string?	Path to render Angular app (default: `*`)
`extraProviders`	StaticProvider[]?	The platform level providers for the current render request
`cache`	boolean? \| object?	Cache options, description below (default: `true`)
`errorHandler`	Function?	Callback to be called in case of a rendering error

Cache

Property	Type	Description
`expiresIn`	number?	Cache expiration in milliseconds (default: `60000`)
`storage`	CacheStorage?	Interface for implementing custom cache storage (default: in memory)
`keyGenerator`	CacheKeyGenerator?	Interface for implementing custom cache key generation logic (default: by url)

AngularUniversalModule.forRoot({
  bootstrap: AppServerModule,
  viewsPath: join(process.cwd(), 'dist/{APP_NAME}/browser'),
  cache: {
    storage: new InMemoryCacheStorage(),
    expiresIn: DEFAULT_CACHE_EXPIRATION_TIME,
    keyGenerator: new CustomCacheKeyGenerator()
  }
});

Example for CacheKeyGenerator:

export class CustomCacheKeyGenerator implements CacheKeyGenerator {
  generateCacheKey(request: Request): string {
    const md = new MobileDetect(request.headers['user-agent']);
    const isMobile = md.mobile() ? 'mobile' : 'desktop';
    return (request.hostname + request.originalUrl + isMobile).toLowerCase();
  }
}

Request and Response Providers

This tool uses @nguniversal/express-engine and will properly provide access to the Express Request and Response objects in you Angular components. Note that tokens must be imported from the @nestjs/ng-universal/tokens, not @nguniversal/express-engine/tokens.

This is useful for things like setting the response code to 404 when your Angular router can't find a page (i.e. path: '**' in routing):

import { Response } from 'express';
import { Component, Inject, Optional, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { RESPONSE } from '@nestjs/ng-universal/tokens';

@Component({
  selector: 'my-not-found',
  templateUrl: './not-found.component.html',
  styleUrls: ['./not-found.component.scss']
})
export class NotFoundComponent {
  constructor(
    @Inject(PLATFORM_ID)
    private readonly platformId: any,
    @Optional()
    @Inject(RESPONSE)
    res: Response
  ) {
    // `res` is the express response, only available on the server
    if (isPlatformServer(this.platformId)) {
      res.status(404);
    }
  }
}

Support

Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please read more here.

Stay in touch

Author - Kamil Myśliwiec
Website - https://nestjs.com
Twitter - @nestframework

License

Nest is MIT licensed.

使用案例

Angular 使用 @toolkit/universal 实现服务端渲染

Angular 使用 @toolkit/universal 实现服务端渲染 SPA 的缺陷 — SEO 基本上所有现在大行其道的单页应用都存在这个问题，它们只在客户端运行和渲染，也许你会说：“单页明明就是这样设计的，这是优点而不是缺陷！”，当然，你说的完全正确！现在的问题是你的应用“只在”客户端渲染和运行。爬虫是怎样去爬取网页的？问题在于搜索引擎的机器人/爬虫的工作类似于CURL命令。为
GitHub - XVilka/2ndboot-ng: Motorola Milestone second bootloader from running kernel without reboot

2ndboot-ng – this is a bootloader, which can boot custom boot image (including custom kernel + initrd) from any place/file. It consists from: - small kernel module, for creating device for booting/con
通过Angular CLI 1.6 加入 Angular Universal 服务端渲染功能

angular CLI 1.6内置了 Angular Universal 服务端渲染。解放webpack配置的痛苦。新建项目 ng new angulrUniversal cd angulrUniversal 复制代码加入Angular Universal ng g universal universal npm i 复制代码有兴趣的可以研究下改的什么，建议瞅瞅然后修改下package.j