标签: angular-universal
在Angular 2,4,5,6中实现插件架构/插件系统/可插拔框架
更新5/24/2018:我们现在从我的原始帖子中获得了+3版本的Angular,但仍然没有最终可行的解决方案.Lars Meijdam(@LarsMeijdam)提出了一个有趣的方法,当然值得一看.(由于专有问题,他不得不暂时删除他最初发布样本的GitHub存储库.但是,如果您需要副本,可以直接给他发消息.请参阅下面的评论以获取更多信息.)
Angular 6中最近的架构变化确实使我们更接近解决方案.此外,Angular Elements(https://angular.io/guide/elements)提供了一些组件功能 - 尽管不是我在本文中最初描述的内容.
如果来自令人惊奇的Angular团队的任何人碰巧碰到了这个,请注意,似乎还有很多其他人也对这个功能非常感兴趣.积压可能值得考虑.
我想实现在一个可插拔(插件)的框架Angular 2,Angular 4,Angular 5,或Angular 6应用程序.
(我开发这个可插拔框架的具体用例是我需要开发一个微型内容管理系统.由于这里不一定详述的一些原因,Angular 2/4/5/6它几乎完全适合该系统的大多数需求.)
通过可插拔框架(或插件架构),我特别指的是一个允许第三方开发人员通过使用可插拔组件创建或扩展主应用程序功能的系统,而无需直接访问或了解主应用程序的源代码或内部运作.
(关于" 没有直接访问或了解应用程序的源代码或内部工作 "的措辞是一个核心目标.)
可插入框架的示例包括常见的内容管理系统,如WordPress或Drupal.
理想情况(与Drupal一样)是简单地将这些可插入组件(或插件)放入文件夹,让应用程序自动检测或发现它们,让它们神奇地"工作".以某种热插拔方式发生这种情况,意味着在应用程序运行时,这将是最佳的.
我目前正在尝试确定以下五个问题的答案(在您的帮助下).
- 实用性:
Angular 2/4/5/6应用程序的插件框架是否实用？(到目前为止,我还没有找到任何实用的方法来创建一个真正的可插拔框架Angular2/4/5/6.) - 预期的挑战:在为
Angular 2/4/5/6应用程序实现插件框架时可能会遇到哪些挑战？ - 实施策略:可以采用哪些具体技术或策略来实现
Angular 2/4/5/6应用程序的插件框架？ - 最佳实践:为
Angular 2/4/5/6应用程序实现插件系统的最佳实践是什么？ - 替代技术: 如果插件框架在应用程序中不实用
Angular 2/4/5/6,那么相对等效的技术(例如React)可能适用于现代高反应性Web应用程序？
一般来说,使用Angular …
推荐指数
解决办法
查看次数
带有i18n的Angular Universal(服务器端渲染)
我尝试使用角度通用的Angular官方国际化工具.到目前为止,我能够使用以下过程翻译客户端渲染(感谢这个答案/sf/answers/2865107731/):
我在模板中的文档中添加了"i18n"属性:
./src/+app/about/about.component.html:
<h1 i18n="H1 of the about component">About</h1>
...
然后我跑:
./node_modules/.bin/ng-xi18n
生成基本messages.xlf文件.
然后,我将每个要支持的语言环境的文件复制为"locale"文件夹中的" messages.[locale] .xlf ".准备好后,我为每个包含其内容的导出字符串的xlf文件创建" messages.[locale] .ts ":
./locale/messages.fr.ts:
// TRANSLATION_FR is only for "messages.fr.ts" of course.
// I would create a TRANSLATION_ES const inside "messages.es.ts" for spanish for example.
export const TRANSLATION_FR: string = `<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="004b222ff9ef9dd4771b777950ca1d0e4cd4348a" datatype="html">
<source>About</source>
<target>A propos</target>
<note priority="1" from="description">H1 of the about component</note>
</trans-unit>
</body>
</file>
</xliff> …推荐指数
解决办法
查看次数
dotnet core + Angular Universal + docker =>由于错误,预渲染失败:错误:无法找到模块
我们有一个使用Dotnet核心Angular Universal开发的项目.我们使用Asp.net Core SPA服务的prerender功能.在本地环境中,该应用程序适用于Windows,Linux.使用Visual Studio自己的docker多阶段构建模板时会出现一些问题.在我们在microsoft/aspnetcore-build映像中构建它之后,我们将文件传输到microsoft/aspnetcore映像.由于Asp.net SPA对nodejs的依赖,我们还将nodejs安装到microsoft/aspnetcore映像.
但是当我们运行应用程序时,我们在main.bundle.js(服务器端)的预渲染阶段得到错误"由于错误导致预渲染失败:错误:无法找到模块'angular2-universal-polyfills'".我们相信这个问题与'angular2-universal-polyfills'没有关系,因为我们也尝试过其他polyfill并遇到类似的错误.
但是当我们将.net核心和nodejs安装到单个容器而不是多阶段构建中并在同一容器内构建和发布操作时,我们的应用程序就可以工作.但是容器的大小是2 GB.
从理论上讲,我们构建的容器和我们运行的容器之间没有区别.两者都安装了.net核心和nodejs.唯一的区别是我们将发布输出复制到我们运行的容器.
发布输出
root
wwwroot (angular client-side dist)
assets
inline.bundle.js
main.bundle.js
polyfill.bundle.js
vendor.bundle.js
CodefictionApp/dist-server (angular server-side dist)
assets
main.bundle.js
dlls
工作Dockerfile
FROM microsoft/aspnetcore:2.0 AS base
WORKDIR /app
EXPOSE 80
FROM buildpack-deps:jessie-scm
RUN apt-get update \
&& apt-get install -y --no-install-recommends \
libc6 \
libcurl3 \
libgcc1 \
libgssapi-krb5-2 \
libicu52 \
liblttng-ust0 \
libssl1.0.0 \
libstdc++6 \
libunwind8 \
libuuid1 \
zlib1g \
&& rm -rf /var/lib/apt/lists/*
ENV DOTNET_SDK_VERSION 2.1.200
ENV DOTNET_SDK_DOWNLOAD_URL …推荐指数
解决办法
查看次数
角度通用获取错误:您必须传入NgModule或NgModuleFactory才能进行自举
我按照本指南将现有的angular-cli应用程序转换为角度通用.
你可以在这里查看我的完整源代码.
我能够构建浏览器和客户端项目,但是当我在浏览器中查看应用程序时出现以下错误:
错误:您必须传入NgModule或NgModuleFactory才能在View.engine中进行自举(D:\ng-ssr-demo\dist\server.js:359545:23)
问题出在我的server.ts文件中,其中AppServerModuleNgFactory未定义,并且由于此工厂用于在快速后端引导应用程序,因此引导失败.
./server.ts:
const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
// Fix for window error:
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.resolve('./', 'dist', 'browser/', 'index.html')).toString();
const win = …推荐指数
解决办法
查看次数
服务工作者和带有角度通用的sw
我在服务工作者中使用了sw预先缓存.我只缓存了服务工作者中的浏览器文件夹.所以服务器端渲染不能在服务工作者中工作任何人请帮助我解决这个问题.如果ssr工作服务工作者不工作,反之亦然
下面是我的sw precache config.json
module.exports = {
navigateFallback: '/index.html',
stripPrefix: 'dist/browser',
root: 'dist/browser',
staticFileGlobs: [
'dist/browser/index.html',
'dist/browser/**.js',
'dist/browser/**.css',
'dist/browser/**.ico',
'dist/browser/assets/images/**.jpg',
'dist/browser/assets/images/**.png',
'dist/browser/assets/images/**.gif',
'dist/browser/assets/js/**/**.js',
'dist/browser/assets/js/**.js',
'dist/browser/assets/css/**.css'
],
runtimeCaching: [{
urlPattern: /^https:\/\/tg\.s3\.rfyfg\.com\//,
handler: 'cacheFirst'
}]
};
谢谢
service-worker sw-precache angular-universal angular angular5
推荐指数
解决办法
查看次数
如何在S3上上传预渲染文件并在初次加载我们的网页时访问？
我使用Angular Universal Starter工具包实现了我的Web应用程序.我想将预渲染文件上传到S3存储桶,以便我的初始页面加载得更快.但是我找不到有关将预渲染文件上传到S3以及如何在初始加载时访问该文件的正确配置？
推荐指数
解决办法
查看次数
如何将 svg 从文件导入 angular 5 中的组件？
我发现所有将 svg 添加到 AngularCli 组件的教程都建议将其插入到 html 模板中，如下所示：
<div>
<svg viewBox="0 0 250 250">
<svg:g class="group">
<svg:polygon class="shield" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
<svg:path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg:g>
</svg>
</div>
但我希望保持模板清晰，并且只在其中插入几个带有 url 的标签到分隔的 svg 文件，就像这样：
<svg class="star">
<use xlink:href="../../../assets/images/svg/star.svg"
x="0"
y="0" />
</svg>
如何在组件中使用分离的 svg 文件？
推荐指数
解决办法
查看次数
弃用警告：由于安全和可用性问题，不推荐使用 Buffer()。请改用 Buffer.alloc(), ... 方法
我有一个 angular 项目，最近我使用以下命令向它添加了 angular-universal：
ng add @nguniversal/express-engine --clientProject {{ name of your project }}
构建和运行它：
npm run build:ssr && npm run serve:ssr
这样做后我遇到了很多错误，但我设法让它正常工作，但是当我访问我的主页时，它将以下内容写入控制台：
(node:44714) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
ERROR [Error]
ERROR [Error]
每次我刷新页面时，它都会在ERROR [Error]没有任何细节的情况下再次打印，请注意new Buffer()我的代码中没有任何内容，并且我已经按照堆栈溢出的建议解决了这个问题，但没有运气，有人可以帮助弄清楚是什么吗造成这个？
我已经ERROR [Error]通过删除 TranslateService解决了这个问题，但仍然有 deprecationWarning
推荐指数
解决办法
查看次数
使用Angular4(Angular Universal)进行服务器端渲染
我正在开发一个Angular4 webpack项目,我想添加AngularUniversal以使服务器端渲染成为可能.但大多数教程都使用了角度cli.我想将Universal与webpack集成.我试着按照本教程没有运气.可以请某人救命.
推荐指数
解决办法
查看次数
Angular 6 Server Side Errror:找不到模块:错误:无法解析'./dist/server/main.bundle'
我正在研究一个项目,将其更新为Angular 6.更新后,我在尝试运行服务器端渲染构建时遇到此错误
Module not found: Error: Can't resolve './dist/server/main.bundle'
我尝试访问https://angular.io/guide/universal并将我的代码与Angular Universal中的SSR文件进行匹配.这不适合我.
似乎dist文件夹没有生成/ server文件夹,但正在创建/浏览器.我不确定为什么.
这是我的angular.json文件
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xilo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.css",
"node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"node_modules/moment/min/moment.min.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false, …推荐指数
解决办法
查看次数
标签 统计
angular ×10
angular-cli ×3
angular5 ×2
webpack ×2
.net-core ×1
amazon-s3 ×1
asp.net-core ×1
docker ×1
html ×1
import ×1
javascript ×1
plugins ×1
server-side ×1
svg ×1
sw-precache ×1