我正在做一个POC来证明我在Angular Universal的后端和前端之间有通信.我在后端有一个名为heroes.json的JSON文件,我想从前端服务ModelService中检索model.service.ts.

我有这个文件夹结构:

在model.service.ts(前端)我想创建一个http请求来获取一个被调用的方法中的一些数据getStuff().

我在model.service.ts中有这个:

// domain/feature service
@Injectable()
export class ModelService {
  private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file
   // This is only one example of one Model depending on your domain
  constructor(public api: ApiService, public cacheService: CacheService, private http: Http) {

  }

  public getStuff(): Observable<any[]> {
        return this.http.get(this.heroesUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

    private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }

    private handleError (error: …

我想为搜索引擎优化我的网站.我用两种方式搜索了这个.

1路

使用angular 2 universal在服务器端渲染站点.我想这有点困难,我还没有学到这一点.

2种方法

使用https://prerender.io/.我想这很简单.

所以我的问题.什么用于搜索引擎优化它会更友好的搜索引擎和简单？有没有理由使用角度通用或https://prerender.io/就足够了？

对于不正确的问题可能感到抱歉,但我是新手,我想选择更好的方式.

目前我正在尝试使用Angular Universal构建项目.我正在使用Angular 4.如果我导入Material Module - 可以构建项目,但是当通过ts-node服务时会出现错误 -

dist\ngfactory\node_modules\@angular\material\typings\index.ngfactory.ts:9
import * as import0 from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Module._extensions..js (module.js:580:10)

或者,如果我尝试导入NgXBootstrap,则会出现此错误 -

node_modules\ngx-bootstrap\dropdown\bs-dropdown.module.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core';
                                                          ^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)

我正在关注这个项目结构 - https://github.com/designcourse/angular-seo

我在这里粘贴代码 -

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } …

我使用angular-cli创建了一个角度应用程序,并通过遵循此处给出的步骤在其中进行通用渲染.但有人提到,如果我正在进行通用渲染,我不能在我的应用程序中使用全局变量,如窗口和文档,如何在前端设置cookie以维护用户会话.以前我使用JWT,但为此我需要在浏览器中设置cookie.

据我所知,在预渲染角度应用程序时,任何依赖于窗口或文档的组件库都无法使用.

这是否意味着在不编写我们自己的组件库并使其不依赖于窗口的情况下预渲染应用程序几乎是不可能的？如果有一种友好的方式,那么人们就已经做到了,对吧？

这就引出了一个问题:在成功预渲染角度应用程序并使用外部组件库时,人们遵循了哪些策略？如果没有办法做到这一点,人们是否使用预渲染而没有任何这样的库？

我已经完成了所有可能的解决方案,使角度材料与aspnetcore 2.0预渲染一起工作,但它们都没有工作,例如:angular-ssr

任何类型的策略建议都非常受欢迎,这也让我想知道预呈现是否会如此痛苦,对于应用程序的业务方面非常重要,使用react是一种更好的策略？

我弹出了一个Angular Cli项目,并尝试将Angular Universal集成到其中.我已经把项目捆绑了应该.问题是当我去运行"node dist/server.js"时,我收到一个Unexpected Token错误.

完整错误:

/Users/brandon.baker/Documents/Sites/brand-angular-seed/dist/server.js:405665
module.exports = ./../node_modules/webpack/buildin/module.js;
                 ^

SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function.Module.runMain (module.js:676:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

Webpack配置:

// Work around for https://github.com/angular/angular-cli/issues/7200

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts',
    // This is an …

我正在尝试使用TransferState我的Angular Universal v5应用程序.经过大量的调试后,我意识到,在服务器上,TransferState似乎正在工作,因为响应包含一个<script id=APP_ID></script>包含相应序列化状态(TransferState源)的标记.

出于某种原因,浏览器应用程序尚未使用状态进行初始化.如果我将测试状态硬编码到我的应用程序index.html文件中(通过复制和粘贴),那么我的浏览器应用程序已成功初始化为浏览器状态.我不确定出了什么问题.任何想法非常感谢!

我唯一的猜测是,当我在Chrome的检查器中观看我的应用程序加载时,看起来好像大多数元素一次加载,然后在另一个时间点<script id=APP_ID></script>显示.这似乎暗示脚本标签是以某种方式在浏览器端生成/处理的,即使我已经检查了服务器的响应并且它包含脚本标记.但是,如果脚本标记在客户端进行某种处理,则可能TransferState在处理完成之前进行初始化,这就是我的应用程序未接收状态的原因.再次,任何想法都非常感谢!

这是相关代码:

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    
import { AppRoutingModule } from './app-routing.module';
import { GraphQLModule } from './graphql.module';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'service-work-coordination' }),
    BrowserTransferStateModule,
    AppRoutingModule,
    GraphQLModule,
  ], …

我为什么得到

Error: StaticInjectorError(AppServerModule)[NgModuleFactoryLoader -> InjectionToken MODULE_MAP]: 

  StaticInjectorError(Platform: core)[NgModuleFactoryLoader -> InjectionToken MODULE_MAP]: 

    NullInjectorError: No provider for InjectionToken MODULE_MAP!

什么时候尝试使用firebase进行部署？

我确实用过

extraProviders: [

  provideModuleMap(LAZY_MODULE_MAP)

]

并在我的app-server.module我导入ModuleMapLoaderModule(顺便说一下,我尝试以不同的顺序导入ServerModule和AppModule,我被告知它可能是问题,但它没有用):

@NgModule({

  imports: [

    ServerModule,

    AppModule,

    ModuleMapLoaderModule,

  ],

  bootstrap: [AppComponent],

})

export class AppServerModule { }

main.bundle.js包含这个:

Object.defineProperty(exports, "__esModule", { value: true });

var app_server_module_ngfactory_1 = __webpack_require__("./src/app/app.server.module.ngfactory.js");

exports.AppServerModuleNgFactory = app_server_module_ngfactory_1.AppServerModuleNgFactory;

var __lazy_0__ = __webpack_require__("./src/app/features/blog/blog.module.ngfactory.js");

var app_server_module_1 = __webpack_require__("./src/app/app.server.module.ts");

exports.AppServerModule = app_server_module_1.AppServerModule;

exports.LAZY_MODULE_MAP = { "app/features/blog/blog.module#BlogModule": __lazy_0__.BlogModuleNgFactory };

main.bundle.js是否正确导入firebase脚本,因为如果我更改了一些字母require(...),我会收到一个错误,该文件未知.那有什么不对LAZY_MODULE_MAP？它看起来像是一个字符串路由到工厂的map/js-object,它会被导出.那为什么不能provideModuleMap正确解决呢？在BlogModule只有一个Hello-世界存根组件的声明. …

不知道这个错误是什么意思.不知道如何调试.也许这里的其他人有类似的错误？代码已成功编译,但我在浏览器中得到一个空白页面.我到处寻找,无法找到解决方案.....栈请我在这个问题上添加更多文字,我不知道还能在这里添加什么......

server.ts:

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

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

import * as express from 'express';
import { join } from 'path';

import 'localstorage-polyfill';

global['localStorage'] = localStorage;
// 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');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } …

我正在尝试将angular 7网站部署到无服务器的AWS上。刚开始时，我遵循了本教程：https : //coursetro.com/posts/code/165/Deploying-your-Angular-App-to-a-Serverless-Environment-

部署后，我的url附加了一个额外的“ production / ”，我认为这是由于我的base-href设置所致。

这会导致不必要的重定向到404。有人知道如何避免这种情况吗？ 导航菜单效果很好

输入的网址：

https://7z48go76gd.execute-api.ap-southeast-1.amazonaws.com/production

加载后：

https://7z48go76gd.execute-api.ap-southeast-1.amazonaws.com/production/production

我尝试过环境.prod.ts，environment.serverless.ts以及具有不同变体但没有运气的package.json文件。

environment.serverless.ts / environment.prod.ts：

export const environment = {
  production: true,
  BASE_URL: 'https://tj2rdz0qn1.execute-api.ap-southeast-1.amazonaws.com/production',
  // when you deploy your app to your own server you should replace the BASE_URL with the target domain for example:
  // BASE_URL: 'https://site-preview.angular-templates.io',
  baseHref: '/'
};

package.json：

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "lint": "ng lint crc-web",
    "build:client-and-server-bundles": "ng build --prod && ng run crc-web:server:production",
    "build:ssr": "npm …