标签: angular2-modules

当尝试使用ng build -prod构建时,我收到以下错误

ERROR in Cannot determine the module for class ManagersService in C:/Test/src/app/shared/common/managers/managers.service.ts! Add ManagersService to the NgModule to fix it.

我有AppModule,AppCommonModule和CustomModuleA.ManagersService位于AppCommonModule中.CustomModuleA有一个使用AppCommonModule的ManagersComponent(此组件使用ManagersService)的路由.AppCommonModule是在AppModule和CustomModuleA中导入的

我已将该服务添加到AppCommonModule提供程序.我不明白我在这里缺少什么.

注意:使用ng服务时,这就像魅力一样.没错.

这是属于AppCommonModule的ManagersComponent

@Component({
    templateUrl: './managers.component.html',
    providers: [ManagersService]
})
export class ManagersComponent extends AppComponentBase {
    @ViewChild('createOrEditManagerModal') createOrEditManagerModal: CreateOrEditManagerModalComponent;

    constructor(public managersService: ManagersService) {
    }

这是AppCommonModule

@NgModule({
    imports: [
        FormsModule,
        ReactiveFormsModule        
    ],
    declarations: [
        ManagersComponent        
    ],
    providers: [
        ManagersService,
    ],
    exports: [      
        ManagersComponent,
    ]
})

这是CustomModuleA

@NgModule({   
    imports: [
        CommonModule,
        FormsModule,
        HttpModule,
        ModalModule,
        TabsModule,
        TooltipModule,
        AppCommonModule,        
    ],
     declarations: [ …

我是Angular 2的初学者,我正在尝试了解如何从功能模块中导出类,并将其导入到我的主模块中.

当我尝试在打字稿中编译它时,我收到以下两个错误:

• app/app.component.ts(11,21):错误TS2304:找不到名称'AddService'.

• app/app.module.ts(4,9):错误TS2305:模块'"C:/angular/app/add/arithmetic.module"'没有导出成员'AddService'.

我的树很简单:

/
  index.html
  package.json
  systemjs.config.js
  tsconfig.json
  typings.json
  app/
     app.component.html
     app.component.ts
     app.module.ts
     main.ts
     add/
        add.service.ts
        arithmetic.module.ts

有趣的部分如下:

app.module.ts:

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

// this next line generates an error from typescript compiler:
// app/app.module.ts(4,9): error TS2305: Module
// '"C:/angular/app/add/arithmetic.module"' has no exported 
// member 'AddService'.

import {AddService} from './add/arithmetic.module';

@NgModule({
    imports:        [BrowserModule],
    declarations:   [AppComponent, AddService],
    bootstrap:      [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } …

它是否有助于减少加载时间？(例如只将当前模块加载到客户端的设备？)

我的理解是......

• 它会增加服务器和客户端之间的请求数量吗？
• 它会增加代码的复杂性.(因为你需要照顾
• 导入和导出模块,并特别注意路由)

我最近开始玩角度2,到目前为止我的经验很棒.我有一些很好的经验ng1,并React为好.所以,这更像是一个普遍的问题,也是一个混乱.我很确定这会帮助很多其他人以及我没有真正找到任何直接答案.

所以,假设我已经module protected.module.ts注册了一些组件.因此,为了使用原始指令,ngFor, ngIf我必须导入CommonModule到特定模块,但是我必须将其导入主入口模块,即app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CommonModule  } from '@angular/common';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProtectedModule …

我有两个独立的模块app.module.ts,core.module.ts用于加载两个选择器app和app-main.

文件夹结构如下:

|main.ts
|-App
|  |-app.module.ts
|  |-Components
|    |-app.component.ts
|
|-Core
|  |-core.module.ts
|  |-Components
|    |-core.component.ts

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './App/app.module';
if (process.env.ENV === 'production') {
    enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from '../Core/core.module';
import { AppComponent } from './Components/app.component';
@NgModule({
    imports: …

我正在使用带有角度cli的同位素布局模块来解决问题

我用
npm install isotope-layout --save 安装了模块

我在.angular-cli.json文件中添加了脚本

"scripts": [ 
    ...
    "../node_modules/isotope-layout/dist/isotope.pkgd.js"
  ],

以及package.json中的依赖性

 "dependencies": {
    ..
    "zone.js": "^0.8.4",
    "isotope-layout": "^3.0.2"
 }

但如果我打电话给我的组件

ngOnInit() { $('.grid').isotope(); }

但我有一个错误

Property 'isotope' does not exist on type 'jQuery<HTMLElement>'

如何在我的模块中使用此库？
我试着用它导入它

import isotope from 'isotope-layout';

但我有错误"找不到模块"

任何人都可以向我解释如何在角度cli中使用角度模块？我很困惑..

ps_如果通过控制台我输入$('.grid').isotope();它的工作..