Angular2＆SystemJS：构建moduleLoader时找不到模块

Question

什么是背景？

我正在使用SystemJS，Angular2和@ ngrx / store进行项目。 目前，我正在尝试制作一个简单的模块加载器。

它运作良好。 这是东西：

• 我在它自己的文件夹中编写了一个“模块”，命名如下： namespace @ moduleName 。
• 我将此文件夹添加到另一个名为modules文件夹中。
• 当我的应用程序启动时，我的ModuleLoader （基本上通过import {} from 'namespace@moduleName使模块可用）请求服务器API（使用Node）。
• 除了此API外，还会启动脚本。 使用fs ，我正在读取modules文件夹的内容，以获取有关模块的一些数据（安装了哪些模块，版本是什么bla bla bla）。
• 回到ModuleLoader，我阅读了这些信息并配置了SystemJS以添加这些模块（使用map和package ）。
• ModuleLoader的工作已经结束。 我可以使用System.import('core/app').then(null, console.error.bind(console));启动我的应用程序System.import('core/app').then(null, console.error.bind(console));

然后我的应用启动。 很简单吧？

core/app是指public/core/components/app.component.ts ，这是我的Angular 2引导程序组件。

有什么问题？

在更新代码之前，一切工作正常。 我正在体验Angular 2，所以我的app.component.ts看起来像这样：

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)));
    }
}

这非常简单，我加载了组件并设置了一个非常基本的应用程序。 我HomeComponent是在同一文件夹（ public/core/components/home.component.ts ），并使用我的ModuleLoader组件提供的模块 。

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

但是app.component.ts已经改变了！

我希望通过模块构建我的应用程序。 因此，我决定在模块（component @ main，component @ home，component @ medias ...）中重写此AppComponent。

我只想将我的component @ main模块包含在AppComponent中，并且此模块是“模块的核心”。

但是失败了。

Atm，我的AppComponent看起来像这样：

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 { }

太好了 但是现在我的外壳内部（而不是浏览器内部）有很多错误。

[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'.

等等。

我不明白为什么我的模块没有建立。 当我调试System ，配置正确。 System.map按路径映射，并且System.packages具有正确的包。

我的应用程序是空白屏幕（仅@ ngrx / devtools）， 没有日志输出。

你有什么主意吗 ？ 如果需要，我可以提交我的项目并与您共享存储库。

感谢阅读这个烦人的问题:-D

Answer 1

我只是发现我的错误。

我只需要在AppComponent的指令中注入MainComponent。

如果您对我的工作流程有任何建议，我在这里留下这个问题。

子问题是，如何删除这些日志？ 它们确实容易出错。