- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
有人有使用 angular cli 项目安装 angular universal 的经验吗?
我试着遵循这个指南:
https://universal.angular.io/quickstart/
但是在我这样做之后:
typings install node express body-parser serve-static express-serve-static-core mime --global
我得到错误:
typings INFO globaldependencies "express" lists global dependencies on "node" that must be installed manually
typings ERR! message Unable to find "node" ("npm") in the registry.
typings ERR! message However, we found "node" for 2 other sources: "dt" and "env"
typings ERR! message You can install these using the "source" option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/node/versions/latest responded with 404, expected it to equal 200
typings ERR!
typings ERR! cwd /home/universal
typings ERR! system Linux 3.10.17
typings ERR! command "/usr/bin/node" "/usr/bin/typings" "install" "node" "express" "body-parser" "serve-static" "express-serve-static-core" "mime" "--global"
typings ERR! node -v v4.2.4
typings ERR! typings -v 2.0.0
typings ERR!
typings ERR! If you need help, you may report this error at:
typings ERR! <https://github.com/typings/typings/issues>
最佳答案
Angular Cli 现在在 1.3.0-rc.0 及更高版本中支持此功能。
您可以使用
安装此版本npm install -g @angular/cli
Setup Instructions from Angular Cli Wiki on Universal Rendering
I have a demo app which can be found on GitHub
Source: https://github.com/joejordanbrown/angular-cli-universal
Live Demo: https://uixd.co.uk/open-source-software/angular-cli-universal/
第 1 步:创建新的 Angular Cli 应用
$ ng new angular-cli-universal
第二步:安装@angular/platform-server
将@angular/platform-server 安装到您的项目中。确保您使用与项目中其他@angular 包相同的版本。
$ npm install --save-dev @angular/platform-server
或
$ yarn add @angular/platform-server
第 3 步:为通用渲染准备您的应用
您需要做的第一件事是通过将 .withServerTransition() 和应用程序 ID 添加到您的 BrowserModule 导入,使您的 AppModule 与 Universal 兼容:
src/app/app.module.ts:
@NgModule({
bootstrap: [AppComponent],
imports: [
// Add .withServerTransition() to support Universal rendering.
// The application ID can be any identifier which is unique on
// the page.
BrowserModule.withServerTransition({appId: 'my-app'}),
...
],
})
export class AppModule {}
接下来,当您的应用程序在服务器上运行时,专门为您的应用程序创建一个模块。推荐将此模块命名为AppServerModule。
此示例将它与 app.module.ts 放在一个名为 app.server.module.ts 的文件中:
src/app/app.server.module.ts:
import {NgModule} from '@angular/core';
import {ServerModule} from '@angular/platform-server';
import {AppModule} from './app.module';
import {AppComponent} from './app.component';
@NgModule({
imports: [
// The AppServerModule should import your AppModule followed
// by the ServerModule from @angular/platform-server.
AppModule,
ServerModule,
],
// Since the bootstrapped component is not inherited from your
// imported AppModule, it needs to be repeated here.
bootstrap: [AppComponent],
})
export class AppServerModule {}
第 4 步:创建服务器主文件和 tsconfig 以构建它
为您的通用包创建主文件。该文件只需要导出您的 AppServerModule。它可以进入 src。此示例调用此文件 main.server.ts:
src/main.server.ts:
export {AppServerModule} from './app/app.server.module';
将 tsconfig.app.json 复制到 tsconfig-server.json 并将其更改为使用“commonjs”的“模块”目标进行构建。
为“angularCompilerOptions”添加一个部分并将“entryModule”设置为您的 AppServerModule,指定为带有包含符号名称的散列 (#) 的导入路径。在此示例中,这将是 src/app/app.server.module#AppServerModule。
src/tsconfig.server.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
// Set the module format to "commonjs":
"module": "commonjs",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
],
// Add "angularCompilerOptions" with the AppServerModule you wrote
// set as the "entryModule".
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
}
第 5 步:创建 NodeJS 服务器文件您需要创建一个 NodeJS 服务器来呈现和提供应用程序。这个例子使用 express 。
安装快速和压缩
$ npm install --save express compression @nguniversal/express-engine
或
$ yarn add express compression @nguniversal/express-engine
src/express.server.js:
const path = require('path');
const fs = require('fs');
const express = require('express');
const compression = require('compression');
const ngExpressEngine = require('@nguniversal/express-engine').ngExpressEngine;
require('zone.js/dist/zone-node');
require('rxjs/add/operator/filter');
require('rxjs/add/operator/map');
require('rxjs/add/operator/mergeMap');
var hash;
fs.readdirSync(__dirname).forEach(file => {
if (file.startsWith('main')) {
hash = file.split('.')[1];
}
});
const AppServerModuleNgFactory = require('./main.' + hash + '.bundle').AppServerModuleNgFactory;
const app = express();
const port = Number(process.env.PORT || 8080);
app.engine('html', ngExpressEngine({
baseUrl: 'http://localhost:' + port,
bootstrap: AppServerModuleNgFactory
}));
app.set('view engine', 'html');
app.set('views', path.join(__dirname, '/../browser'));
app.use(compression());
app.use('/', express.static(path.join(__dirname, '/../browser'), {index: false}));
app.get('/*', function (req, res) {
res.render('index', {
req: req,
// res: res
});
});
app.listen(port, function() {
console.log(`Listening at ${port}`);
});
第 6 步:在 .angular-cli.json 中创建一个新项目
在 .angular-cli.json 中,键“apps”下有一个数组。在那里复制您的客户端应用程序的配置,并将其作为新条目粘贴到数组中,并将附加键“平台”设置为“服务器”。
然后,删除“polyfills”键——服务器上不需要这些,并调整“main”和“tsconfig”以指向您在第 2 步中编写的文件。最后,将“outDir”调整为新的位置(此示例使用 dist/server)。
.angular-cli.json:
{
...
"apps": [
{
// Keep your original application config the same apart from changing outDir to dist/browser.
// It will be app 0.
"outDir": "dist/browser",
},
{
// This is your server app. It is app 1.
"platform": "server",
"root": "src",
// Build to dist/server instead of dist. This prevents
// client and server builds from overwriting each other.
"outDir": "dist/server",
"assets": [
"assets",
"favicon.ico",
"express.server.js"
],
"index": "index.html",
// Change the main file to point to your server main.
"main": "main.server.ts",
// Remove polyfills.
// "polyfills": "polyfills.ts",
"test": "test.ts",
// Change the tsconfig to point to your server config.
"tsconfig": "tsconfig.server.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
...
}
构建 bundle
完成这些步骤后,您应该能够为您的应用程序构建一个服务器包,使用 --app 标志告诉 CLI 构建服务器包,在 . Angular -cli.json:
# This builds the client application in dist/browser/
$ ng build --prod
...
# This builds the server bundle in dist/server/
$ ng build --prod --app 1
Date: 2017-07-24T22:42:09.739Z
Hash: 9cac7d8e9434007fd8da
Time: 4933ms
chunk {0} main.988d7a161bd984b7eb54.bundle.js (main) 9.49 kB [entry] [rendered]
chunk {1} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [entry] [rendered]
启动快速服务器
$ node dist/server/express.server.js
View the Angular Cli Wiki for more details https://github.com/angular/angular-cli/wiki/stories-universal-rendering
关于angular - 如何设置Angular cli + Angular universal?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41098155/
这个问题已经有答案了: Is there any way to accept only numeric values in a JTextField? (20 个回答) It's possible i
我使用戴尔 XPS M1710。笔记本电脑的盖子、侧面扬声器和前置扬声器都有灯(3 组灯可以单独调节)和鼠标垫下方的灯。在 BIOS 中,我可以更改这些灯的颜色,至少是每个组。另外,我可以在鼠标垫下打
我知道我可以使用 在 iOS 5 中打开设置应用 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"prefs://"
我有一个 Django 应用程序,我正在尝试为其设置文档。目录结构如下: - doc - project | - manage.py 我已经设置了路径以便 Sphinx 可以看到东西,但是当我尝试使用
我正在使用 768mb ram 运行 centos 5.5。我一直在日志中获取 server reached MaxClients setting, consider raising the MaxC
我在具有以下配置的服务器内运行了 Drupal 安装: StartServers 5 MinSpareServers 5 MaxSpareServers 15 MaxClien
是否可以使用 Microsoft.Web.Administration 包为给定的 location 配置 asp 设置? 我想以编程方式将以下部分添加到本地 IIS applicationHost.
我一直在阅读为 kube-proxy 提供参数的文档,但没有解释应该如何使用这些参数。我使用 az aks create 创建我的集群使用 azure-cli 程序,然后我获得凭据并使用 kubect
我想知道与在 PHP 中使用 setcookie() 函数相比,在客户端通过 JavaScript 设置一些 cookie 是否有任何明显的优势?我能想到的唯一原因是减少一些网络流量(第一次)。但不是
我有一个按钮可以将 body class 设置为 .blackout 我正在使用 js-cookie设置cookie,下面的代码与我的按钮相关联。 $('#boToggle').on('click'
我有一堆自定义的 HTML div。我将其中的 3 存储在具有 slide 类的 div 中。然后,我使用该幻灯片类调用 slick 函数并应用如下设置: $('.slide').slick({
我正在创建一个应该在 Windows 8(桌面)上运行的应用 我需要: 允许用户使用我的应用启动“文件历史记录”。我需要找到打开“文件历史记录”的命令行。 我需要能够显示“文件历史记录”的当前设置。
我刚买了一台新的 MacBook Pro,并尝试在系统中设置 RVM。我安装了 RVM 并将默认设置为 ➜ rvm list default Default Ruby (for new shells)
由于有关 Firestore 中时间戳行为即将发生变化的警告,我正在尝试更改我的应用的初始化代码。 The behavior for Date objects stored in Firestore
在 ICS 中,网络 -> 数据使用设置屏幕中现在有“限制后台数据”设置。 有没有办法以编程方式为我的应用程序设置“限制后台数据”? 或 有没有办法为我的应用程序调出具有选项的“数据使用”设置? 最佳
我正在尝试使用 NextJS 应用程序设置 Jest,目前在 jest.config.js : module.exports = { testPathIgnorePatterns: ["/.n
我最近升级到 FlashDevelop 4,这当然已经将我之前的所有设置恢复到原来的状态。 我遇到的问题是我无法在新设置窗口的哪个位置找到关闭它在方括号、大括号等之前插入的自动空格的选项。 即它会自动
有没有办法以编程方式访问 iPhone/iPod touch 设置? 谢谢。比兰奇 最佳答案 大多数用户设置可以通过读取存储在 /User/Library/Preferences/ 中的属性列表来访问
删除某些值时,我需要选择哪些设置来维护有序队列。我创建了带有自动增量和主键的 id 的表。当我第一次插入值时,没问题。就像 1,2,3,4,5... 当删除某些值时,顺序会发生变化,例如 1,5,3.
我正在尝试设置示例 Symfony2 项目,如此处所示 http://symfony.com/doc/current/quick_tour/the_big_picture.html 在访问 confi
我是一名优秀的程序员,十分优秀!