What is the context?
I am working on a project using SystemJS, Angular2 and @ ngrx / store. At the moment I am trying to make a simple module loader.
It works well. That's what:
- I write a “module” in my own folder, named like this: namespace @moduleName.
- I am adding this folder to another named
modules . - When my application starts, my ModuleLoader (which basically makes the modules accessible through
import {} from ' namespace@moduleName ) requests the server API (using Node). - A script is launched next to this API. Using fs , I read the contents of the
modules folder in response to some information about the modules (which modules are installed, as well as the bla bla bla version). - Back to ModuleLoader, I read this information and set up SystemJS to add these modules (using
map and package ). - ModuleLoader has completed. I can run my application using
System.import('core/app').then(null, console.error.bind(console));
And my application begins. Is it pretty simple?
core/app refers to public/core/components/app.component.ts and this is my bootstrap component for Angular 2.
What is the problem?
Everything went fine before I updated my code. I survived Angular 2, so my app.component.ts looked like this:
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 downloaded the components and set up a very simple application. My HomeComponent was in the same folder ( public/core/components/home.component.ts ) and uses the 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 changed!
I want my application to be created through modules. So I decided to rewrite this AppComponent into modules (@main component, @home component, @medias component ...).
I want to include only my main component module @ in the AppComponent, and this module is the "core of modules."
But that failed.
Atm, my AppComponent is as follows:
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 many 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 do not understand why my modules are not based. When I debug System , the configuration is correct. System.map maps by path and System.packages have the correct packages.
My application is a blank screen (only with @ ngrx / devtools files) and no .
Do you have any ideas? If necessary, I can transfer my project and share the repo with you.
Thanks to this nasty problem: -D