Exporting enums in Angular modules - javascript

Does anyone know if it’s possible to export enums in Angular modules?
If not, are there any best practises to ship enums within Angular modules?
// not working example
// i dont know how to export GreatEnum
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { GreatComponent } from './great.component';
import { GreatEnum } from './great.enum';
#NgModule({
imports: [
CommonModule
],
declarations: [GreatComponent ],
exports: [GreatComponent ]
})
export class GreatModule {
}

Why you need to export enum from the modules?. It is not necessary . It is like an interfaces and classes. You can use it everywhere, except directly in the templates.
You can just import them in any file which you want and use there. For them there is no error like
Directive or Component is not found

If you are writing libraries, you have to export enums with the keyword const
export const enum <ENUM_NAME>

Related

Angular 2 *ngFor not working as intended even when CommonModule imported

I have one feature module that I created via CLI, so it imports the common module.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HomeComponent } from './home/home.component';
#NgModule({
declarations: [HomeComponent],
imports: [
CommonModule
]
})
export class HomeModule { }
But when I do this normal paragraph appears but paragraph with *ngFor part doesn't work, it does not display anything.
<p> Some normal paragraph </p>
<p *ngFor = "let i of [1,2,3]" >home works!</p>
I also tried to create a shared module, import and export the common module there, and import that shared module in my feature module but it didn't work.
What could cause the problem?
I have also faced that problem. after looking at my app.module.ts I found that shared my custom module is not imported there. After importing it in app module my problem has been solved

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.

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

How should I include model classes in an Angular module?

I've a few classes I want to be just a plain bean/DTO class, they aren't display #component classes, they're not #Pipe classes nor should they be #Directive (at least I don't think it should be!).
I want to be able to bundle them into a module (they will be used across other modules), but despite several incantations I keep getting errors like this:
When I startup my Angular app (ng serve) it compiles ok, but in the browser (Chrome) console I get an error....
Uncaught Error: Unexpected value 'Accreditation' declared by the module 'ServiceModule'. Please add a #Pipe/#Directive/#Component annotation.
How should I be bundling these classes into a Module for use by other Modules? I don't mind if they are in my service module or in another new 'beans' modules.
Given this module definition (service.module.ts):
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {MemberService} from "./member/member.service";
import { Accreditation } from "./accreditation";
import {Player} from "./player";
import {Club} from "./club";
import {Coach} from "./coach";
#NgModule({
imports: [CommonModule],
declarations: [Accreditation, Club, Player, Coach],
exports: [Accreditation, Club, Player, Coach],
providers: [MemberService]
})
export class ServiceModule { }
accreditation.ts:
export class Accreditation {
uuid: string;
name :string;
lastComplete: Date;
expires: Date;
inLast6Months: boolean;
type: String;
displayName: String;
hasCompleted: boolean;
}
You don't need to import neither declare your DTOs in app.module.ts. It's available for a direct import in your components, directives, etc..
Simply import it in whichever component/service/directive,pipes you need with other imports:
import { Accreditation } from "./accreditation";
If you wish to share your DTO among several modules, put it in a shared folder and access it with a relative path, i.e.
import { Accreditation } from "./shared/accreditation";

Categories