Meteor modular package structure with angular2

angular
1

Hi, I am writing my application using this wonderful angular2-meteor package :D. Currently I am trying to split my application in feature modules using meteor local packages (meteor modules). One of the packages has inside angular 2 components. I have been trying for some days to make it work without any luck. I keep getting:

Uncaught Unexpected value ‘undefined’ imported by the module 'FrontendModule’
That angular module FrontendModule is importing a module from inside my local package.

Like this:

import { BiglupUiModule } from 'meteor/biglup:biglup-ui';

I can see inside .meteor/local/build/programs/web.browser/packages that my local package is indeed being transpiled from typescript to javascript. I am lost now, not sure where is the mistake.

This is what my package.js looks like.

Package.describe({
    name: 'biglup:biglup-ui',
    version: '0.0.1',
    summary: 'Biglup UI',
    documentation: 'README.md'
});
Npm.depends({
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "angular2-meteor": "0.7.0-beta.1",
    "angular2-meteor-polyfills": "0.1.1",
    "meteor-node-stubs": "0.2.3",
    "moment": "2.14.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "web-animations-js": "2.2.2",
    "zone.js": "0.6.6"
});
Package.onUse(function(api)
{
    api.versionsFrom('1.4.1.1');
    api.use('ecmascript');
    api.use('angular2-compilers');
    api.use('barbatus:angular2-runtime');

    api.addFiles([
        'typings/biglup-ui.d.ts'
    ], 'server');

    api.addFiles([
        'client/components/button/biglup-button.component.ts',
        'client/directives/ripple/ripple.directive.ts',
        'client/biglup-ui.module.ts',
        'main.ts'
    ], 'client');
});

Maybe this is not possible? (to have meteor modules exporting angular 2 components). I had this package working as an npm package before, but since some of my packages rely on meteor code, I want all my packages to be meteor modules.

EDIT:

I changed my import to this:

import { BiglupUiModule } from 'meteor/biglup:biglup-ui/main';

And now I get:

Uncaught TypeError: Cannot read property ‘type’ of null(anonymous function) @ metadata_resolver.js:698
getTransitiveModules @ metadata_resolver.js:697
CompileMetadataResolver.getTransitiveNgModuleMetadata @ metadata_resolver.js:411
CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:283
(anonymous function) @ metadata_resolver.js:252CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:239
RuntimeCompiler._compileComponents @ runtime_compiler.js:150
RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:72
RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:49
PlatformRef.bootstrapModuleWithZone @ application_ref.js:368
PlatformRef.bootstrapModule @ application_ref.js:361
meteorInstall.client.main.js @ main.ts:25
fileEvaluate @ install.js:153
require @ install.js:82(anonymous function) @
product.schema.ts:251

These are the contents of my main.ts file:

export * from './client/components/button/biglup-button.component';
export * from './client/directives/ripple/ripple.directive';
export * from './client/biglup-ui.module';
2

@angelcastillob can you first update to the latest packages and the latest Angular 2?
then can you share a reproduction?

Thanks

3

@Urigo Sorry I forgot to update this thread. I already found the issue and fixed it, the issue was with these npm depends, these dependencies were being included twice on the application (once by the main application and once by the package) and this was causing all sorts of errors on the package side.

I fixed it by simply removing this npm depends from the package (as the meteor docs suggest anyways).

4

Hi @angelcastillob,

I am also trying to split my application in feature modules using meteor local packages and facing the above error. could please provide me some article link or sample example with code how to write meteor local package in angular2.

Thanks in advance.