标签: angular2-modules

我正在将正在处理的应用程序升级到最新的Angular 2候选版本.作为这项工作的一部分,我试图使用NgModule规范并将我的应用程序的所有部分迁移到模块.在大多数情况下,除了路由问题之外,这已经非常顺利.

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",

我的应用程序是作为模块的组合构建的,其中几个模块粘合在一起作为父模块的子项.例如,我有一个管理模块,它包含通知模块,用户模块和电话模块(例如).这些模块的路径应该像......

/admin/notifications/my-notifications
/admin/users/new-user
/admin/telephony/whatever

在路由器的早期版本中,使用"children"很容易实现

export const AdminRoutes: RouterConfig = [
   {
      path: "Admin",
      component: AdminComponent,
      Children: [
         ...UserRoutes,
         ...TelephonyRoutes,
         ...NotificationRoutes
      ]
   }
]

在另一个文件中,作为子模块的一部分,我也定义了各个模块路由

export const UserRoutes: RouterConfig = [
    {
       path: "users",
       component: userComponent,
       children: [
           {path: "new-user", component: newUserComponent}
       ]
    }

]

这一切都很有效.在升级到模块的过程中,我将所有内容都移动到了各自的路由文件中,所以现在这两个看起来更像是这样

const AdminRoutes: Routes = [
    {path: "admin", component: AdminComponent}
] 

export const adminRouting = RouterModule.forChild(AdminRoutes)

和 …

我创建了一个新模块'A'并尝试将其导入另一个名为'B'的模块中.我在编译时遇到错误"错误TS1192:模块""A.module"'没有默认导出'.任何人都可以请求如何解决此错误的帮助.

对于在Angular2中具有身份验证的网站,我想在主应用程序组件中使用身份验证子模块的组件.但是,我不断收到以下错误:

app/app.component.ts(3,10): error TS2305: Module '"<dir>/app/auth/auth.module"' has no exported member 'SigninComponent'.

甚至在导出SigninComponent之后.

项目文件夹结构如下所示:

应用/认证/ auth.module.ts:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { FormsModule }    from '@angular/forms';

import { RegisterComponent }    from './components/register.component';
import { SigninComponent }    from './components/signin.component';
import { HomeComponent }    from './components/home.component';

import { AuthService } from './services/auth.service';
import { AuthHttp } from './services/auth-http';

@NgModule({
  imports: [
      CommonModule,
      FormsModule
  ],
  declarations: [
      RegisterComponent,
      SigninComponent,
      HomeComponent
  ],
  providers: [
      AuthService,
      AuthHttp
  ], …

在我的应用程序中,我有两个不同的bootstrap模块(@NgModule)在一个应用程序中独立运行.没有一个角度app位单独的bootstrap模块,现在我希望他们应该相互通信并共享数据.

我知道通过@Injectable服务作为模块中的提供者,我可以在所有组件下共享数据,@NgModule但是我将如何在两个不同模块(不是模块内部组件)之间共享数据.

有没有办法在另一个模块中访问一个服务对象？有没有办法可以访问浏览器内存中可用的服务对象并在我的其他角度模块中使用它？

这是我的Angular2应用程序结构:

这是我的代码的一部分.以下是moduleAngular2应用程序的主要内容,它导入其路由规则和子模块(EdgeModule)并使用与某些页面相关的一些组件.

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent,
        LoginComponent
    ],
    imports: [
        ...
        appRouting,
        EdgeModule
    ],
    providers: [
        appRoutingProviders,
        LoginService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

以下是主模块的路由规则.它有登录页面和页面找不到的路径.

app.routing.ts

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '**', component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [];

export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });

这是EdgeModule声明它使用的组件并导入自己的路由规则和2个子模块(FirstSectionModule和SecondSectionModule).

edge.module.ts

@NgModule({
    declarations: [
        EdgeComponent, …

我正在尝试将我的angular2自定义库之一迁移到RC.6 + Webpack.我的目录结构是:

- src - source TS files
- lib - transpiled JS files + definition files
- dev - development app to test if it works / looks ok.
- myCustomLib.js - barrel
- myCustomLib.d.ts

在dev文件夹内尝试运行应用程序.我引导我的模块:

app.module.ts

import { BrowserModule }                from "@angular/platform-browser";
import { NgModule }                     from "@angular/core";
import { AppComponent }                 from "./app.component";
import { MyCustomModule }               from "../../myCustomLib";

@NgModule({
    imports: [
        BrowserModule,
        MyCustomModule
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
}) …

我已经构建了一个ErrorHandlerLogger,它是一个扩展ErrorHandler并将错误消息记录到远程存储库的服务.

ErrorHandlerLogger需要HttpModule提供的Angular http客户端.

在ErrorHandlerModule中,我导入HttpModule并将ErrorHandlerLogger定义为提供者.

在AppModule中我导入ErrorHandlerModule.

当我启动应用程序时,我收到以下错误消息

Uncaught Error: Can't resolve all parameters for ErrorHandlerLogger: (?).

在这里我的代码

ErrorHandlerModule

import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';

import {ErrorHandlerLogger} from './error-handler-logger';

@NgModule({
    declarations: [],
    exports: [],
    imports: [
        HttpModule
    ],
    providers: [
        {provide: ErrorHandler, useClass: ErrorHandlerLogger}
    ]
})
export class ErrorHandlerModule {}

ErrorHandlerLogger

import { ErrorHandler } from '@angular/core';
import { …

我不明白角度2中的核心和功能模块之间的区别.据我所知,有三种推荐的模块类型:核心,功能和共享.

如果模块导出一些声明(组件,指令和管道),并且许多模块将导入该模块,则该模块应该是共享模块(在共享目录中).

如果模块表示某些声明(组件,指令和管道)并且只有根模块将导入该模块,则该模块应该是核心模块(在核心目录中).

功能模块是否相同？只有root模块导入它们.在此示例中,有一个CoreModule和一个名为ContactModule的功能模块.我没有看到它们之间的区别.它们都在根模块中导入.

我试图实现延迟加载,但得到错误如下**

错误错误:未捕获(在承诺中):错误:已加载BrowserModule.如果需要从延迟加载的模块访问常用指令(如NgIf和NgFor),请改为导入CommonModule.

**

需要帮助.这是我的模块

1. 共享MOdule

@NgModule({

  declarations: [TimePipe],
  providers: [
    EmsEmployeeService,
    EmsDesignationService,
    EmsOrganizationService,
    EmsAuthService,
    AmsEmployeeService,
    AmsShiftService,
    ValidatorService,
    AmsLeaveService,
    AmsAttendanceService,
    AmsDeviceService,
    AmsOrganizationService,
    AmsAlertService,
    AmsHolidayService,
    AutoCompleteService,
    AmsTimelogsService,
    LocalStorageService
  ],
  imports: [
    HttpModule,
    ToastyModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
    }),
  ],
  exports: [
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    RouterModule,
    MaterialModule,
    MdDatepickerModule,
    MdNativeDateModule,
    ToastyModule,
    FileUploadModule,
    NgxPaginationModule,
    NguiAutoCompleteModule,
    AgmCoreModule,
    TimePipe
  ]
})
export class SharedModule { }

Run Code Online (Sandbox Code Playgroud)

2.SettingModule

 @NgModule({
  imports: [
    CommonModule,
    SharedModule,
    SettingsRoutingModule
  ],
  declarations: [
    SettingsComponent,
    ShiftsComponent,
    DevicesComponent,
    AlertsComponent,
    HolidaysComponent,
    AlterTypesComponent,
    AlterEditComponent,
    ShiftTypeNewComponent,
    DeviceLogsComponent,
    ChannelTypesComponent,
    ChannelTypeEditComponent
  ], …

Run Code Online (Sandbox Code Playgroud)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { ClinicFacilityService } from './apiClient.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    DailyScheduleComponent,
  ],
  providers: [
    ClinicFacilityService
  ],
  exports: [
    DailyScheduleComponent
  ],
})
export class ClinicDashboardModule {
}

我需要导入ClinicFacilityService在另一个模块中声明的(apiClient.module)

这是否可能,如果不是为什么不可能.目前我正在这样导入ClinicFacilityService:

import { ClinicFacilityService } from './api-client-service/clinic-facility.service';