Geek Answers Handbook

Import modules into AppModule to separate problems in Angular2

Templates, such as ASP.NET Core JavaScript services , came with a single module called AppModule . Since my application is divided into two logical areas, it seems like a good idea to use two modules for them (AreaA, AreaB). My idea was to import both into AppModule , including shared resources like Pipes (which might cause problems here).

So, for testing purposes, I created a module called ModuleA

 import { HomeComponent } from './home/home.component'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { UniversalModule } from 'angular2-universal'; @NgModule({ declarations: [ HomeComponent ], imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. RouterModule.forChild([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, ]) ] }) export class ModuleAModule {}

It is imported into an AppModule , like this one.

 import { ModuleAModule } from './module-a/module-a.module'; import { NavMenuComponent } from './shared/navmenu/navmenu.component'; import { AppComponent } from './shared/app/app.component'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { UniversalModule } from 'angular2-universal'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, NavMenuComponent ], imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. ModuleAModule ] }) export class AppModule {}

It gave me an exception

Exception: the Node module call failed: Error: Parse errors pattern: "router-outlet" is not a known element: 1. If "router-outlet" is an Angular component, check that it is part of this module. 2. If Router-Socket is a web component, add CUSTOM_ELEMENTS_SCHEMA to the @ NgModule.schemas of this component to suppress this message.

The <router-outlet> used in app.component as a placeholder for the main content. But it works when I set up routes in the main application module, for example,

 imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. ParentAreaModule, RouterModule.forRoot([ {path: 'home',component:HomeComponent} ]) ]

This will make me define all the routes in app.module . It requires import for all my components in different modules, which seems useless to me. I would like to set the routes in the submodules themselves. The best solution would be an automatically added prefix for each module (for example, module-a for the first module).

+1
javascript angular angular2-routing
source share
2 answers
 import { ModuleAModule } from './module-a/module-a.module'; import { NavMenuComponent } from './shared/navmenu/navmenu.component'; import { AppComponent } from './shared/app/app.component'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { UniversalModule } from 'angular2-universal'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, NavMenuComponent ], imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. ModuleAModule, RouterModule ] }) export class AppModule {}
+1
source share

Use a function module if you have many functions and want to separate it in your module. General modules are modules that are common features of your application. Core modules are modules that further break down application modules into objects that apply only to the application module.

My suggestion is to first develop the application, and then search for the modules and separate them.

0
source share

More articles:


All Articles