Angular2 和 SystemJS:构建模块加载器时找不到模块
Angular2 & SystemJS : Cannot find module while building a moduleLoader
上下文是什么?
我正在使用 SystemJS、Angular2 和@ngrx/store 开发一个项目。目前,我正在尝试制作一个简单的模块加载器。
效果很好。事情是这样的:
- 我在它自己的文件夹中写了一个 "module",命名如下: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));
开始我的申请
我的应用程序启动了。很简单吧?
core/app
指的是 public/core/components/app.component.ts
,这是我的 bootstrap 组件 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.[=29= 提供的 modules ]
// A simple module loaded by the Home. I wonder what this modules does...
import { CounterComponent } from 'test@counter';
但是app.component.ts
已经改变了!
我希望通过模块构建我的应用程序。所以我决定在模块中重写这个 AppComponent (component@main, component@home, component@medias...)。
我只想在 AppComponent 中包含我的 component@main 模块,这个模块是 'core of the modules'.
但是失败了。
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)并且没有记录输出。
你有什么想法吗?
如果需要,我可以提交我的项目并与您分享 repo。
感谢阅读这个烦人的问题:-D
我才发现我的错误。
我只需要在 AppComponent 的指令中注入 MainComponent。
我把这个问题留在这里,以防你对我的工作流程等有一些建议
子问题是,我怎样才能删除那些日志?他们真的很容易出错。
上下文是什么?
我正在使用 SystemJS、Angular2 和@ngrx/store 开发一个项目。目前,我正在尝试制作一个简单的模块加载器。
效果很好。事情是这样的:
- 我在它自己的文件夹中写了一个 "module",命名如下: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));
开始我的申请
我的应用程序启动了。很简单吧?
core/app
指的是 public/core/components/app.component.ts
,这是我的 bootstrap 组件 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.[=29= 提供的 modules ]
// A simple module loaded by the Home. I wonder what this modules does...
import { CounterComponent } from 'test@counter';
但是app.component.ts
已经改变了!
我希望通过模块构建我的应用程序。所以我决定在模块中重写这个 AppComponent (component@main, component@home, component@medias...)。
我只想在 AppComponent 中包含我的 component@main 模块,这个模块是 'core of the modules'.
但是失败了。
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)并且没有记录输出。
你有什么想法吗? 如果需要,我可以提交我的项目并与您分享 repo。
感谢阅读这个烦人的问题:-D
我才发现我的错误。
我只需要在 AppComponent 的指令中注入 MainComponent。
我把这个问题留在这里,以防你对我的工作流程等有一些建议
子问题是,我怎样才能删除那些日志?他们真的很容易出错。