Splitting the shared module into multiple child modules - javascript

Inside of my SharedModule I want to split up related pieces of code into multiple child modules. When I do that however, I lose the common imports from the shared module. For example, I import the FormsModule before my SharedChildModule, but when I try to use ngModel inside my SharedChildModule it tells me that ngModel isn't available. Is it possible to have child modules inside the shared module and also to have those modules inherit the modules from the SharedModule?
When I include the components and directives from ChildSharedModule directly in the SharedModule I have no issues. It is only when I attempt to move those into a child module and then import the whole module into SharedModule that I get the errors.
#NgModule({
declarations: [],
exports: [
CommonModule,
FormsModule,
ChildSharedModule
],
imports: [
CommonModule,
FormsModule,
ChildSharedModule
]
})
export class SharedModule { }
#NgModule({
declarations: [
ChildValidatorDirective,
ChildControlComponent
],
exports: [
ChildValidatorDirective,
ChildControlComponent
]
})
export class SharedChildModule {}

You can not push down dependencies of modules, but you can export modules upwards.
#NgModule({
declarations: [],
exports: [
ChildSharedModule
],
imports: [
ChildSharedModule
]
})
export class SharedModule { }
#NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
ChildValidatorDirective,
ChildControlComponent
],
exports: [
ChildValidatorDirective,
ChildControlComponent,
CommonModule,
FormsModule
]
})
export class SharedChildModule {}
Now SharedModule will import SharedChildModule and will receive everything that is exported by that child module. Since SharedModule is also exporting SharedChildModule then parents who import it will also receive CommonModule and FormsModule.
You are basically breaking tree shaking here, and making unit testing very difficult.
Angular will no longer be able to drop unused modules, because you are coupling everything together. It will also become difficult to remove FormsModule from SharedChildModule because you won't know how many parents depend upon it.
You should try to keep your modules as singular and flat as possible, and have each module import only what it specifically needs.
You can export another module when the consumer doesn't know that other module is a requirement.

Related

No component factory found for ContactUsComponent. Did you add it to #NgModule.entryComponents? in angular 7

Getting this error when trying to render a modalcomponent from my component.
#NgModule({
imports: [...],
exports: [...],
entryComponents: [ContactUsComponent,..],
declarations: [ContactUsComponent,...],
providers: [...]
})
Have included both in entrycomponents and declarations
but still the error.

How can I use an Angular app into child routes of another Angular app?

I'd like to load an Angular app using lazy-loading (when a specific route is hit by users) into another Angular app
Shall I compile the first app in order to be used into the second one or what?
Routing-Module of the app to nest into an Angular app:
const upgradeRoutes: Routes = [
{
path: '/upgrade',
component: HelloComponent
},
{ path: '', redirectTo: '/upgrade', pathMatch: 'full' }
];
#NgModule({
imports: [
RouterModule.forChild(upgradeRoutes)
],
exports: [
RouterModule
],
declarations: []
})
export class UpgradeRoutingModule { }
Module of the app to nest into an Angular app
#NgModule({
declarations: [
AppComponent,
HelloComponent
],
imports: [
CommonModule,
UpgradeRoutingModule
],
exports: [
UpgradeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class UpgradeModule { }
App module where I want to use (with lazy loading) the first one described in a child routes:
import {UpgradeModule} from '../../node_modules/module-upgrade/src/app/app.module'
#NgModule({
declarations: [
...
],
import: [ UpgradeModule ]
});
1) I'd like to understand if that is correct, and/or there is another way to do it.
2) Another problem is that the child app uses Angualr 6, whereas the second/main one uses Angular 4.
Either:
Don't bootstrap your child app and use it as a submodule (that requires that you upgrade the main app to Angular 6, which requires at least to refactor your RxJS operators calls, and probably some minor other things),
Or just configure your web server to serve your child app on a specific URL. In that case your two apps won't be able to share any state (except global namespace, cookies and localStorage) or
Angular Component/Service/Directive/Pipe

Creating Angular module which can be shared?

I am pretty new angular 2, I have a requirement to create a module say that account module which should be shared across two different projects say that project A and B.
I am not sure how to proceed with my design. Do I have to create an angular module in node JS? If anyone could help me on how to proceed to give some design idea I will take it further.
I tried googling it but no luck, to be frank, I don't know what to search for.
Note: I am using Angular 2
Create Module and export from NgModule
#NgModule({
declarations: [TestComponent],
exports: [TestComponent],
imports: [OtherModule],
providers: []
})
export class TestModule{}
and Import same Module from different project
import {TestModule} from '<path of Test Module>'
#NgModule({
declarations: [NewComponent],
exports: [NewComponent],
imports: [TestModule], // import that module in NgModule
providers: []
})
export class NewModule{}
Hope this is helpful for you
I think learning imports and NgModule in Angular 2 are good start
Module Holds all the services,component and other module which are required by the component in your case it is account module
Once you are done with create account component next step will be configuration of module.
let take AccountManagementComponent.ts
#Component({
selector: 'app-account-management',
templateUrl: './account-management.component.html',
styleUrls: ['./account-management.component.css']
})
export class AccountManagementComponent implements OnInit {
constructor(private accountservice: AccountService, ) {}
ngOnInit() {
}
}
Create New ts File Called Account Module in the same directory of AccountComponent.ts. Which includes all the services,component and other modules which are required to that component CommonModule is needed directive as used in your component such as NgIf, NgFor as follow:
import {NgModule} from "#angular/core";
import {CommonModule} from "#angular/common";
import {FormsModule} from "#angular/forms";
import {AccountService} from "../shared/services/Account-data.service";
import {AccountManagementComponent} from "./account-management.component";
#NgModule({
declarations: [AccountManagementComponent],
imports: [CommonModule, FormsModule],
providers: [AccountService],
})
export class AccountModule {}
Finally instead of importing Component and services required by the component
Need to import the module in the root module that is app.module.ts because that module contains all the things which are required to an component
In app.module.ts
#NgModule({
declarations: [],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AccountModule,
],

What is the exact meaning of export keyword in Angular 2\TypeScript?

I am pretty new in Angular 2. I am studying how to create modules into an Angular app and I have the following doubt related a tutorial that I am following.
My doubt is related to the routing.
So in my example there is defined this AuthModule module:
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
import { AuthRoutingModule } from './auth-routing.module';
#NgModule({
// Components and directives used by the module:
declarations: [
SigninComponent,
SignupComponent
],
// Import modules used by this features module:
imports: [
FormsModule,
AuthRoutingModule
]
})
export class AuthModule {}
and I have the related rotues configuration class defined:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
const appRoutes: Routes = [
{ path: '', redirectTo: '/recipes', pathMatch: 'full' },
{ path: 'shopping-list', component: ShoppingListComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
So I think that the export keyword means that the content related to this class can be exported and used somewhere else (in this case I think into the imports array of the AuthModule class).
Is it? Or am I missing something? What it the exact meaning of the export statment?
I am not understanding if it is something related to Angular or more generally to TypeScript (because here I found https://www.typescriptlang.org/docs/handbook/modules.html). So it seems to me that this module concept is not directly bounded to Angular 2 framework but is a TypeScript concept to subdivide our code in a smart way (then Angular 2 can use this kind of feature of the language).
Is it or am I missing something?
Angular imports/exports and TypeScript imports/exports are two different concepts.
TypeScript imports/exports work at language level to make it clear what
a used identifier references exactly. This is entirely unrelated to Angular.
So, if you use FormsModule there can't be any ambiguity, what FormsModule is meant. If there is more than one FormsModule in your code or any of your dependencies, then you need to make it clear with imports which one is meant. You can't import 2 FormsModule from different locations without disambiguation (for example using as foo in the import and then reference it using foo.FormsModule).
This way you can use code from arbitrary 3rd-party libraries and avoid name collisions.
Angular imports/exports are used to make the content of one module available to be used in another module.
Your:
imports: [
FormsModule,
AuthRoutingModule
]
Allows you to use the directives from FormsModule and AuthRoutingModule in AuthModule and registers the services provided by these modules in the AppModule scope or the closed lazy-loaded root scope.
If you reference any of Angulars directives or services in TypeScript code, you also need to add TypeScript imports. Above FormsModule and AuthRoutingModule need to be imported with TypeScript imports, to make the Angular imports: [...] work.
For example like
<form #f="ngForm">
<input type="text">
</form>
works only if FormsModule is listed in imports: [ ... ] of your current module.
There is no TypeScript import required, because there is no TypeScript code.
Yes you are right by using export keyword before your typescript class you can use that class somewhere else .. in your project

Angular2 ng-translate not importing

I am working on ng2-translate in my ionic2 app and following its Github's docs instructions.
However when I import "TranslateModule"
import {TranslateModule} from 'ng2-translate/ng2-translate';it gives me this error "Module my_node-module_path/ng2-translate/ng2-translate has no exported member TranslateModule."
And I have npm installed it.
Can anyone help me out here? Thanks.
**#NgModule Code **
#NgModule({
declarations: [
MyApp,
FillForm,
MainPage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp),
BrowserModule,
HttpModule,
TranslateModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
FillForm,
MainPage,
TabsPage
],
providers: []
})
File Structure

Categories