Rules_nodejs: ts_devserver does not work with @auth0/angular-jwt

[agataHappy]

🐞 bug report

Affected Rule

The issue is caused by the rule:
ts_devserver

Is this a regression?

I don't think so

Description

After adding @auth0/angular-jwt to app and serving it with ts_devserver you won't see anything and there'll be errors in console

It seems that ts_devserver is using eval() on angular-jwt.module.ngfactory.js where imports are used.

🔬 Minimal Reproduction

Completely new app should do.

1. Add @auth0/angular-jwt to your dependencies in package.json.
2. in app.module add:

export function jwtOptionsFactory() {
  return {
    tokenGetter: () => 'fake-token',
    whitelistedDomains: ['example'],
  };
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

## 🔥 Exception or Error

angular-jwt.module.ngfactory.js:7 
Uncaught SyntaxError: Cannot use import statement outside a module at bundle.min.js?v=1584970523784:11821

## 🌍 Your Environment **Operating System:**

Fedora

**Output of `bazel version`:**

  
Build label: 2.2.0
Build target: bazel-out/k8-opt/bin/src/main/java/com/google/devtools/build/lib/bazel/BazelServer_deploy.jar
Build time: Tue Mar 3 00:00:00 2020 (1583193600)
Build timestamp: 1583193600
Build timestamp as int: 1583193600

  

Rules_nodejs version:

(Please check that you have matching versions between WORKSPACE file and @bazel/* npm packages.)

  
1.4.1
  

Anything else relevant?
I don't think so

[alexeagle]

Yeah ts_devserver requires that all its inputs be compatible with the concatjs on-the-fly bundler which relies on Named AMD syntax to work with require.js. It's based on the google-internal approach for loading JS. So you have to shim any incompatible third-party libraries to work this way (as Googlers are forced to do) There are a handful of examples in the examples/angular* directories.

The other option is not to use ts_devserver, instead use a regular node devserver that supports the whole npm ecosystem. This is the direction we are moving for new projects.

[agataHappy]

@alexeagle Thanks for reply. I'll see what we can do

[Thisen]

@alexeagle, the "regular node devserver" you're referring to, can you be more concrete abou that?

[alexeagle]

Like webpack-devserver or Rollup with a devserver plugin. Whatever you'd use to serve your app outside of Bazel.
We still have some work to do for documenting good patterns to hook them up in watch mode.

[Thisen]

Yup, that would be much appreciated. 🙂

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for 60 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions[bot]]

This issue was automatically closed because it went two weeks without a reply since it was labeled "Can Close?"