search

scullyio / scully

The Static Site Generator for Angular apps
https://scully.io/
MIT License
2.55k stars 257 forks source link

Unable to fetch data #1498

Closed lletestu closed 2 years ago

lletestu commented 2 years ago

🐞 Bug report

Description

I try to fetch data from an API to create dynamic routes and fill data. Routes are well created, but the data is not rendered in HTML.

🔬 Minimal Reproduction

💻Your Environment

Angular version : 12 Scully version : 2

Scully's configuration :


import { ScullyConfig } from '@scullyio/scully';

/** this loads the default render plugin, remove when switching to something else. */
import '@scullyio/scully-plugin-puppeteer';

/** Import custom plugin */
import './scully/plugins/getProductsPlugin';

export const config: ScullyConfig = {
  hostName: '0.0.0.0',
  projectRoot: "./src",
  projectName: "interface",
  outDir: './dist/static',
  routes: {
    '/products/:id': {
      type: 'GetProductsPlugin'
    }
  },
  puppeteerLaunchOptions: { args: ['--no-sandbox', '--disable-setuid-sandbox'] },
};

GerProducts Plugin


import {
  HandledRoute,
  httpGetJson,
  registerPlugin
} from '@scullyio/scully';
import { Product } from './../../src/app/types/product.type'

const GetProductsPluginName = 'GetProductsPlugin'
const GetProductsPlugin = async (route: string, config = {}): Promise < HandledRoute[] > => {
  const res : any = await httpGetJson('http://localhost:8057/items/products?fields=*.*.*.*', {
    headers: {
      'Authorization': ***************************************************'
    }
  })

  console.log('data', res.data)
  return Promise.resolve(
    res.data.map( (product: Product) => ({
      route: `/products/${product.id}`
    }))
  )
}
registerPlugin('router', GetProductsPluginName, GetProductsPlugin)

Product component ts 


@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {
  products: Product[]
  index: string

  constructor(
    private route: ActivatedRoute,
    private directus: DirectusService,
  ) { }

  async ngOnInit(): Promise {
    this.index = this.route.snapshot.paramMap.get('id')
    const product = this.directus.getProducts().subscribe(
      (res: {data: Product[]}) => {
        this.products = res.data
      }
    )
  }

}

Products html

<h3>
  Products
</h3>
<p>Index : {{ index }}</p>
<div *ngIf="products" class="products-list">
  <div *ngFor="let product of products" class="products-list__item">
      <p>Trigram: {{ product.trigram }}</p>
      <p>Name: {{ product.name }}</p>
  </div>
</div>

Service to retrieve data with transferScully


getProducts() {
    return this.transferStateService.useScullyTransferState(
      'products',
      this.http.get(
        `${environment.apiUrl}items/products?fields=*.*.*.*`,
        this.httpOptions
      ) as any
    )

🔥 Exception or Error

Scully generated the routes : |static ---| products ------ index.html ------| 1 ------ index.html

==> Data is not generated and html doesn't fetch data

Html generated (products is not set) :

<!DOCTYPE html><html lang="en"><head><meta name="generator" content="Scully 0.0.0">
  <meta charset="utf-8">
  <title>Interface</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.31d6cfe0d16ae931b73c.css"><style></style><script>window['ScullyIO']='generated';</script></head>
<body scully-version="0.0.0">
  <app-root _nghost-mmn-c4="" ng-version="12.2.15"><h1 _ngcontent-mmn-c4="">Virtual QSG</h1><router-outlet _ngcontent-mmn-c4=""></router-outlet><app-products _nghost-mmn-c5=""><h3 _ngcontent-mmn-c5=""> Products
</h3><p _ngcontent-mmn-c5="">Index : 1</p><!----></app-products><!----></app-root>
<script id="ScullyIO-transfer-state"></script><script src="runtime.8fb6ea7f926d19b6ea70.js" defer=""></script><script src="polyfills.8616161f735788cff5a7.js" defer=""></script><script src="main.b2538f1e24addee95579.js" defer=""></script>

</body></html>

Thanks for your help !!

SanderElias commented 2 years ago

This is working in many Scully apps. Can you provide a reproduction, so we can figure out what is going on in your use case?

SanderElias commented 2 years ago

Closing due to lack of actionable context. If this still is an issue, can you provide a minimal repo that reproduces this behavior? We will gladly reopen and work out the issue