标签: angular-universal

我正在研究一个项目,将其更新为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 Universal 。我现在想彻底删除它。我尝试删除以下文件

/server.ts
/webpack.server.config.js
/src/tsconfig.server.json
/src/main.server.ts
/src/app/app.server.module.ts
and remove server section in angular.json

但是，它还没有完全删除。

有没有命令可以彻底删除？

我正在探索在ASP.NET MVC应用程序中使用Edge.js在服务器端渲染Angular 2的可能性.

我知道Angular Universal Starter Kit有这个等式的一部分:https://github.com/alexpods/angular2-universal-starter

但是,它使用的是Node.js服务器.我宁愿不在现有的IIS服务器上添加一个Node.js服务器作为额外的Web服务器.我的想法是我可以使用Edge.js在服务器端执行Angular的渲染(即,运行必要的JavaScript来生成标记).

我是Angular 2的新手,所以为我准备一个例子并运行起来并非易事.基于这个封闭的问题,我想说目前还没有努力增加对Edge.js的支持(尽管它正在被考虑):https://github.com/angular/universal/issues/40

有没有人知道是否可以使用ASP.NET MVC应用程序中的Edge.js在服务器端渲染Angular？

顺便说一下,我坚持使用.NET 4.5.2(Umbraco需要它),所以我无法转移到.NET Core并使用它:https://github.com/MarkPieszak/aspnetcore-angular2-普遍

我正在尝试将Angular Universal项目从Angular v5迁移到v6

我有一个服务,我用它fs来加载服务器端的翻译.一切都适用于Angular v5.

使用Angular v6,当我运行npm run startaka ng serve --proxy-config proxy.conf.json我面临以下错误

./src/providers/core/translate/translate-universal-loader.service.ts中的错误找不到模块:错误:无法解析'/ Users/me/Documents/projects/myproject/src/providers中的'fs' /核心/翻译"

在我的服务中,我声明fs如下:

declare var require: any;
const fs = require('fs');

我也试图宣布它像跟随,但没有帮助

import * as fs from 'fs';

告诉webpack忽略fs我试图在我的webpack.server.config.js成功中添加以下内容

node: {
    fs: 'empty'
}

还尝试了一个webpack插件,但也没有成功

new webpack.IgnorePlugin(/fs/)

但实际上它可能不是配置使用ng serve但我不知道我是否仍然可以用v6弹出配置？

有谁有想法？

UPDATE

如果我声明fs因为any它解决了问题ng serve但不幸的是它在服务器端npm run build:ssr运行后无法运行npm run serve.在服务器端,我将面临以下错误

错误ReferenceError:未定义fs

ps:我的项目遵循https://github.com/angular/universal-starter结构,配置和依赖项

My environment

• Operating System version:Windows 10
• Firebase SDK version: 6.0.2

Problem

I followed this tutorial for creating server side rendered app. The error occurs when I try to serve the app using npm run serve:ssr.

The error I get is:

proxyRequestMethods(Index, '_index', IDBIndex, [
                                     ^

ReferenceError: IDBIndex is not defined
    at Module.<anonymous> (C:\Users\eg\dist\server.js:343794:38)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Module.<anonymous> (C:\Users\eg\dist\server.js:342436:61)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Module.<anonymous> (C:\Users\eg\dist\server.js:341227:81)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Module.<anonymous> (C:\Users\eg\dist\server.js:332069:79)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Object.firebase (C:\Users\eg\dist\server.js:189647:18)
    at __webpack_require__ …

请帮我解决问题：在此处输入图片描述

成功构建并在具有角度通用的浏览器上运行后，我遇到了这个问题

这是我的包 json ：

{
  "name": "ssr",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "10.0.5",
    "@angular/cdk": "10.1.0",
    "@angular/common": "10.0.5",
    "@angular/compiler": "10.0.5",
    "@angular/core": "10.0.5",
    "@angular/fire": "^6.0.2",
    "@angular/forms": "10.0.5",
    "@angular/http": "^7.2.16",
    "@angular/localize": "^10.0.5",
    "@angular/material": "10.1.0",
    "@angular/material-moment-adapter": "10.1.0",
    "@angular/platform-browser": "10.0.5",
    "@angular/platform-browser-dynamic": "10.0.5",
    "@angular/platform-server": "^10.0.5",
    "@angular/router": "10.0.5",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@ng-toolkit/universal": "^8.1.0",
    "@nguniversal/express-engine": "^10.0.1",
    "@types/jquery": "^3.5.1",
    "@types/node": "^8.10.62",
    "angular-in-memory-web-api": "^0.11.0",
    "angular-ng-autocomplete": "^2.0.1",
    "classlist.js": "^1.1.20150312",
    "codelyzer": "^6.0.0",
    "core-js": "2.6.9",
    "crypto-js": "^3.3.0",
    "express": "^4.15.2",
    "firebase": "^7.17.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "localstorage-polyfill": "^1.0.1",
    "moment": "2.24.0",
    "ng2-slim-loading-bar": …

我为nodejs下载了universal-starter并开始从old angular-rc4迁移我的网站.但是当我必须实现身份验证时(在我的情况下它是存储在localStorage中的JWT),服务器没有localStorage和cookie,因此仅在客户端上呈现angular.

我遵循这个指南:https://github.com/angular/universal-starter/issues/148但它没有用.

以下是我的代码:

authentication.services.ts

import { OpaqueToken } from '@angular/core'; 

export let AUTH_SERVICES = new OpaqueToken('auth.services');

export interface AuthenticationService {

    forgotPassword(email: any);

    isAuthenticated();

    getCurrentUser();

    refreshToken();

    signin(user : any);

    signout();

    signup(user : any);

}

server.authentication.ts

import { Injectable } from '@angular/core';

import { AuthenticationService } from './authentication.services';

@Injectable()
export class ServerAuthenticationService implements AuthenticationService {
    forgotPassword(email: any) {
        throw new Error('Forgot password cannot be called while doing server side rendering');
    }

    isAuthenticated() {
        return false;
    }

    getCurrentUser(){ …

任何人都有使用角度cli项目安装角度通用的经验？

我试着按照这个指南:

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 …

我开发了一个使用ASP.NET Core Web API和构建的Web应用程序Angular 4.我的模块捆绑器是Web Pack 2.

我想通过Facebook,Twitter,Google使我的应用程序可抓取或链接共享.url当某些用户试图在Facebook上发布我的新闻时,必须是相同的.例如,Jon希望与http://myappl.com/#/hellopageFacebook 共享页面 - 在Facebook上,然后Jon将此链接插入Facebook : http://myappl.com/#/hellopage.

我已经看过这个没有标签帮助器的Angular Universal服务器端渲染教程,并希望进行服务器端渲染.因为我使用ASP.NET Core Web API,我的Angular 4应用程序没有任何.cshtml视图,所以我无法从控制器发送数据ViewData["SpaHtml"]从我的控制器查看:

ViewData["SpaHtml"] = prerenderResult.Html;

另外,我看到了Angular Universal的这个谷歌教程,但他们使用的是NodeJS服务器,而不是ASP.NET Core.

我想使用服务器端预呈现.我通过这种方式添加元标记:

import { Meta } from '@angular/platform-browser';

constructor(
    private metaService: Meta) {
}

let newText = "Foo data. This is test data!:)";
    //metatags to publish this …

将Angular Universal与使用动态内容的页面一起使用时,无法使SSR正常工作.所有其他页面都有效,动态页面返回HTML但不包含动态数据.

方法叫:

ngOnInit() {
  const div = this.renderer.createElement('div');
  const texttest = this.renderer.createText('this works');

  this.renderer.appendChild(div, texttest);
  this.renderer.appendChild(this.content.nativeElement, div);

  this.createLinkForCanonicalURL();

  // The HTML never shows, the method works fine.
  this._contentfulService.getBlogPosts().then(posts => {
    this.blogPosts = _.orderBy(posts, ['sys.createdAt'], ['desc']);
  });
}

服务方式

getBlogPosts(query ? : object): Promise<Entry<any>[]> {
  return this.cdaClient.getEntries(Object.assign({
      content_type: CONFIG.contentTypeIds.blogPosts
    }, {
      'fields.private': false
    }))
    .then(res => res.items);
}

模板:

这从未在源中显示.

<li class="blog-post" *ngFor="let post of blogPosts">
  <h1>{{post.fields.title}}</h1>
</li>

尝试过入门套件并且它们无法调用相同的方法.还尝试使用render2注入和解析器服务来测试在加载之前获取数据.

似乎什么都没有用？

任何帮助,将不胜感激!

编辑

这是我的server.ts文件

// These are important and needed before …