jokade / angulate2

Scala.js bindings for Angular
MIT License
87 stars 15 forks source link

Interop with TypeScript doesn't work for components #56

Open ajrnz opened 7 years ago

ajrnz commented 7 years ago

I'm trying to migrate a project slowly to scala.js and am having trouble getting my components to be recognized in my (TypeScript) NgModule definition.

I import the symbol for the component

import scalajs from './common/scala.js'

and then reference it as:

scalajs.com.transit.MyRegions

but get the error:

Unexpected value '$c_Lcom_transit_MyRegions' declared by the module 'AppModule'

Error: Unexpected value '$c_Lcom_transit_MyRegions' declared by the module 'AppModule'
    at http://localhost:8100/build/main.js:31990:27
    at Array.forEach (native)
    at CompileMetadataResolver._loadNgModuleMetadata (http://localhost:8100/build/main.js:31970:54)
    at CompileMetadataResolver.loadNgModuleMetadata (http://localhost:8100/build/main.js:31893:29)
    at RuntimeCompiler._loadModules (http://localhost:8100/build/main.js:47271:41)
    at RuntimeCompiler._compileModuleAndComponents (http://localhost:8100/build/main.js:47241:35)
    at RuntimeCompiler.compileModuleAsync (http://localhost:8100/build/main.js:47231:21)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:8100/build/main.js:34121:25)
    at PlatformRef_.bootstrapModule (http://localhost:8100/build/main.js:34103:21)
    at Object.<anonymous> (http://localhost:8100/build/main.js:123863:124)

hunting through the JavaScript I see that this is because it fails to reflectively find the annotations (Decorators) whereas for components defined in TS this succeeds.

I've tried adding @classModeJS but this makes no difference.

Using version 0.0.5

jokade commented 7 years ago

I haven't considered integration of Scala.js => TypeScript. The problem is, that the decorators are not defined in the same file as the module itself; they are defined in the -sjsx.js file (since it is not possible to add custom members to the prototype of JS object from within Scala.js). What happens, if you import the -sjsx.js file?

ajrnz commented 7 years ago

Thanks! That works (kinda)

I imported the module into my NgModule file

import sjsx from './common/sjsx.js'

referenced it so webpack doesn't strip it out:

export class AppModule {
  sjsx = sjsx
}

and then I had to change the require() in sjsx.js to have a relative path ie:

var s = require('./scala');

I then made the sbt task which copies the files from the target directory do the replacement.