使用.NET Core 2为Angular 6启用SSR

时间:2018-09-30 12:50:56

标签: angular .net-core angular6 ssr

我创建了一个网站,使用Angular 6作为前端,并使用.Net Core 2.0作为后端。我没有启用SSR,到目前为止一切正常。 现在,我尝试通过遵循Angular Universal文档(https://angular.io/guide/universal)和.Net Core文档(https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio&utm_source=jeliknes&utm_medium=blog&utm_campaign=medium&WT.mc_id=medium-blog-jeliknes#server-side-rendering)来启用SSR,但是失败了!

我相信问题在于main.server.ts文件- 根据.NET Core文档,我的main.server.ts应该看起来像:

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModule, renderModuleFactory } from '@angular/platform-server';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode } from '@angular/core';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { createServerRenderer } from 'aspnet-prerendering';
export { AppServerModule } from './app/app.server.module';

enableProdMode();

export default createServerRenderer(params => {
  const { AppServerModule, AppServerModuleNgFactory, LAZY_MODULE_MAP } = (module as any).exports;

  const options = {
    document: params.data.originalHtml,
    url: params.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP),
      { provide: APP_BASE_HREF, useValue: params.baseUrl },
      { provide: 'BASE_URL', useValue: params.origin + params.baseUrl }
    ]
  };

  const renderPromise = AppServerModuleNgFactory
    ? /* AoT */ renderModuleFactory(AppServerModuleNgFactory, options)
    : /* dev */ renderModule(AppServerModule, options);

  return renderPromise.then(html => ({ html }));
});

并且根据Angular,main.server.ts应该看起来像这样:

export { AppServerModule } from './app/app.server.module';

我都尝试过,这是输出: 当我按.NET Core的建议使用main.server.ts时,出现以下错误:

npmfail: AngularCliBuilder[0]
  ERROR in src/main.server.ts(13,75): error TS2304: Cannot find name 'module'.

后面还有一些异常(但我相信这行会引起其他错误)。 当我尝试按Angular的建议使用main.server.ts时,在浏览器加载时出现以下错误:

NodeInvocationException: Prerendering failed because of error: Error: The module at ./dist/server/main.js does not export a default function, and you have not specified which export to invoke.

我已经为此努力了几天,但没有成功。 请注意,这是一个正常工作的网站,其中导入了很多第三方库,因此所有简单的“创建网站-启用SSR-tada所有作品”都不适合...

有指针吗? 谢谢!

**编辑** 还要添加我的main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// import 'hammerjs'; // imported from index.html

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

1 个答案:

答案 0 :(得分:0)

如果尚未解决此问题,请尝试在tsconfig.app.json中添加 types“:[” node“]

public class Ball : MonoBehaviour
{

    ScoreSys scoreSys;
    Rigidbody rb;
    public float destroyTimeOut = 2;
    bool hitBase = false;
    void Start()
    {
        GameObject scoreObj = GameObject.Find("ScoreSystem");
        scoreSys = scoreObj.GetComponent<ScoreSys>();

        rb = GetComponent<Rigidbody>();
    }


    void Update()
    {
        if (rb.position.y < -3)
        {
            scoreSys.Count--;
            Destroy(gameObject);
        }

        if (hitBase)
        {
            timer += Time.deltaTime;
            if (timer > destroyTimeOut)
            {
                scoreSys.Count--;
                Destroy(gameObject);
            }
        }
    }

    float timer;
    private void OnCollisionEnter(Collision collision)
    {

        if (collision.gameObject.CompareTag("base"))
        {
            hitBase = true;
        }
    }
}