标签: angular-universal

我正在尝试使用 I18n Angular 工具运行带有 dotnet 核心的 Angular 项目模板。（https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio）

这是我在创业课上的内容

app.Map("/fr", fr =>
{
    fr.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core,
        // see https://go.microsoft.com/fwlink/?linkid=864501

        spa.Options.SourcePath = "ClientApp";

        spa.UseSpaPrerendering(options =>
        {
            options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/fr/main.bundle.js";
            options.BootModuleBuilder = env.IsDevelopment()
                ? new AngularCliBuilder(npmScript: "build:ssr2:fr")
                : null;
            options.ExcludeUrls = new[] { "/sockjs-node" };
        });

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "serve:fr");
        }
    });
});


app.Map("/en", en =>
{
    en.UseSpa(spa =>
    {
        // To learn more about …

我在将 Node.js 部署到 IIS 时遇到问题web.config：

> <handlers>
>         <add name="iisnode-ng-universal" path="dist/server.js" verb="*" modules="iisnode" />
>     </handlers>

 <rule name="ng-universal" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{HTTP_HOST}" pattern="test" />
        </conditions>
        <action type="Rewrite" url="dist/server.js" />
    </rule>

我收到此错误：

图片

这是我的网络文件树的外观：

网络文件

我试图给予完全许可IIS_IUSRS，IUSR但它似乎不起作用。像这篇文章建议的那样： iisnode 在处理请求时遇到错误

这是一个两部分的问题...

1) 关于具有 Angular Universal 和服务器端渲染的 Angular 5/6 功能。

2) 关于 Microsoft.AspNetCore.SpaServices 及其对 cshtml 页面的支持/将预渲染的 razor 视图注入 Angular。

目标

• 将 Angular 和 Asp.Net Core 合并为一个项目（不仅用于 API 还用于服务器端 HTML 渲染）

• 不要使用现有的 Microsoft.AspNetCore.SpaTemplates Angular 入门模板，因为它增加了一些我不需要的额外复杂性。

• 利用 Asp.Net Core Razor 的优势进行局部视图渲染和操作，然后将渲染的 HTML 发送回 Angular 客户端

• Angular 客户端应该能够从服务器注入渲染的 HTML，然后继续 DOM 操作、绑定等。

我的进步

我已经成功创建了一个基本的 Asp.Net Core 项目，然后手动集成了 Angular。

步骤是：

• 创建Asp.Net核心项目，然后使用angular-cli在同一目录下新建项目“ ng new MyAngularApp --minimal ”

• 手动将生成的 MyAngularApp 中“src”文件夹中的所有文件复制到 Asp.Net Core 新文件夹“ClientApp”中

• 然后将 json 配置文件（angular-cli、package 和 tsconfig）复制到 Asp.Net 项目的根目录中。

我发现如何做到这一点的最佳参考是 Shawn Wildermuth的 Pluralsight …

我正在寻找一种使用 Angular Universal 为服务器端渲染设置设备宽度的方法，以便我控制预渲染页面是移动布局还是桌面布局。

我正在使用核心 ngExpressEngine 进行渲染（与通用 starter几乎相同）。

    const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main.bundle');

    app.engine('html', ngExpressEngine({
      bootstrap: AppServerModuleNgFactory,
      providers: [
        provideModuleMap(LAZY_MODULE_MAP)
      ]
    }));

现在我正在为我的网站使用 angular 5 制作服务器端渲染。

我设法将 angular Universal 放置到位，但遇到了一个问题，我绝对无法解决或解决它。

我注意到，当我们到达网站时加载第一个页面时，它会消耗大量的 cpu，但是在导航过程中，一旦加载了第一个页面，它就不会消耗任何东西，经过多次测试，我什至可以使网站崩溃。

我想缓存页面，但我不知道该怎么做，因为我需要它们根据我的 API 上的请求是动态的..

所以我问你这个问题，有没有办法减少cpu的消耗或者解决这个问题？谢谢你 ！

我正在尝试将我的 angular 6 应用程序转换为服务器端渲染（用于 SEO 目的），并且一切似乎都编译无误。除了当我实际导航到本地主机时，我得到了完整的错误

Error: No NgModule metadata found for '[object Object]'.
at NgModuleResolver.resolve (/execroot/angular/packages/compiler/src/ng_module_resolver.ts:31:15)
at CompileMetadataResolver.getNgModuleMetadata (/execroot/angular/packages/compiler/src/metadata_resolver.ts:509:41)
at JitCompiler._loadModules (/execroot/angular/packages/compiler/src/jit/compiler.ts:127:49)
at JitCompiler._compileModuleAndComponents (/execroot/angular/packages/compiler/src/jit/compiler.ts:107:32)
at JitCompiler.compileModuleAsync (/execroot/angular/packages/compiler/src/jit/compiler.ts:61:33)
at CompilerImpl.compileModuleAsync (/execroot/angular/packages/platform-browser-dynamic/src/compiler_factory.ts:57:27)
at /execroot/nguniversal/modules/express-engine/src/main.ts:130:16
at new ZoneAwarePromise (/Users/melliotfrost/projects/myapp/node_modules/zone.js/dist/zone-node.js:891:29)
at getFactory (/execroot/nguniversal/modules/express-engine/src/main.ts:115:10)
at View.engine (/execroot/nguniversal/modules/express-engine/src/main.ts:92:7)

我正在运行命令 npm run build:ssr && npm run serve:ssr

app.module.ts（主模块）

Error: No NgModule metadata found for '[object Object]'.
at NgModuleResolver.resolve (/execroot/angular/packages/compiler/src/ng_module_resolver.ts:31:15)
at CompileMetadataResolver.getNgModuleMetadata (/execroot/angular/packages/compiler/src/metadata_resolver.ts:509:41)
at JitCompiler._loadModules (/execroot/angular/packages/compiler/src/jit/compiler.ts:127:49)
at JitCompiler._compileModuleAndComponents (/execroot/angular/packages/compiler/src/jit/compiler.ts:107:32)
at JitCompiler.compileModuleAsync (/execroot/angular/packages/compiler/src/jit/compiler.ts:61:33)
at CompilerImpl.compileModuleAsync (/execroot/angular/packages/platform-browser-dynamic/src/compiler_factory.ts:57:27)
at …

我是 Angular 通用和 Socket.io 的新手。

我想使用Angular-universal（Angular-6）为服务器端渲染Socket.io和NodeAPI server（express）项目创建一个MEAN堆栈项目。

我使用angular-cli6 来生成 Angular-6 项目。

所以，我的问题是如何配置 Angular-universal(Angular 6) + Socket.io + Node API 服务器项目（带有 Angular 通用和 Socket.io 的 MEAN 堆栈）。

任何文章或博客都会非常有帮助。

提前致谢。

我只是将 Angular 5.2 更新为 Angular 6。然后我跑了 ng generate universal --client-project my_project

现在我不能做ng build --prod，但是我能跑ng serve。我收到以下错误

错误：文件替换中的 src/environments/environment.tsng 更新 @angular/cli 路径不存在。

我在 src/environments/environment.tsng 文件中没有任何内容。

Angular Json 如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my_project": {
      "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": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/assets/sass/paper-kit.scss",
              "src/assets/css/demo.css",
              "src/assets/css/nucleo-icons.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.slim.min.js", …

这是我的服务器代码，下一个片段渲染角度home.comnponent：

app.get("*", (req, res) => {
    res.render(
        `../${CLIENT_DIST_DIR}/index`,
        {
            req: req,
            res: res,
            providers: [
                {
                    provide: REQUEST, useValue: (req)
                },
                {
                    provide: RESPONSE, useValue: (res)
                },
                {
                    provide: "ORIGIN_URL",
                    useValue: (`${http}://${req.headers.host}`)
                }
            ]
        },
        (err, html) => {
            if (err) {
                Log.error("NG render error", err);
                throw err;
            }
            res.send(html);
        }
    );
});

这是我home.component的错误：

@Component({
    selector: "app-home",
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    constructor(private http: TransferHttpService,
                @Inject(AppStorage) private appStorage: Storage) {
    }

    ngOnInit(): …

我下载了以下 angular 项目并按照他们的说明进行安装。

https://snipcart.com/blog/angular-seo-universal-server-side-rendering

npm install ... 工作正常。

ng serve .... 工作正常

npm run build:ssr&& npm run serve:ssr... 这给出了一个错误。

（节点：5644）[DEP0005] 弃用警告：由于安全和可用性问题，不推荐使用 Buffer()。请改用 Buffer.alloc()、Buffer.allocUnsafe() 或 Buffer.from() 方法。

我正在使用节点版本 v10.1.0

在本地主机上，虽然有 DeprecationWarning，但它正在运行。但是在显示相同错误后，dist 文件夹中的 server.js 无法运行。

谁能建议我为什么会收到此错误以及解决方案是什么？