Angular2＆安培; SystemJS：找不到模块，而建设一个ModuleLoader组件 [英] Angular2 & SystemJS : Cannot find module while building a moduleLoader

问题描述

我正在使用SystemJS，Angular2和@ NGRX /存储的项目。此刻，我想作一个简单的模块加载器。

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 :

• 我写在它自己的文件夹中的模块命名如下：命名的@ MODULENAME 的


• 我加入这个文件夹放到另外一个名为模块。


• 当我的应用程序启动时，我的 ModuleLoader组件（这基本上是通过使可用的模块导入{}从'命名空间@ MODULENAME ）请求的服务器API （使用节点）。


• 除了这个API，脚本启动。使用 FS ，我读的模块文件夹怎么样版喇嘛有关模块的一些数据（所安装的模块，一个响应的内容BLA BLA）。


• 返回ModuleLoader组件，我阅读这些信息和配置的 SystemJS ，以添加这些模块（使用地图和包）。


• ModuleLoader组件的工作就结束了。我可以开始我的应用System.import（'核心/应用程序），然后（NULL，console.error.bind（控制台））;

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

和我的应用程序启动。这是pretty简单吧？

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

核心/应用指公共/核心/组件/ app.component.ts 这是我的引导成分为角2。

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

一切正常。我正经历着角2，所以我的 app.component.ts 看起来就像是：

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

这是pretty简单，我加载组件，并设置了一个非常基本的应用程序。我的 HomeComponent 在同一文件夹中（公共/核心/组件/ home.component.ts ），并使用<强>模块按我提供的 ModuleLoader组件

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';

但 app.component.ts 变了！

我想我的应用程序通过模块构建。所以我决定重写模块这AppComponent（组件@为主，成分@ home的，组件@媒体...）。

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...).

我只想包括我的组件@的AppComponent内主模块，而这个模块是模块的核心。

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

但失败了。

ATM，我AppComponent看起来是这样的：

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

这是伟大的。但现在我有很多的错误我的shell（在浏览器里面没有）里面。

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

等。

我不明白为什么我的模块不成立。当我调试系统，配置是否正确。 的System.map 按路径图和 System.packages 有正确的包。

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.

我的应用程序是一个空白屏幕（只有@ NGRX / devtools）和没有日志输出。

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.

由于阅读这个恼人的问题:-D

Thanks to read this annoying issue :-D

推荐答案

我刚刚发现我的错误。

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

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.

在 subquestion 的，我怎么能删除这些日志？他们真的是容易出错的。

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

这篇关于Angular2＆安培; SystemJS：找不到模块，而建设一个ModuleLoader组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！