0

We want to show source code example into a sample gallery.

We have typescript , html and HTML files we want to show as it is done into the angular.io component samples pages.

Do you know how to get the source code from the path of a typescript file already in our project and render it ?

for the angular.io they use this component https://github.com/angular/angular/blob/main/aio/src/app/custom-elements/code/code-example.component.ts but with complex build and rendering, too complex... Eric

Eric Reboisson
  • 1,113
  • 2
  • 11
  • 18

3 Answers3

1

The code samples are usually not code from your own codebase.

They're rather examples of what to write to use a library (or something) you've created.

So it's kind of a no-brainer : don't create .ts file and load them as text, but rather :

  • write the TS content directly into your HTML
  • declare a string containing the TS code

Or, if you want to have autocomplete on the TS content

  • create a TS file in the assets folder so that it does not get built, and load it through the HttpClient
  • the goal is to maintain only one place of source code ( ts, html, scss...) to show a live example and include its source into an html page ( like the angular.io samples ) instead of writing the same source code in the html or a variable. I can use the fetch api or httpclient but I need to add "assets": [ "src/favicon.ico", "src/assets", "src/app" ] in angular.json assets section in order to have the source code available. Before, we were using the raw-loader to achieve that but it is not working with angular 12 – Eric Reboisson May 04 '22 at 11:48
  • @EricReboisson as said, you will not display the source code of your library, just examples of it, am I right ? –  May 04 '22 at 11:52
  • actually we display the entire code for an example, the developper copies and pastes the TS, HTML and SCSS content. – Eric Reboisson May 04 '22 at 13:36
0

[...] how to get the source code from the path of a typescript file already in our project and render it ?

You can use the Fetch API which will asynchronously retrieve a file from your server.

N.B. Using the Fetch API starts with two asynchronous operations:

  1. an asynchronous operation to fetch the file response
  2. an asynchronous operation to extract the file content from the file response

Example:

const getMyTSFile = async () => {

  // FETCH THE FILE RESPONSE
  const myTSFile = await fetch('/path/to/my/typescript-file.ts');
 
  // EXTRACT THE CONTENT FROM THE FILE (AS TEXT)
  const myTSFileText = await myTSFile.text();
    
  // CREATE A NEW <CODE> ELEMENT
  const myTSFileElement = document.createElement('code');

  // POPULATE THE THE <CODE> ELEMENT WITH THE FILE TEXT CONTENT
  myTSFileElement.textContent = myTSFileText;

  // APPEND THE <CODE> ELEMENT TO THE DOCUMENT BODY
  document.body.append(myTSFileElement);
}

getMyTSFile();

Further Reading:

Rounin
  • 27,134
  • 9
  • 83
  • 108
0

Initially I posted a question here :

How to replace raw-loader when migrating to Angular 12?

We include actually source code from the codebase with an Angular 11 application like this :

html: require(!!raw-loader!./${files}.component.html)

or

ts: require(!!raw-loader!./${files}.component)

but raw-loader disappears when we migrate to Angular 12. And I tried with ?raw that works for html file :

html: require(./${files}.component.html?raw)

and not for typescript file :

ts: require(./${files}.component?raw)

the !! that prevents loaders is not working.

any ideas ?

Eric Reboisson
  • 1,113
  • 2
  • 11
  • 18