2

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

1
  • which angular2 version you are working with? Commented Mar 31, 2016 at 8:31

1 Answer 1

0

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.

Sign up to request clarification or add additional context in comments.

1 Comment

This is to just inform you that @View decorator was removed in beta.10. If you ever think to upgrade, you'll have some trouble.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.