YAML Integration

You can integrate YAML with the starter using following steps. Benefits include creating static pages using YAML structure and building your own rendering logic for each static page using single component template. See AngularPages demo. Each card in the demo homepage is linked to a YAML generated static page.

Install YAML webpack loader.

npm i yaml-loader --save-dev

Add YAML loader in webpack configs (dev, prod, test). Webpack YAML loader.

{ test: /\.yml$/,  loader: 'json-loader!yaml-loader' }

Optionally you can also add the .yml extension to resolve extensions list so you don't need to include the extension when requiring the YAML file. YAML resolve extension.

extensions: prepend(['.ts','.js','.json','.css','.html', '.md', '.yml'], '.async')

Next you can require the YAML file in your code or model. AngularPages Story Mock Requires YAML Files.

require('./my-yaml-file')

Now you can process YAML structure using template variables. AngularPages Story Component Template.

{{yourComponent.modelPropertyRequireYaml.yamlProperty}}

YAML is processed by the loader as a JSON object, available as extended properties to component property requiring the YAML file. This way you can include multiple YAML files using same component, and render multiple static pages.