标签: ng-modules

我们已经尝试将我们的Angular 2应用程序(由我们的朋友编写,因此我们可能不知道所有细节)移动到Ionic 2.然而,我们还没有设法让它工作,因此下面的问题.

1. Angular 2路由器在Ionic 2中工作吗？
2. 在Ionic 2应用程序中使用Angular 2路由器是否有意义,还是应该直接选择DeepLinker？

编辑:我不确定目前的状态是什么,但我在这里读到:

«Angular路由器目前正在进行大量开发和重构.因此,Angular的路由器目前在Ionic中被禁用.»

3. 代码/ metadata/build-script/package.json中的哪个位置是激活路由器的入口点？我们在NgModule中有路由,但是当我们访问应用程序的主URL或子URL时,它似乎没有动作:

   @NgModule({
     declarations: [
       AppComponent,
       TestComponent,
       AgendasListComponent,
       TasksListComponent,
       SnackBarComponent,
       ConfirmationDialog,
       AgendaComponent,
       LoginComponent
     ],
     entryComponents: [
       ConfirmationDialog
     ],
     imports: [
       BrowserModule,
       HttpModule,
       MaterialModule.forRoot(),
       AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
       RouterModule.forRoot([
       {
         path: '',
         redirectTo: 'agendas',
         pathMatch: 'full',
         canActivate:[ RouterGuardService ]
       },           
       {
         path: 'agendas',
         component: AgendasListComponent,
         canActivate:[ RouterGuardService ]           
       }
       ...
   

   Run Code Online (Sandbox Code Playgroud)

我一直在尝试创建一个由User,Book,Library,Movie等对象组成的@NgModule(名为ModelsModule).这样做我试图不在每次需要时导入每个对象,而是在AppModule(主@NgModule)的开头导入它们并使用它们我想要的次数.

对象/实体/类......示例

export class Author {
  constructor (
    public name: string,
    public avatar: string
  ) { }
}

ModelsModule

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

import { Author } from './author/author.model';
(...)

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    Author,
    Book,
    Movie,
    Store
  ],
})
export class ModelsModule {}

的AppModule

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

我是角度新手并尝试在具有以下目录结构的Angular2应用程序中分离我的模块.

我在AppModule中声明了我的模块和其他组件,但是我在浏览器控制台中遇到错误 Unexpected HomeModule declared by AppModule

app
--authentication
---- htmls, ts, css
--home
----dashboard
--------html, ts, css
----representativs
--------html, ts, css
----home-routing.module.ts
----home.module.ts
--app.routing.ts
--app.module.ts

app.module.ts

import { routing } from "./app.routing"
import { AppComponent } from './app.component';
import { HomeModule } from "./home/home.module";

@NgModule({
  imports: [BrowserModule, routing, HttpModule, ReactiveFormsModule],
  declarations: [ AppComponent, HomeModule],
  bootstrap: [AppComponent],
  providers: [UserAuthenticationService]
})
export class AppModule { }

home.module.ts

import { NgModule } from '@angular/core';
import { DashboardComponent } from './dashboard/dashboard.component';
import { …

我想在我的主页上创建一个popover.所以我创建了以下功能..

public presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(TestComponent);
    popover.present({
      ev: myEvent
    });
  }

在我的homepage.module.ts中我添加了testComponent作为入口组件.

import { TestModule } from './../../components/test/test.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { TestComponent } from './../../components/test/test';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    TestModule,
    IonicPageModule.forChild(HomePage),
  ],
  entryComponents: [
    TestComponent,
  ]
})

但是当我点击弹出按钮时,我仍然会收到此错误.

ERROR Error: Uncaught (in promise): Error: No component factory found for TestComponent. Did you add it to @NgModule.entryComponents?
Error: No …

我正在使用一个相当大的Angular应用程序，当前在共享模块中拥有所有共享组件和模块，只要需要导出任何内容，我都会导入该模块。

但是，我有一些小的功能模块，它们仅需要共享模块中的很少的模块，然后我是否应该增加体系结构的复杂性和模块化，以便仅导入所需的模块，即使它们已导入其他位置？

Angular 文档指出已缓存已导入到另一个模块中的导入模块，这不是问题，但这意味着，应用程序变慢/变大了吗？

示例：模块1导入A，B，C。模块2导入A，C，D。

如果我在两个模块中都导入了A，B，C，D（例如通过共享模块），会不会导致性能损失？

我有一个IGeneric导出到模块 A的类（），我在模块 B 中导入了该模块（A），但我无法在模块 B 中使用导出的类（IGeneric）。

注意：导出的类不是组件、指令和服务。它是一个普通的打字稿类

任何帮助将不胜感激，提前致谢。我试图导出的类

export class IGeneric{
header : any[];
content : [{
   lable :any,
   value :any
}]
}

好吧，我正在按照以下基础结构构建我的项目：

• 功能模块。
• 核心模块。
• 共享模块。

但是有一点我还不够清楚。

据我所知，HttpClientModule应该在CoreModule因为好吧，...它提供了HttpClient向服务器发出 HTTP 请求的服务。

现在，该imports数组允许 Angular 模块使用其他模块中提供的功能，并且该exports数组允许 Angular 模块公开其某些功能。

我有这个CoreModule：

@NgModule({
    imports: [
        BrowserAnimationsModule,
        HttpClientModule,
        RouterModule.forRoot(routes, {
            enableTracing: true
        })
    ],
    exports: [
        RouterModule
    ]
})
export class CoreModule {
}

现在，既然 myCoreModule是在my中导入的AppModule，那么HttpClientModule和不应该也BrowserAnimationsModule被导出吗？就像RouterModule.

我看到了CoreModule并且SharedModule喜欢某种桥梁。

该SharedModule让我更有意义：

@NgModule({
    imports: [
        MatButtonModule
    ],
    exports: [
        MatButtonModule
    ]
})
export class SharedModule …

import { SpinnerComponent, ExternalLibrary } from 'external.library'
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, ExternalLibrary
  ],
  bootstrap: [AppComponent]
  , entryComponents: [SpinnerComponent]
})

以上是我将 entryComponent 指定为模块的代码。这个 SpinnerComponent 也来自一个外部模块，即 ExternalModule。

Webpack 报错：

SpinnerComponent 中的 ERROR 不能用作入口组件。

属于同一模块是否要求组件出现在 entryComponents 属性列表中？

据我所知，在出现在 entryComponent 属性之前，没有为组件指定这样的先决条件。

我正在构建简单的角度应用程序。有学生和教师两个模块。这是我的项目的组织方式。

首先，当用户输入应用程序时，我让他选择他是老师还是学生。

根据用户的身份，将其重定向到相应的模块。

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { StudentModule } from './student/student.module';
import { TeacherModule } from './teacher/teacher.module';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'student',
        loadChildren: () => StudentModule
    },
    {
        path: 'teacher',
        loadChildren: () => TeacherModule
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {


  } 

这是我的app.routing.ts档案。

我的问题是当我重定向到模块时，我想在那些模块中的组件之间进行路由。我应该<router-outlet>在每个模块中添加另一个，还是只能<router-outlet> …

所以我遇到了一种做法，人们会为每个具有服务依赖关系的组件创建一个模块。这样，当有人想要使用给定的组件时，他们不必通读代码来查看要添加到给定模块的提供程序。这是反模式吗？它会导致性能问题还是什么？

对于给定模块中应该有多少个组件/指令/提供者/等，是否有一些关于下/上限的推荐指南？是否对 angular/angularJs 生态系统进行了测试，其中包含 100 个模块？相比之下，如果只是常规组件都捆绑在 20 左右的模块中呢？