Search code examples
javascriptnode.jstypescriptangularsystemjs

Angular2 & SystemJS : Cannot find module while building a moduleLoader

What is the context ?

I'm working on a project using SystemJS, Angular2 and @ngrx/store. At the moment, I'm trying to make a simple module loader.

It works well. Here is the thing :

  • I write a "module" in it's own folder named as follow : namespace@moduleName.
  • I add this folder into another one named modules.
  • When my app starts, my ModuleLoader (which basically make modules available through import {} from 'namespace@moduleName) request a server API (using Node).
  • Beside this API, a script is launched. Using fs, I'm reading the content of the modules folder an response some data about modules (which modules are installed, what about the version bla bla bla).
  • Back to ModuleLoader, I read those informations and configure SystemJS to add those modules (using map and package).
  • ModuleLoader's work is over. I can start my application with System.import('core/app').then(null, console.error.bind(console));

And my app starts. It's pretty simple right ?

core/app refers to public/core/components/app.component.ts and this is my bootstrap component for Angular 2.

What is the issue ?

Everything worked fine before I update my code. I was experiencing Angular 2 so my app.component.ts looked like that :

import { Component, View } from "angular2/core";
import { RouteConfig, ROUTER_DIRECTIVES, Router } from "angular2/router";
import { Devtools } from '@ngrx/devtools';
import { Store } from '@ngrx/store';

import { HomeComponent } from "./home.component";
import { NavComponent } from "./nav.component";
import { MediasComponent } from "./medias.component";
import { changeUrl } from '../actions/locationActions';
import { Store as AppStore } from '../stores/store';

@Component({ selector: 'app-view' })
@View({
    directives: [ Devtools, ROUTER_DIRECTIVES, NavComponent ],
    template: `
        <ngrx-devtools></ngrx-devtools>
        <h1>App</h1>
        <nav-cmp></nav-cmp>
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
    { path: '/home',    name: 'Home',   component: HomeComponent,   useAsDefault: true },
    { path: '/medias',  name: 'Medias', component: MediasComponent }
])
export class AppComponent {
    constructor (private router:Router, private store:Store<AppStore>) {
        router.subscribe(url => store.dispatch(changeUrl(url)));
    }
}

It was pretty simple, I load components and set up a very basic app. My HomeComponent was in the same folder (public/core/components/home.component.ts) and uses modules provided by my ModuleLoader.

// A simple module loaded by the Home. I wonder what this modules does...
import { CounterComponent } from 'test@counter';

But app.component.ts have changed !

I want my application to be build via modules. So I've decided to rewrite this AppComponent in modules (component@main, component@home, component@medias...).

I want to only include my component@main module inside the AppComponent, and this module is the 'core of the modules'.

But it failed.

Atm, my AppComponent looks like this :

import { Component, View } from "angular2/core";
import { Devtools } from '@ngrx/devtools';
import { MainComponent } from 'component@main';

@Component({ selector: 'app-view' })
@View({
    directives: [ Devtools ],
    template: `
        <ngrx-devtools></ngrx-devtools>
        <main-cmp></main-cmp>
    `
})
export class AppComponent { }

which is great. But now I have a lot of errors inside my shell (not inside the browser).

[0] public/src/core/components/app.component.ts(40,31): error TS2307: Cannot find module 'component@main'.
[0] public/src/modules/component@home/src/home.component.ts(2,34): error TS2307: Cannot find module 'test@counter/components'.
[0] public/src/modules/component@main/src/main.component.ts(5,31): error TS2307: Cannot find module 'component@home'.
[0] public/src/modules/component@main/src/main.component.ts(6,30): error TS2307: Cannot find module 'component@nav'.
[0] public/src/modules/component@main/src/main.component.ts(7,33): error TS2307: Cannot find module 'component@medias'.
[0] public/src/modules/component@main/src/main.component.ts(8,27): error TS2307: Cannot find module 'core/actions/locationActions'.

And so on.

I don't understand why my modules are not founded. When I debug System, the configuration is correct. System.map maps by paths and System.packages have the right packages.

My app is a blank screen (with only @ngrx/devtools) and no logs outputs.

Do you have any idea ? If needed, I can commit my project and share the repo with you.

Thanks to read this annoying issue :-D

Solution

  • I just find out my mistake.

    I just need to inject MainComponent inside my AppComponent's directives.

    I leave this question here, in case you have some advices about my workflow etc.

    The subquestion is, how can I remove those logs ? They really are error-prone.