https://github.com/kamilkisiela/meteor-angular-lazy

An example of Lazy Loading Angular's NgModules with Meteor 1.5
https://github.com/kamilkisiela/meteor-angular-lazy

angular lazy-loading meteor

Last synced: 4 months ago
JSON representation

An example of Lazy Loading Angular's NgModules with Meteor 1.5

• Host: GitHub
• URL: https://github.com/kamilkisiela/meteor-angular-lazy
• Owner: kamilkisiela
• Created: 2017-06-14T20:41:32.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-06-14T20:57:18.000Z (almost 8 years ago)
• Last Synced: 2024-12-27T03:12:36.166Z (6 months ago)
• Topics: angular, lazy-loading, meteor
• Language: TypeScript
• Homepage:
• Size: 8.79 KB
• Stars: 4
• Watchers: 5
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Lazy Loading Angular's NgModules with Meteor 1.5

## module.dynamicImport

Meteor transpiles `import()` into `module.dynamicImport()`.

Since in TS we can't use `import()` syntax, let's use the transpiled form.

```ts

import('./component').then((MyComponent) => {

  console.log(MyComponent);

});

```

```ts

module.dynamicImport('./component').then((MyComponent) => {

  console.log(MyComponent);

});

```

## Routing example

Usage of dynamic imports with Angular Router:

```ts

import { NgModule, Type } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';

// function that returns a Promise with a NgModule

export function loadBarModule() {

  return module.dynamicImport('./bar/bar.module').then(({BarModule}) => BarModule);

}

@NgModule({

  imports: [

    BrowserModule,

    RouterModule.forRoot([

      { path: '', redirectTo: 'home', pathMatch: 'full' },

      { path: 'home', component: HomeComponent },

      // Angular Router's loadChildren method expects a function that returns a Promise

      { path: 'foo', loadChildren: loadFooModule }, // use loadBarModule function

    ])

  ],

  declarations: [

    AppComponent,

    HomeComponent

  ],

  bootstrap: [

    AppComponent

  ]

})

export class AppModule {}

```