prerender角アプリ

こんにちは👋 ! あまりにも前に、私はprerenderの角度アプリケーションに必要性を満たしていないと私はそれをあなたと共有するのはいいことを教えた.
どのようにして新しい角度のアプリをprerenderを作成してください.
場合は、既存のアプリケーションprerenderに興味がある場合は、ステップ3にジャンプすることができます.😉

FYI: You can also clone this example on Github 👈

1 .新プロジェクト
新しい角度プロジェクトを作成しましょうAngular Cli

ng new angular-prerender-test

いくつかのルートを作成する
次の3つのルートを作成します.

/ : ホームページ(静的ルート)

/contact : コンタクトページ(静的ルート)

/user/:id : ユーザープロファイル(動的なルート)、コンテンツは、各ID

角のCLIを使ってコンポーネントを作成できます.

ng g c YourComponentName

以下に、コンポーネントの内容を示します.

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<h1>Home Page</h1>
    <p>Hello World, welcome to the home page</p> `,
  styles: [],
})
export class HomeComponent{
  constructor() {}
}

// contact.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-contact',
  template: `<h1>Contact</h1>
    <p>You can contact me on : +1 *** *** *** *23</p>`,
  styles: [],
})
export class ContactComponent {
  constructor() {}
}

// user.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `<h1>User: {{ id }}</h1>
    <p>This is {{ id }}'s profile</p>`, // 👈 user id in template
  styles: [],
})
export class UserComponent {
  id = '';

  constructor(private route: ActivatedRoute) {
    // Get param from route
    this.route.params.subscribe({ next: (res) => (this.id = res.id) });
  }
}

あなたのapp-routing.module.ts 以下のようになります.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  /* Home page */
  {
    path: '',
    component: HomeComponent,
  },
  /* Contact page */
  {
    path: 'contact',
    component: ContactComponent,
  },
  /* User profile page */
  {
    path: 'user/:id',
    component: UserComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

だから今あなたのプロジェクトを実行するnpm start , 3ページが必要です

http://localhost:4200 => のホームページ

http://localhost:4200/contact => 連絡先ページ

http://localhost:4200/user/bob => プロフィールページ

ユニバーサルインストール
プロジェクトが設定されているので、アングルユニバーサルを動かすことができます.

ng add @nguniversal/express-engine

あなたが開くならばpackage.json , 新しいスクリプトを見つけます.

"prerender": "ng run angular-prerender-example:prerender"

スタティックルート
静的ルートをprerenderにするには、とても簡単です.

npm run prerender

ビルドをチェックすると、次のようになります.

dist/angular-prerender-example/browser
├── 3rdpartylicenses.txt
├── contact
│   └── index.html # 👈 contact page
├── favicon.ico
├── index.html # 👈 home page
├── index.original.html
├── main.271dcd2770e618160ca0.js
├── polyfills.bf99d438b005d57b2b31.js
├── runtime.359d5ee4682f20e936e9.js
└── styles.617af1cc16b34118b1d3.css

これらのファイルを開くと、次のようになります.

<!-- index.html -->
...
<div _ngcontent-sc36="" class="container">
  <router-outlet _ngcontent-sc36=""></router-outlet>
  <app-home>
    <h1>Home Page</h1>
    <p>Hello World, welcome to the home page</p>
  </app-home>
</div>
...

<!-- contact/index.html -->
...
<div _ngcontent-sc36="" class="container">
  <router-outlet _ngcontent-sc36=""></router-outlet>
  <app-contact>
    <h1>Contact</h1>
    <p>You can contact me on : +1 *** *** *** *23</p>
  </app-contact>
</div>
...

多田!我々の静的ルートはprerenderedされます!🎉
しかし、私のダイナミックルートについて/user/:id ?!? 🤔

5 .ダイナミックルート
ダイナミックルートについては、どのルートをprerenderにするかを定義する必要があります.そのためには、新しいファイルを作成する必要がありますuser-routes プロジェクトのルートで、必要なすべてのルートを一覧表示します.

You can name the file as you like

例:

/user/Joan
/user/Sherry
/user/Frank
/user/Bob

開きましょうangular.json .
インprerender section新しい属性を追加するroutesFile ファイル名を指定します.

...
"prerender": {
  "builder": "@nguniversal/builders:prerender",
  "options": {
    "browserTarget": "angular-prerender-example:build:production",
    "serverTarget": "angular-prerender-example:server:production",
    "routes": [
      "/"
    ],
    "routesFile" : "user-routes" // 👈 add your file name
  },
  "configurations": {
    "production": {}
  }
}
...

次に実行します.

npm run prerender

出力をチェックしましょう.

dist/angular-prerender-example/browser
├── 3rdpartylicenses.txt
├── contact
│   └── index.html
├── favicon.ico
├── index.html
├── index.original.html
├── main.271dcd2770e618160ca0.js
├── polyfills.bf99d438b005d57b2b31.js
├── runtime.359d5ee4682f20e936e9.js
├── styles.617af1cc16b34118b1d3.css
└── user
    ├── Bob
    │   └── index.html # 👈 
    ├── Frank
    │   └── index.html # 👈 
    ├── Joan
    │   └── index.html # 👈 
    └── Sherry
        └── index.html # 👈 

これらのファイルの一つを開きましょう.

<!-- user/bob/index.html -->
...
<div _ngcontent-sc36="" class="container">
  <router-outlet _ngcontent-sc36=""></router-outlet>
  <app-user>
    <h1>User: Bob</h1>
    <p>This is Bob's profile</p>
  </app-user>
</div>
...

そして、それは、2007年にリストされるルートですuser-routes prerenderedされます!🎉
それがあなたのいくらかを助けたことを望みます.
読書ありがとう.😇
ソースコードはGithub 👈