标签: angular-universal

关于角度通用的两个问题：

1. 我如何让 Angular 在服务器端缓存渲染的页面，因为客户端的初始响应大约需要 2 秒，因为 Angular 每次都会在服务器端生成页面。

2. 在前端，似乎 Angular 正在破坏网站，例如 self.context.(funcname) 不存在。我知道这些问题与调用函数的范围有关，如果我不使用通用（包括预引导），这些问题确实有效。

有任何想法吗。

我正在尝试为我的 Angular 5 应用程序部署 Angular Universal（最近从 Angular 4 迁移），并且遇到了服务器端渲染选项的问题：

ng build --aot --app 1

我的 scss 文件中的变量路径在客户端有效，但在服务器端渲染命令无效。我收到这样的错误bootstrap-sass

File to import not found or unreadable: bootstrap/variable.

将路径更改为node_modules工作中包的特定路径：

@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';

我需要修改大约 50 个包含的文件bootstrap/variable，但它仍然被接受。但我的代码还包含一个特定的 scss 文件，并且它因组件而异，如下所示：

@import 'supergazol/footer';

我可以浏览大约 50 个文件来相应地更改它的路径，但这不是很有效且耗时。有没有办法告诉Webpack找到正确的路径？

我对该路径的 Angular CLI 配置不起作用：

"stylePreprocessorOptions": {
        "includePaths": [
          "../node_modules/bootstrap-sass/assets/stylesheets",
          "../src/style/supergazol",
          "../src/style"
        ]
      },

文件夹结构：

src
    app
    assets
    environments
    style

I am following this tutorial https://blog.angular-university.io/angular-universal/ but I couldn't execute the first command

 ng generate universal --client-project -the name of your client project-

the error is

Target name already exists.

any suggestions or if anyone has a better solution to implement angular universal on an existing angular project?

是否可以将 Leaflet 与 Angular/Universal 一起使用？如何避免在服务器内构建Leaflet？

npm run build:prod生成dist文件夹后。但是当我运行时node server.js出现以下错误：

var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || 超时延迟；窗口未定义。

我在 Angular Universal 中遇到这个问题

ERROR ReferenceError: $ is not defined

有谁知道有什么方法可以解决它吗？

这是失败的代码部分

//some imports ...    
declare var $ : any; 

ngOnInit() {
     generateDirectory(){
            this.api.getCities('country_id='+3996063).subscribe(res => {
                $("#find").append("<ul class='findDir'>");
                for(let c in res){
                    $("#find>ul").append('<li><a href="/find/'+res[c].name.split(' ').join('_').toLowerCase()+'">'+res[c].name+'</a></li>');
                }
                $("#find").append("</ul>");
            });
        }
}

我最近为 Angular 8 实现了 Angular Universal。但是运行npm run serve:ssr会返回以下结果：

ReferenceError: document is not defined
    at new CssKeyframesDriver (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/animations/bundles/animations-browser.umd.js:4379:26)
    at instantiateSupportedAnimationDriver (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:412:88)
    at _callFactory (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:21002:24)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20960:30)
    at resolveNgModuleDep (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20921:25)
    at _createClass (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20989:72)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20957:30)
    at resolveNgModuleDep (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20921:25)
    at _callFactory (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:21008:71)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20960:30)

有人知道这意味着什么吗？

我已经在我的应用程序上安装了 angular Universal。运行npm run build:ssr- 完成。作品。运行npm run server:ssr- DONE.WORKS。

访问服务器 URL (localhost:4000) 后，页面未完全加载并在终端上引发以下错误：

我已经尝试并失败了三天以上才能使其正常工作，并且我对自己对该主题缺乏了解而越来越感到沮丧 - 所以这是我对尚未找到的答案的搜索。

我正在使用 Angular 9.x 和 Angular Universal 9.x，但无法弄清楚如何将其部署到运行节点的服务器上的 Elastic Beanstalk。有零个教程解释了应该如何做到这一点，因为它们都针对那些想要在 AWS 上使用 Lambda 的人。如果有人可以请指出我正确的方向，那就太好了。我运行 npm run build:ssr --prod，并在我的 dist 文件夹中得到以下内容：

[

我尝试通过上传压缩文件来部署此文件夹，并尝试eb deploy使用我的整个应用程序 - 但所有这些都会导致如下错误（对于 eb deploy 方法）

> blush-front-end@0.0.0 start /var/app/current
> ng serve

sh: ng: command not found

有人可以指出我正确的方向吗？

快速提问，我们如何从 expressjs 传递到 angular-universal HTML 组件或主应用程序 index.html 变量，例如从 expressjs 到 ejs 或 pug 可用？

        app.get('*', (req, res) => {
          res.render('index', { req, messsage: 'This is your message' });
        }

Ejs 可以像这样从 expressjs 获取变量：

    <h1><%= message %></h1>

Pug 可以像这样从 expressjs 获取变量：

 h1= message

当页面加载或重新加载到视图源时，我们需要显示来自 expressjs 的消息，而不是在 shadow dom 或 DOM 中，或者在 chrome 上作为“检查”。必须位于渲染 HTML 源文件中的视图源上。

我们使用带有 expressjs 的 angular 11 SSR 通用。

有什么想法还是不可能？

在本地机器上运行 angular Universal 时出现此错误npm run dev:ssr。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. 
URL Segment: 'sockjs-node/info'
Error: Cannot match any routes. URL Segment: 'sockjs-node/info'

我不确定这是本地错误还是什么。

谢谢，J