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
andpackage
). - 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屋!