Angular2& SystemJS:构建moduleLoader时找不到模块

时间:2016-03-31 08:28:38

标签: javascript node.js typescript angular systemjs

上下文是什么?

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

效果很好。事情就是这样:

  • 我写了一个"模块"在其自己的文件夹中命名为: namespace @ moduleName
  • 我将此文件夹添加到另一个名为modules
  • 的文件夹中
  • 当我的应用启动时,我的 ModuleLoader (基本上通过import {} from 'namespace@moduleName提供模块)请求服务器API(使用节点)。
  • 除此API外,还会启动脚本。使用 fs ,我正在阅读modules文件夹的内容,回复一些关于模块的数据(安装了哪些模块,版本bla bla bla)。
  • 返回ModuleLoader,我阅读了这些信息并配置 SystemJS 以添加这些模块(使用mappackage)。
  • ModuleLoader的工作已经结束。我可以使用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已经改变了!

我希望我的应用程序可以通过模块构建。所以我决定在模块中重写这个AppComponent(组件@ main,组件@ home,组件@ medias ......)。

我想只在AppComponent中包含我的组件@ main模块,而这个模块是模块的核心。

但它失败了。

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

这很棒。但是现在我的shell中有很多错误(不在浏览器中)。

[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

1 个答案:

答案 0 :(得分:0)

我只是发现了我的错误。

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

我在这里留下这个问题,以防你对我的工作流程等有一些建议。

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