Meteor 1.8 with angular2 typescript setup issues

I have a project in latest version of meteor(1.8) which uses angular 5.0.5 with typescript. I am using external node packages such as ngx-bootstrap which is also written in typescript.
This library exposes few classes which I import using

import { BsModalRef } from ‘ngx-bootstrap/modal/bs-modal-ref.service’;

I also have tsconfig.js which compiles all source code, excludes node_modules directory. When I run project locally using

meteor -s settings.json

And open it in browser at http://localhost:3000/ I see javascript “Uncaught SyntaxError: Unexpected token export” which comes from the above library. Upon inspecting the code in debugger, it shows that instead of main file which is mentioned in node_modules/ngx-bootstrap/package.json all the files(including typescript sources) are concatenated as it is to the module.js file. This means definately there is problem with the compilation. Same happens when I compile it for the production.

Please let me know how can this be fixed.

I’m guessing you are using IE here and getting this error. Have you tried using chrome where I suspect that it will work.

This is down to some modules coming from npm which are not supplied in es5. This causes IE to fail miserably at an import or export line as these are for more “modern” browsers.

I think this is down to the changes related to breaking meteor out to modern/legacy builds. One of the changes of this was not to recompile npm files. There is a supposed fix for this but it’s still on my todo list as IE support is pretty low down my priority list for my app.

There is a way to npm link package to enforce meteor to recompile the offending packages. There is some docs in an issue on github.

Actually I was testing in chrome 69(latest version). When I build using mup deploy, it gives error in minifying.

While minifying app code:
eval at
(/home/hridayesh/.meteor/packages/abernix_standard-minifier-js/.1.3.19.q963ez.ybzao++os+web.browser+web.cordova/plugin.minifyStdJS.os/npm/node_modules/meteor/abernix_minifier-js/node_modules/uglify-js/tools/node.js:27:1),
:86:23: Unexpected token: operator (*) while minifying
packages/modules.js

To workaround this, I added post install script in package.json
“babel node_modules/ngx-bootstrap -d node_modules/ngx-bootstrap --presets es2015;babel node_modules/mydaterangepicker -d node_modules/mydaterangepicker --presets es2015;babel node_modules/ng2-semantic-ui -d node_modules/ng2-semantic-ui --presets es2015;babel node_modules/ngx-img-cropper -d node_modules/ngx-img-cropper --presets es2015”

After doing it, I get minified code which contains import statements which are not working in chrome. Code where chrome shows error was
“google-chart.component.js”:function(){import{Component as e,ElementRef as t,ChangeDetectionStrategy as r,Input as n,Output as i,EventEmitter as o}from"@angular/core";

I admire you for getting this far :slight_smile: My guess is that your babel processing is different from meteors babel processing.

Please see the comment in the meteor’s history.md file https://github.com/meteor/meteor/blob/devel/History.md starting with:
"Although Meteor does not recompile packages installed in node_modules by default, "

This describes the change that was implemented and how to link the “broken” packages to have them compiled by meteor.

Note that I have not tried this yet myself so I may be incorrect. My app works perfectly fine in chrome but fails in IE at the ng-bootstrap package imports.