Bootstrapping process for RC5

[bergben]

Hey there!

I am having trouble figuring out how to bootstrap angular2-meteor with RC5.
RC5 introduced a new way of bootstrapping (see changelog). I followed that example, here are my relevant bootstrapping files:

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import "reflect-metadata";
import "zone.js/dist/zone";
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Title } from '@angular/platform-browser';
import { MetaService } from "ng2-meta";
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, Title, MetaService ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

import "reflect-metadata";
import "zone.js/dist/zone";
import { Component } from "@angular/core";
import { ROUTER_DIRECTIVES } from "@angular/router";
import { MetaService } from "ng2-meta";
import template from "./app.html";

@Component({
  selector: "app",
  template,
  directives: [ROUTER_DIRECTIVES],
  providers: [MetaService]
})

export class AppComponent {
  constructor(private metaService: MetaService) {}
}

Here is the error that I am getting:
modules.js?hash=737db10…:55828Uncaught TypeError: Cannot read property 'type' of null(anonymous function) @ modules.js?hash=737db10…:55828getTransitiveModules @ modules.js?hash=737db10…:55827CompileMetadataResolver._getTransitiveNgModuleMetadata @ modules.js?hash=737db10…:55541CompileMetadataResolver.getNgModuleMetadata @ modules.js?hash=737db10…:55413RuntimeCompiler._compileComponents @ modules.js?hash=737db10…:54542RuntimeCompiler._compileModuleAndComponents @ modules.js?hash=737db10…:54464RuntimeCompiler.compileModuleAsync @ modules.js?hash=737db10…:54441PlatformRef_._bootstrapModuleWithZone @ modules.js?hash=737db10…:12784PlatformRef_.bootstrapModule @ modules.js?hash=737db10…:12777meteorInstall.client.main.js @ main.ts:9fileEvaluate @ modules-runtime.js?hash=b737023…:180require @ modules-runtime.js?hash=b737023…:109(anonymous function) @ posts.ts:22

So I was wondering if a new bootstrapping method for angular2-meteor is going to be introduced? Or if there is a workaround for now?

Thanks.

[stefanholzapfel]

Yep that would be cool because the structural changes in RC5 with introducing NgModules are quite big, and everything coded now is a lot of work to be refactored afterwards, since backwards compatibility (e.g. "directives" and "pipes" decorators on components instead of modules) will be gone in the next RC.

[Urigo]

yes we will support RC.5 soon.
In the meantime, please keep using the RC.4 way and we will also love help with updating everything to the new structure

[sdarnell]

One thing I found was that with RC.5 the auto bootstrap package needs updating/replacing. But it may be as simple as adding an entry for METEOR_PROVIDERS in the top level module providers. See Urigo/angular2-meteor-auto-bootstrap#23

However, there are still other issues even after this, but they're working on it... :)

[hatemismail]

Also there are new feature with RC5 called Lazy loading modules with the Router

Example: https://angular.io/resources/live-examples/ngmodule/ts/plnkr.html

That allowing to load isolated modules depending on Routing, so if meteor support this feature that will be big performance benefits for Large projects

Thank you

[stefanholzapfel]

@hatemismail maybe I missed something, but as I understand it it's an Angular feature and will work anyway as soon as RC5 bootstrapping will be fixed?

[hatemismail]

@stefanholzapfel The problem lies in Meteor builder doesn't include / compile un-imported files to build (web.browser) files

for example when use isolate module located in:

client/imports/isolateModule/

and router like:

import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

export const routes: Routes = [
    {
        path: '',
        component: AppComponent
    },
    {
        path: 'lazy',
        loadChildren: './imports/isolateModule/isolate.module'
    }
];

export const routing = RouterModule.forRoot(routes);

Then we have issue that on run-time there is no JavaScript file on path (/imports/isolateModule/isolate.module) because it's not included to build directory and not compiled from TypeScript

[stefanholzapfel]

I see, sry I'm not that deep into meteor :) But would it it be possible to manually compile them and add them to the build directory? (Of course not very convenient, but maybe possible to automate with a build script...)

[barbatus]

@hatemismail I think lazy loading in Angular2 is based on SystemJS, since there should a way to load dependencies dynamically. As alternative, a module can be prebuilt with all dependencies included, but I don't think it makes sense since its size then would be near the same as the main app script.
Regarding Meteor, it's dependency import equivalent (i.e., meteorInstall) doesn't support remote loading hence no way to implement this feature. Though I saw a couple of people raised this idea (like meteor/meteor#5883), so there is some hope for its implementation in the near future (e.g. this year).

[barbatus]

The only think we could try to do is to build ngc (Angular2 template compiler) support into the angular2-compilers package. This approach can reduce final script's speed and size significantly.
I think this goes as part of this issue (#280)

[barbatus]

Ok we'd updated the package to RC5 but then RC6 came out which broke stuff a bit more.
So please follows this #381.

[bouchepat]

Hi there, does that mean the angular2-meteor-auto-bootstrap package is not longer needed for RC5 and above?

Thanks

[Urigo]

@bouchepat not anymore. please check out the updated Socially 2.0 tutorial

[Zeioth]

Bump! We are not able to run Meteor + Angular 2 + Lazyload
Thank you for working on this!

[Urigo]

Hi everyone here.
I want your help in creating an example with Meteor 1.5, Angular 4 and lazy loading.
If anyone wants to start with the simplest example, place it on Github and then I'll help you with the issues you are running with. Just contact me directly and let's solve it quickly for everyone to enjoy

[joerex]

This is a working example. I'm wondering if it's possible to clean up the promise mess. Exporting the module class as a default and using the import that's currently commented out results in an error.

Edit: I've updated the repo without the promise mess.