标签: angular-universal

我已经使用 firebase 商店创建了项目。现在我想在其上实现服务器端渲染。当我运行程序时，我为 ssr 做了所有事情之后，这就是我得到的

ReferenceError: window is not defined
    at Object.ex9U (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:166129:4)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.vvyD (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:271824:80)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.PCNd (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:131612:74)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.ZAI4 (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:154371:80)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.24aS (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:47619:69)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)

A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:63621

这是我的文件 package.json

{
    "name": "ng-blog",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "dev:ssr": "ng run ng-blog:serve-ssr",
        "serve:ssr": "node dist/ng-blog/server/main.js",
        "build:ssr": "ng build …

我最近将我的 Angular 应用程序版本 11 更新为 12。也使用 SSR。以前它工作得很好。现在，在 SSR 构建中，它加载 CSS 的时间有点晚，并首先显示原始 HTML，并在一段时间后加载 CSS。我尝试从 angular.json 更改 CSS 文件的顺序，但没有任何效果。

截屏

我正在开发 Angular 14 应用程序，并尝试制作带有动态路线的 Twitter 卡。案例如下：

1. 我有一个在线商店，显示不同的产品，显然是相同的路线，只是通过路线中的参数更改产品信息

   {
     path: 'product/:id',
     component: ProductLayoutComponent,
     children: [{ path: '',  loadChildren: () => import('./pages/section-custom/modules/product/product.module').then(m => m.ProductComponent) },  ]
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. 该页面有两个按钮用于在 Facebook 和 Twitter 上分享产品的链接，这里是代码

   productId: string;
   constructor(public activatedRoute: ActivatedRoute) {
     this.activatedRoute.params.subscribe((params) => {   this.productId = params['id']; });
   }
   
   shareFacebook() {
     const facebookshare = 'https://www.facebook.com/sharer/sharer.php?u=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   
   shareTwitter() {
     const facebookshare = 'https://twitter.com/intent/tweet?url=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   

   Run Code Online (Sandbox Code Playgroud)

3. 每个产品都有自己的图像、标题和描述出现在 Twitter 卡片和 Facebook 帖子中，经过多天的研究，我了解到社交网络爬虫需要读取一些元标记才能正确显示帖子和卡片，所以当我加载时我的产品有这个功能：

    productId: string;
    constructor(public activatedRoute: ActivatedRoute: public http: HttpClient,  private …

   Run Code Online (Sandbox Code Playgroud)

我刚刚开始使用Angular Universal和全新的'isomorphic'javascript.

关于如何使用逻辑路由系统,我有点困惑,你是否打算建立角度通用作为典型的节点rest api？或者它是否只是意味着立即提供客户端代码,并从外部源/ rest api检索数据？

至于采用角度通用入门套件,例如它从这些路线开始;

app.get('/', ngApp);
app.get('/about', ngApp);
app.get('/about/*', ngApp);
app.get('/home', ngApp);
app.get('/home/*', ngApp);

然后逻辑上包括一个节点/ express/mongo api与此一起获取/发布数据？即;

const bearRoutes = require('./routes/bear')
app.use('/', bearRoutes)

如果是,那么您是否会使用散列策略来区分URL？

使用通用外部api的angular2应用程序提供数据与将所有内容托管在一起之间是否会有明显的性能差异？

谢谢你的建议!

嗨,我使用的是使用BrowserAnimationsModule的Angular.但在通用服务器端,它给出错误"文档未定义".

因为Universal不支持BrowserAnimationsModule,我需要一种方法让服务器忽略BrowserAnimationsModule并用NoopAnimationsModule替换它.

这就是我现在所拥有的,但它不起作用.任何其他方法也是受欢迎的.

let imports = [
    BrowserModule.withServerTransition({appId: 'ang4-seo'}),
    FormsModule,
    HttpModule,
    routes
];

if(isPlatformBrowser(PLATFORM_ID)){
    imports.push(BrowserAnimationsModule);
}

@NgModule({
    imports: imports,

有什么方法可以解决这个问题吗？

这里有人知道如何在Angular Universal中访问主机名和路径名信息吗？

在客户端应用程序中，您可以访问具有该信息的窗口对象。

我只需要服务器上的该信息？

我正在使用Angular 4 Universal Starter并将所有Angular 2代码集成到此启动器中.一切都很好,但在终端我得到这个奇怪的错误.不确定是什么问题

错误TypeError:this.html.charCodeAt不是Tokenizer._consume上的Preprocessor.advance(/home/user/node/project/dist/server.js:152260:24)中的函数(/ home/user/node/project/dist/server.js:45694:30)在Parser._runParsingLoop(/ home/user/node/project/dist /)的Tokenizer.getNextToken(/home/user/node/project/dist/server.js:45652:23) server.js:102429:36)atParser.parseFragment(/home/user/node/project/dist/server.js:102384:10)at Object.parseFragment(/ home/user/node/project/dist/server. js:55136:19)在Parse5DomAdapter.setProperty的Parse5DomAdapter.setInnerHTML(/home/user/node/project/dist/server.js:53609:49)(/home/user/node/project/dist/server.js: 53250:18)在setElementProperty的EmulatedEncapsulationServerRenderer2.DefaultServerRenderer2.setProperty(/home/user/node/project/dist/server.js:54766:94)(/home/user/node/project/dist/server.js:9982: 19)

它由于server.js中的代码而导致

Preprocessor.prototype.advance = function () {
    this.pos++;

    if (this.pos > this.lastCharPos) {
        if (!this.lastChunkWritten)
            this.endOfChunkHit = true;

        return $.EOF;
    }

    var cp = this.html.charCodeAt(this.pos); // Error Occurs here

    //NOTE: any U+000A LINE FEED (LF) characters that immediately follow a U+000D CARRIAGE RETURN (CR) character
    //must be ignored.
    if (this.skipNextNewLine && cp === $.LINE_FEED) {
        this.skipNextNewLine = false;
        this._addGap();
        return this.advance();
    }

    //NOTE: all …

我将http请求作为服务注入到我的组件并从那里订阅.由于我在应用程序中引入了带有角度通用的服务器端渲染,因此页面上的结果至少重复两次.

我有点击的方法,它对facebook的api执行http请求

getAlbum(albumId: number) {

    this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY, null as any);

    if (!this.albumPhotos) {
      this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {
        this.bachataPicsArray = res;
        this.state.set(ALBUM_PHOTOS_KEY, res as any);
      });
    }
  }

我声明const变量低于导入

const ALBUM_PHOTOS_KEY = makeStateKey('albumPhotos');

我也宣布了这个财产

albumNames: any;

我假设我已完成所有导入,我在gallery组件中的github上有代码.

postcss插件出错

这是一个日志,当我尝试构建--prod,我'使用角度通用只给我带有bootstrap和font-awesome的错误.

10% building modules 4/6 modules 2 active ...ules/bootstrap/dist/css/bootstrap.cssUnknown error from PostCSS plugin. Your current PostCSS version is 6.0.17, but postcss-merge-rules uses 5.2.18. Perhaps this i 55% building modules 380/383 modules 3 active ...ules/bootstrap/dist/css/bootstrap.cssUnknown error from PostCSS plugin. Your current PostCSS version is 6.0.17, but postcss-merge-rules uses 5.2.18. Perhaps this is the source of the error below. 

我已经使用Universal发布了我的项目，并在.htaccess中指定了所有请求都应转到index.html（Angular应用程序的根页面）

正如在这里被问到的那样：https : //angular.io/guide/universal

它允许共享链接并打开URL中指定的组件

另外，如果打开了错误的路线，则创建一个组件： 使用Angular2处理404

export const routes:RouterConfig = [
  ...Routes,
  // Show the 404 page for any routes that don't exist.
  { path: '**', component: Four04Component }
];

问题是搜索引擎将Four04Component视为状态为200 OK的简单页面，而不是错误页面。您知道如何与Four04Component一起检索404错误吗？