Creating Angular module which can be shared? - javascript

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,
],

Related

Nest can't resolve dependencies of the X. Please make sure that the argument HttpService at index [1] is available in the Module context

I have a problem while was working with nestjs HttpModule
The error:
Nest can't resolve dependencies of the ShopService (PrismaService, ?). Please make sure that the argument HttpService at index [1] is available in the QaModule context.
My ShopModule:
#Module({
imports: [HttpModule],
controllers: [ShopController],
providers: [ShopService, PrismaService],
})
export class ShopModule {}
My QaModule:
#Module({
controllers: [QaController],
providers: [QaService, PrismaService, ShopService],
})
export class QaModule {}
What are the solutions?
Change your ShopModule to
#Module({
imports: [HttpModule],
controllers: [ShopController],
providers: [ShopService, PrismaService], // Prisma Service should probably come from PrisamModule
exports: [ShopService],
})
export class ShopModule {}
and your QaModule to
#Module({
imports: [ShopModule],
controllers: [QaController],
providers: [QaService, PrismaService], // Prisma Service should still probably come from `PrismaModule`
})
export class QaModule {}
Services should only be declared in one module and then exported from that module if they need to be used elsewhere. In the module that declares the consuming service, the original module should be added to the imports array. This will ensure you have only one instance of each non-transient provider and will not need to be recreated in each module it is used in

New to JavaScript please help error NG8001: 'app-user-settings-form' is not a known element:

this is my first time posting on this forum as I am starting to learn JavaScript a couple of days ago. I am currently following a course on PluralSight.com about Angular Forms. I was following the tutorial and a couple of errors started to show up, as I have no clue of what I am doing I started to look for a solution on Google but nothing I tried helped.
I have tried pressing Ctrl C and then npm start/install... but honestly nothing will fix the problem.
Honestly, I am running crazy. I really want to learn how to code. Thank you in advance to whoever can help me, God bless you.
The full error is:
ERROR in src/app/app.component.html:1:1 - error NG8001: 'app-user-settings-form' is not a known element:
1. If 'app-user-settings-form' is an Angular component, then verify that it is part of this module.
2. If 'app-user-settings-form' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
1 <app-user-settings-form></app-user-settings-form>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { UserSettingsFormComponent } from './user-settings-form/user-settings-form.component';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
app.component.html:
<app-user-settings-form></app-user-settings-form>`
user-settings-form.components.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-user-settings-form',
templateUrl: './user-settings-form.component.html',
styleUrls: ['./user-settings-form.component.css']
})
export class UserSettingsFormComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
This error: "1. If 'app-user-settings-form' is an Angular component, then verify that it is part of this module." is the hint.
You've certainly imported your module, but you did not declare it as "part of this module".
Your module needs to be put in the declarations: array.
#NgModule({
declarations: [
AppComponent,
UserSettingsFormComponent
],...

Splitting the shared module into multiple child modules

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.

initialize firebase in angular 6 without angularfire

I want had a project that initialize firebase by using AngularFire. However, during the entire development I didn't use much function from AngularFire. I always import the firebase/app at every services and use the respective function like firebase.auth() or firebase.database().
With that experience, I would like to initialize the firebase without AngularFire since I am not using the AngularFire methods.
Now come with my problem is I can't find any source to teach me how to initialize the firebase, and of course I am seeing error during importing the firebase at app.module.ts.
Below is my code:
Install the firebase by using: npm i firebase
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import * as firebase from 'firebase';
import { environment } from '../environments/environment'; //API key is imported
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
firebase.initializeApp(environment.firebase) //here shows the error
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
At the line of firebase.initializeApp(environment.firebase), it shows the error:
Type 'App' is not assignable to type 'any[] | Type<any> |
ModuleWithProviders<any>'.
Type 'App' is not assignable to type 'ModuleWithProviders<any>'.
Property 'ngModule' is missing in type 'App'.
Thanks in advance.
I would say you are having this error because firebase.initializeApp(environment.firebase) is not Angular Module.
I would suggest that you do this initialisation in one of your services or create a service for that effect.
#Injectable({
providedIn: 'root'
})
export class FirebaseService {
constructor() {
firebase.initializeApp(environment.firebase)
}
}
Well, you cannot import an object which is not an Angular module and you get that error because of that.
You can:
1. Use it in the AppModule constructor like:
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(){
firebase.initializeApp(environment.firebase);
}
}
2. Create a dedicated service for Firebase in which you will import 'firebase' lib (which is a good overall solution which will be probably used in your application globally).
#Injectable({
providedIn: 'root' // <-- If you are on Angular 6
})
export class FbService {
constructor() {
firebase.initializeApp(environment.firebase);
}
}
Just add firebase.initializeApp(environment.firebase); outside the module and the class, i.e:
import { environment } from '../environments/environment';
import * as firebase from 'firebase';
firebase.initializeApp(environment.firebase);
#NgModule({....
If you want to use it inside a service import firebase import * as firebase from 'firebase'; and use it as usual.

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

Categories