meteor-angular2 Cannot find module

[PopPushOut]

Good evening,

Past few days I was moving https://github.com/akveo/ng2-admin template on meteor base. This might be useful for all meteor fans at some stage in their career, quite cool template. I skip some .ts and many packages that I do no need, like webpack and electron. After fixing compiler errors I launched the project. Here is the console: But then I inspect my project in web browser I get these errors:

What I tried:

1. Read in forums that might be meteor problems with cache, deleted it from .meteor/local.
2. Rechecked the imports and exports of cystom-typings.ts.

It seems okay, although I am not very familiar with typescript and moving big projects on another base. I would be glad if you guys can run my project and check what could be done. My Project git URL: https://github.com/PopPushOut/Meteor-angular-ng2-akveo

to run the project:

1. run - meteor npm install(to install all the packages).
2. run - meteor(launch the project).

Extra information: Current node version I use: 6.9.1 and npm version: 3.10.9 Info about template structure to navigate faster: https://akveo.github.io/ng2-admin/articles/012-project-structure/ This is original template made with angular2 CLI.

My project doesn't use all folders for example: config( I do not use electron and webpack to make it easier), tslint.ts, typedoc and environment.ts everything else should be used.

If you need something else, please contact me any time. Thank you!

[dotansimha]

@PopPushOut I think that .d.ts files should have explicit extension when importing from. Also, you can try to rename the file and change it's extension to .ts only, and maybe moving it to the imports dir.

[PopPushOut]

@dotansimha the file is already in imports DIR, extension is not a main problem. I think there is something more angular2 template used routing with System, which came from SystemJS I guess or webpack.

Here is routing used in original ng2-admin-akveo template, I modified it.

import { Routes, RouterModule }  from '@angular/router';
import { Pages } from './pages.component';
// noinspection TypeScriptValidateTypes
const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => System.import('./login/login.module')
  },
  {
    path: 'register',
    loadChildren: () => System.import('./register/register.module')
  },
  {
    path: 'pages',
    component: Pages,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: () => System.import('./dashboard/dashboard.module') },
      { path: 'editors', loadChildren: () => System.import('./editors/editors.module') },
      //{ path: 'components', loadChildren: () => System.import('./components/components.module') }
      { path: 'charts', loadChildren: () => System.import('./charts/charts.module') },
      { path: 'ui', loadChildren: () => System.import('./ui/ui.module') },
      { path: 'forms', loadChildren: () => System.import('./forms/forms.module') },
      { path: 'tables', loadChildren: () => System.import('./tables/tables.module') },
      { path: 'maps', loadChildren: () => System.import('./maps/maps.module') }
    ]
  }
];

export const routing = RouterModule.forChild(routes);

In angular-meteor project I couldn't used that kind of routing because I couldn't understand where from that System came from, so changed to:

import { Routes, RouterModule }  from '@angular/router';
import { Pages } from './pages.component';

// noinspection TypeScriptValidateTypes
const routes: Routes = [
  {
    path: 'login',
    loadChildren: 'login/login.module'
  },
  {
    path: 'register',
    loadChildren: 'register/register.module'
  },
  {
    path: 'pages',
    component: Pages,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: 'dashboard/dashboard.module' },
      //{ path: 'editors', loadChildren: './editors/editors.module' },
      //{ path: 'components', loadChildren: 'components/components.module' },
      { path: 'ui', loadChildren: 'ui/ui.module' }
      //{ path: 'forms', loadChildren: 'forms/forms.module' },
      //{ path: 'tables', loadChildren: 'da./tables/tables.module' },
      //{ path: 'maps', loadChildren: 'maps/maps.module' },
      //{ path: 'charts', loadChildren: './charts/charts.module' }
    ]
  }
];

export const routing = RouterModule.forChild(routes);

But it doesn't to work. Got compiler errors that System is not defined. Tried to google around, found that there is meteor systemjs package, tried to install one, but then got error with _metadata.. Looks like very strange stuff for me, I have no idea how to solve it. Any suggestions? Here is errors after I changed routing:

EXCEPTION: Uncaught (in promise): ReferenceError: System is not defined ReferenceError: System is not defined at SystemJsNgModuleLoader.loadAndCompile (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:61142:20) at SystemJsNgModuleLoader.load (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:61130:64) at RouterConfigLoader.loadModuleFactory (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:81458:74) at RouterConfigLoader.load (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:81445:50) at MergeMapSubscriber.project (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:82496:80) at MergeMapSubscriber._tryNext (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:12115:27) at MergeMapSubscriber._next (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:12105:18) at MergeMapSubscriber.Subscriber.next (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:3505:18) at ScalarObservable._subscribe (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:6565:24) at ScalarObservable.Observable.subscribe (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:2326:27) at MergeMapOperator.call (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:12080:23) at Observable.subscribe (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:2323:22) at MergeMapOperator.call (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:12080:23) at Observable.subscribe (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:2323:22) at CatchOperator.call (http://localhost:3000/packages/modules.js?hash=9a0bf4161093f1f3f422a11a9cc3a5c663ad1d8e:11747:23)

I searched webpack package for meteor, but find it is not supported anymore, so I cannot make similiar structure like it was in original ng2 template, here is the template I am trying to implement: https://akveo.github.io/ng2-admin/articles/012-project-structure/

If you have a time to go deeper into this problem, please download the project from: https://github.com/PopPushOut/ng2-admin-akveo-meteor-base

[tuxado]

I have the same issue it probably because angular2 use Webpack there is a lazy route loader package for native angular2 to perform lazy load and it not working on meteor the second problem is that the meteor webpack package work only for the meteor 1.2 and 1.3 versions

you can ask for more information at this issue

https://github.com/angular/angular/issues/11625

[mragwa]

@tuxado are you get any hacks to solve the lazy load on meteor, i'm stuck on this 3 days ago. ?

[tuxado]

No i am not sur that there are a hacks to solve the lazy load on meteor version 1.4, the only thing i know you can use meteor version​ 1.3 and the webpack 2 package from the atmosphrejs compatible with meteor 1.2 or 1.3 or using this package flynn: webpack-angular2 but there are some limitation on meteor 1.3 with angular 2 and the final result it will be ugly (outdated) if you like using meteor 1.4 with angular 2 try use native routing without lazy load and import all sub routes modules on the main app ngmodule and wait a new releases of meteor or packages compatible with webpack

[Urigo]

closing due to inactivity and cleanup after tons of new updates in the recent month. Feel free to open a new issue if you are still affected .

[aliarshad9691]

This still exists, struggling to lazy load angular modules but getting same System is not defined