标签: angular2-modules

我有一个应用程序模块和单个组件应用程序(用于演示我的问题),并收到以下错误:

 Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for UserService! ; Zone: <root> ; Task: Promise.then ; Value:

AppModule的代码:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { UserService } from './components/common/userservice';

@NgModule({
    imports: [
    BrowserModule,
],
declarations: [
    AppComponent
],
providers: [UserService],
bootstrap: [AppComponent],
entryComponents: []

})
export class AppModule {
}

我的AppComponent的代码:

import { Component} from '@angular/core';
import { UserService} from './userservice';

@Component({
  selector: 'App',
  template: `<h3>App component</h3> …

我想获取当前NgModule的元数据，以便获取列表declarations并providers填充我创建的动态模块，以在模式中显示组件。

那怎么办呢？

下面是我的文件夹结构。

    app
    - common
         - header
           header.component.css
           header.component.html
           header.component.ts
        - footer
           footer.component.css
           footer.component.html
           footer.component.ts
    - index
      index.component.css
      index.component.ts
      index.component.html
      index.module.ts
   - lessons
     lesson1(another folder)
     lesson2(folder)
     lesson.module.ts   

    app.component.css
    app.component.ts
    app.component.html
    app.module.ts

我已经在app.module中导入了页眉和页脚组件，index.module，lesson.module并使用

<app-header></app-header>
<app-navbar></app-navbar>

在index.component.html，lesson1.component.html，lesson2.component.html中。

但是我发现“ app-header”不是已知的元素错误。有人可以帮助我解决此错误吗？

如果我直接在index.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 { RouterModule, Routes } from '@angular/router';
import * as $ from 'jquery';

import { AppComponent } from …

我有两个 ng-module

1. 仪表盘
2. 重复订单列表

我通过延迟加载加载了重复订单。

现在我想在仪表板内使用重复订单作为 html

<app-repeatorderlist></app-repeatorderlist>

如果我做同样的事情，它会给我一个错误

'app-repeatorderlist' 不是一个已知元素： 1. 如果 'app-repeatorderlist' 是一个 Angular 组件，那么验证它是否是这个模块的一部分。2. 如果 'app-repeatorderlist' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以

如果我在 app.module 上添加它的引用，那么它会抛出错误

类型 RepeatorderlistComponent 是 2 个模块声明的一部分：AppModule 和 repeatorderModule！请考虑将 RepeatorderlistComponent 移至更高的模块，该模块导入 AppModule 和 repeatorderModule。您还可以创建一个新的 NgModule，它导出并包含 RepeatorderlistComponent，然后在 AppModule 和 repeatorderModule 中导入该 NgModule。错误：类型 RepeatorderlistComponent 是 2 个模块声明的一部分：AppModule 和 repeatorderModule！请考虑将 RepeatorderlistComponent 移至更高的模块，该模块导入 AppModule 和 repeatorderModule。您还可以创建一个新的 NgModule 导出并包含 RepeatorderlistComponent，然后在 AppModule 和 repeatorderModul 中导入该 NgModule

我可以理解我必须创建一个新模块（更高）但是任何身体指南如何

当我最近阅读 Angular2 的doc 时，它是这样说的：

如果我两次导入同一个模块怎么办？

那不是问题。当三个模块都导入 Module 'A' 时，Angular 会在第一次遇到模块 'A' 时评估一次模块 'A'，并且不会再这样做。

在导入模块的层次结构中出现的任何级别 A 都是如此。> 当模块'B'导入模块'A'，模块'C'导入'B'，模块'D'导入[C，B，A]时，然后'D'触发对'C'的评估，从而触发评估'B'，评估'A'。当 Angular 到达 'D' 中的 'B' 和 'A' 时，它们已经被缓存并准备好了。

Angular 不喜欢带有循环引用的模块，所以不要让 Module 'A' ......

但我认为上述内容是在所有 Eager Loading Modules 的上下文中说明的。我怀疑这是否适用于延迟加载模块，例如，如果 AppModule 和延迟加载功能模块都导入相同的模块（例如 ModuleA），ModuleA 会被加载两次吗？

我的想法是：当 AppModule 和延迟加载模块加载时，会创建 ModuleA 类型的两个模块实例。我的理解正确吗？有人可以帮我澄清一下吗？先感谢您。

我有一些模块的应用程序.

这是我的根模块:

// imports...

@NgModule({
    bootstrap: [ AppModule ],
    declarations: [
        AppComponent,
        ...APP_PIPES // Array with my pipes
    ],
    imports: [ // import Angular's modules
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        RouterModule.forRoot(ROUTES),
        ...APP_MODULES, // Array with my modules
        ...THIRD_PARTY_MODULES // Array with libs modules
    ],
    providers: [ // expose our Services and Providers into Angular's dependency injection
        ENV_PROVIDERS,
        APP_PROVIDERS
    ]
})
export class AppModule {
 ...
}

而这里的ONE的我的共同模块:

import { CommonModule } from '@angular/common';
import { NgModule } …

在angular docs FAQ部分中,它指出,"与启动时加载的模块的提供者不同,延迟加载模块的提供者是模块范围的." 链接

请问"模块范围"在这里的意思只是模块还是它扩展到包括属于该模块的所有组件吗？

我问的原因是因为我有一个带有2个属于它的组件的延迟加载模块.我在模块中注册了一个服务,但由于某种原因,每个组件都获得了该服务的不同实例.

为了在我的延迟加载模块中提供LazyModuleService并将该服务限定为延迟加载模块及其组件,我需要更改什么？请包含所需的任何其他文件.我试图做一个通用的例子来帮助其他可能找到这个问题的人.

延迟加载模块:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
import { LazyModuleService } from './lazy-module.service';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    Component1,
    Component2,
  ],
})

export class LazyLoadedModule { }

有些东西我想知道模块.我刚刚开始使用Angular 2,所以我搜索了太多主题,但我找不到任何令人满意的答案.

当我们创建角度2应用程序时,肯定使用模块.当然也使用嵌套模块.我们可以使用多少个嵌套模块？这是可行的还是嵌套模块有限制？

例如,假设我有管理仪表板应用程序.我们可以像这样建造

app.module.ts
|
 --dashboard
    |
    --dashboard.module.ts
      |
      --login
        |
        --login.module.ts
        .
        .
        .

我们可以肯定地用这种方式构建.但是,假设我们有5个或更多嵌套模块,角度应用是否可以？可能导致任何问题或导致任何性能问题？或者我们应该保持简单(最多3个嵌套等)进行练习？

另外,当嵌套模块和组件增加时,tsc如何表现？

总结一下什么是优点,缺点嵌套模块等,嵌套模块结构的最佳实践是什么？

我有一个angular2组件,我想在多个模块之间共享.

所以我写了下面的sharedModule,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {GenericComponent} from './generic/generic.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ GenericComponent ],
  exports:      [ GenericComponent ]
})
export class SharedModule { }

然后我将这个sharedModule添加到多个模块,如下所示:

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule,SharedModule ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap: [AppComponent]
})
export class AppModule …

我是Angular 2的新手,我需要路由部分的帮助.我正在使用http://jasonwatmore.com/post/2016/09/29/angular-2-user-registration-and-login-example-tutorial

我收到了一个错误

导出变量'routing'已经或正在使用来自外部模块"/ home/frank/angular/node_modules/@ angular/core/src/metadata/ng_module"的名称'ModuleWithProviders',但无法命名.

这是我的代码

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule } from '@angular/http';

// used to create fake backend
import { fakeBackendProvider } from './_helpers/index';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';

import { AppComponent }  from './app.component';
import { routing }        from './app.routing';

import { AlertComponent } from './_directives/index';
import { AuthGuard } from …