title: Loading a static file in Angular during build
body: <p>I'm want to load the contents of a file and inject it as a string in TypeScript at build time. I understand that this code would ordinarily be server code, but what I want is to have a build step that reads the file and injects its contents as a string.</p>
  
  <pre><code>import { readFileSync } from 'fs';
  import { Component } from '@angular/core';
  
  @Component({
    template: `&lt;pre&gt;${readFileSync('./example.code')}&lt;/pre&gt;`
  })
  export class ExampleComponent { }
  </code></pre>
  
  <p>Assuming <code>example.code</code> just has <code>"Hello World"</code> I would want this file to be built as:</p>
  
  <pre><code>template: `&lt;pre&gt;"Hello World"&lt;/pre&gt;`
  </code></pre>
  
  <p>I have found <a href="https://www.npmjs.com/package/babel-plugin-static-fs" rel="nofollow noreferrer">babel-plugin-static-fs</a>  which I think should allow me to do this, but I was originally using <code>ng</code> (angular-cli) to build the project. I have done <code>ng eject</code> and updated webpack:</p>
  
  <pre><code>module: {
    rules: [
      /* snip */
      {
        "test": /\.ts$/,
        "use": [
          {
            loader: "babel-loader",
            options: {
              plugins: ['babel-plugin-static-fs']
            }
          },
          {
            "loader": "@ngtools/webpack"
          }, ] } ] }
  </code></pre>
  
  <p>However, when I run <code>webpack</code>, I still get</p>
  
  <blockquote>
    <p><code>Cannot find module 'fs'</code></p>
  </blockquote>
  
  <p>If I reverse the order of the loaders, it seems like babael does not like the <code>@</code> used in may annotations such as the <code>@Component</code> above so that loader does not work.</p>
  
  <p>Is there any way to load a file as static content during an Angular project build?</p>