Flatbuffers: Typescript import

[dakom]

The typescript generation includes import {flatbuffers} from "./flatbuffers"

This breaks for me - but the line in question comes under the "Google Closure" header: https://github.com/google/flatbuffers/blob/master/src/idl_gen_js.cpp#L223

Would it break things if instead it did not include the "./" - i.e. were just import {flatbuffers} from "flatbuffers" ?

[aardappel]

I personally do not understand JS import intricacies, or why this was added like this. @krojew may though..

[krojew]

Yes, changing it will break stuff, that's why there's a flag not to add this import. Can't remember why it was added, tho.

[dakom]

OK, thanks.

It's an easy replacement via a post-build script though, isn't actually affecting me now...

[chrgrd]

I was finally able to use TypeScript flatbuffers in Angular 5 (CLI), here are the high level steps (code snippets in bold) :

• create a "hello world" angular CLI application
• install the flatbuffer npm package (npm install flatbuffers). This will create a flatbuffer module under node_modules directory with the precious flatbuffer.js file (I didn't check how this version relates to the github flatbuffers one)

• generate the Typescript from the .fbs file without the flatbuffer import (flatc --ts --no-fb-import)
  In this specific example, I did put the *_generated.ts files under src/fbs
  Here is the specific fbs schema:
  namespace NSfbs;
  table TestStatus
  {
  status : ushort;
  }
  root_type TestStatus;

• in app.component.ts:

  • import the flatbuffer module (installed using npm), In this example below, 'flatbuffers' refers to node_modules/flatbuffers
    import { flatbuffers } from 'flatbuffers'; // located in node_modules

  • import the generated TypeScript object:
    import * as testStatus from '../fbs/TestStatus_generated';

  • Generate the flatbuffer
    const builder = new flatbuffers.Builder();
    testStatus.NSfbs.TestStatus.startTestStatus(builder);
    testStatus.NSfbs.TestStatus.addStatus(builder, 7);
    const serialized = testStatus.NSfbs.TestStatus.endTestStatus(builder);
    // builder.finish(serialized); // without the file identifier
    testStatus.NSfbs.TestStatus.finishTestStatusBuffer(builder, serialized); // To include the File identifier
    const data = builder.asUint8Array();

Pain is temporary, pride is forever :-)

[rope-hmg]

A flag like --npm-fb-import would be super useful. Or a --fb-import that takes one of local, npm or none and defaults to local.

[anurbol]

Thanks, @chrgrd --no-fb-import in flatc --ts --no-fb-import did the trick

[ravenblackx]

For anyone else finding this in the same situation as me, chrgrd's comment nearly did the trick, but (using yarn rather than npm) I had to do not only
yarn add flatbuffers
which I assume is equivalent to the suggested npm add flatbuffers, but also
yarn add @types/flatbuffers
to get rid of warnings in the generated file.

[github-actions[bot]]

This issue is stale because it has been open 6 months with no activity. Please comment or this will be closed in 14 days.