I am using angular2 and uirouter for routing. I have successfully implemented uirouter module in application.But the problem arises when i try to test my application. Where i am using karma, Jasmin and initiating it using npm test. but encountered with ERROR:Can't resolve all parameters for UIRouter: (?, ?).
I have imported "UIRouter" in *.spec.ts file and added it in providers array as below.
import { UIRouterModule } from '#uirouter/angular';
import { UIRouter } from "#uirouter/core";
describe('Footer Menus', () => {
let footerMenuBlServiceRef:FooterMenuBLService;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [],
declarations: [],
providers: [UIRouter],
})
.compileComponents();
}));
But no luck. Any help will be appreciated.
Solved it !!!
Just remove the UIRouter from providers array but keep the import statement for it. and yes its working.
On last friday, I finally found a way to make it work. It is not a clean way to do it but it is working, at least.
I reimport the UIRouter.forRoot with the states of my feature module and I provide the APP_BASE_HREF value for the Root Provider of UIRouter.
Here is my BeforeEach :
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
HomeComponent,
HomeCardComponent
],
imports: [
AppMaterialModule,
// Always import root UIRouter module when testing a component including routing
UIRouterModule.forRoot({states: HOME_STATES})
],
providers: [
// Also, include the base href value when testing a component including routing
{provide: APP_BASE_HREF, useValue: '/'}
],
}).compileComponents();
}));
If you know a better way, I would be happy to know! :)
The UI-Router source can be of some help. This is what worked for me:
import { UIRouterModule } from '#uirouter/angular';
...
TestBed.configureTestingModule({
...
imports: [UIRouterModule.forRoot({ useHash: true })],
})
Related
I am porting an app from angular8 with angular/fire 5.4 to angular15 with angular/fire 7.5. I added the following to my AppModule imports section
import { provideFirebaseApp, initializeApp } from '#angular/fire/app';
import { provideFirestore, getFirestore } from '#angular/fire/firestore';
import { provideStorage, getStorage } from '#angular/fire/storage';
import { provideAuth, getAuth } from '#angular/fire/auth';
import { provideFunctions, getFunctions } from '#angular/fire/functions';
imports: [
...
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireStorageModule,
AngularFirestoreModule,
AngularFireAuthModule,
AngularFireFunctionsModule,
provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore()),
provideStorage(() => getStorage()),
provideFunctions(() => getFunctions()),
...
],
providers: [
{ provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig }
]
But I am getting this error message: What am I missing?
main.ts:14 FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).
at initializeApp (index.esm2017.js:423:29)
at getApp (index.esm2017.js:476:16)
at getFunctions (index.esm2017.js:666:35)
at angular-fire.js:227:48
at angular-fire.js:160:59
at _ZoneDelegate.invoke (zone.js:372:26)
at Zone.run (zone.js:134:43)
at NgZone.runOutsideAngular (core.mjs:24212:28)
at runOutsideAngular (angular-fire.js:160:35)
at angular-fire.js:227:21
```
I figured it out. I had a service which used AngularFireAuth but was not imported from the compat folder. So while it compiled, it gave me that error during runtime. So if you use the compat mode of angularfire use it everywhere
I have a CheckModule which accepts configuration in the forRoot method using a constant CHECK_OPTIONS:
#Module({})
export class CheckModule {
static forRoot(options?: CheckOptions): DynamicModule {
return {
module: CheckModule,
providers: [
{
provide: CHECK_OPTIONS,
useValue: options,
},
CheckService,
],
exports: [CheckService],
};
}
}
My CheckService uses the options:
#Injectable()
export class CheckService {
...
constructor(#Inject(CHECK_OPTIONS) options: CheckOptions) {}
...
Whenever I debug the application, everything is working fine. But, once I build for production and serve it on Heroku I get an error.
# Production build
nx build $PROJECT_NAME --prod
# Serving the app
node dist/apps/worker/main.js
I get an error:
ERROR [ExceptionHandler] Nest can't resolve dependencies of the CheckService (?). Please make sure that the argument CHECK_OPTIONS at index [0] is available in the CheckModule context.
Am I missing something here? I'm kind of clueless...
Seems like your module needs to be global.
Try adding #Global() decorator before #Module({}).
In my app.module I imported the CheckModule as:
imports: [
CheckModule.forRoot(),
...
]
This method had an optional parameter for CheckOptions:
forRoot(options?: CheckOptions) { ... }
However my CheckService expects a CHECK_OPTIONS which is not optional. This is what caused the error. Correctly marking this InjectionToken as #Optional() resolved this issue.
So, I've changed the code from:
constructor(#Inject(CHECK_OPTIONS) options?: CheckOptions) {}
To:
constructor(#Optional() #Inject(CHECK_OPTIONS) options?: CheckOptions) {}
^^^^^^^^^^^
See https://docs.nestjs.com/providers#optional-providers for more information about the #Optional() decorator.
I had the same issue, fixed it by moving adding all the providers to exports of the dynamic module also. in you case add:
exports: [ {
provide: CHECK_OPTIONS,
useValue: options,
},
CheckService]
I've had this error lots of times and I've always been able to fix it but I think I'm overlooking something this time and I can't get it too work.
As stated in the title, the error I get is Can't bind to 'formGroup' since it isn't a known property of 'form'. for the following line of code: <form [formGroup]="contactSettings">.
I already checked all stackoverflow posts but they all come down to add the ReactiveFormsModule to the module that makes use of ReactiveForms. In my case, which was also in various stackoverflow posts, I should export the ReactiveFormsModule in my SharedModule and import that SharedModule in my ContactModule that actually uses the ReactiveFormsModule. I don't see what I'm doing wrong.
contact-settings.component.html
<form [formGroup]="contactSettings">
</form>
contact-settings.component.ts
export class ContactSettingsComponent extends FormComponent {
contactSettings: FormGroup = this.fb.group({ //Moving this to constructor or onInit does not fix it
firstName: ["First name"],
lastName: ["Last name"],
emailAdress: ["email", Validators.email],
gender: ["male"],
parentCustomerId: ["Parent customer name"],
language: ["Language"],
telephone: ["Telephone number"],
mobilephone: ["Mobile phone number"],
});
constructor(private fb: FormBuilder, private contactService: ContactService) {
super();
}
}
contact.module.ts
... //imports
#NgModule({
declarations: [
ContactSettingsComponent
],
imports: [
ContactRoutingModule,
SharedMaterialModule, // <--- contains export ReactiveFormsModule and FormsModule
SharedComponentsModule
]
})
export class ContactModule { }
shared-material.module.ts
... //Angular Material imports
//CommonModule
import { CommonModule } from "#angular/common";
//Forms
import { ReactiveFormsModule, FormsModule } from "#angular/forms";
//Browser
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { BrowserModule } from "#angular/platform-browser";
#NgModule({
//Normally imports are here, but the template I bought does not have this and adding it doesn't fix it either. It worked normally before.
exports: [
//CommonModule
CommonModule,
//Browser animations
BrowserModule,
BrowserAnimationsModule,
//Forms
ReactiveFormsModule, // <--- clearly present here
FormsModule,
//Angular Material Modules
...
]
})
export class SharedMaterialModule {}
My imports were done perfectly. The problem was that my ContactModule was never used in any other module. I had to add load the ContactModule by adding the following code block to my app-routing.module.
{
path: 'contact',
loadChildren: () => import('./views/contact/contact.module').then(m => m.ContactModule)
}
I want to make animation transition in my ionic 3 app when navigate to page.
I'm using this documentation
I declared in my app.module.ts
#NgModule({
declarations: [
MyApp,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp,{
PageTransition: 'wp-transition'
}),
AngularFireModule.initializeApp(FIREBASE_CONFIG)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
then when I navigate to page I wrote this
NavigateToPage(pageName: string){
let opts = { animate: true, animation: "wp-transition",direction:'forward', duration: 2500}
pageName === 'TabsPage'? this.navCtrl.setRoot(pageName,opts) : this.navCtrl.push(pageName,opts);
}
}
but I don't see any transition, it looks the same as before.
any idea?
I've made it work(a push()) in one of my project by doing this:
this.navCtrl.push(pageName,{/*here stay navParams - but for this example is empty, but still need to use {}*/},opts);
So without the comment: this.navCtrl.push(pageName,{},opts);
I am planning to start learning angular 2 component router.
I have used Angular ui-router heavily.All my projects uses UI-router complex features like nested states and nested named views.
What will be good start to use angular 2 component router?
how can I configure nested states in Angular 2 component router?
All in all i would say routing is pretty simple and intuitive in angular 2
I would suggest reading through the router docs to get all the basics.
Keep in mind that child components can have routes too. They build from its parents routes.
app.component.ts (excerpt)
#Component({ ... })
#RouteConfig([
{path:'/crisis-center/...', name: 'CrisisCenter', component: CrisisListComponent},
{path:'/heroes', name: 'Heroes', component: HeroListComponent},
{path:'/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}
])
export class AppComponent { }
crisis-center.component.ts(excerpt)
#RouteConfig([
{path:'/', name: 'CrisisCenter', component: CrisisListComponent, useAsDefault: true},
{path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent}
])
Notice that the path ends with a slash and three trailing periods (/...).
That means this is an incomplete route (AKA a non-terminal route). The finished route will be some combination of the parent /crisis-center/ route and a route from the child router that belongs to the designated component.
All is well. The parent route's designated component is the CrisisCenterComponent which is a Routing Component with its own router and routes.
From angular.io router guide
You can define a app.routing.ts like below.
export const routes: Routes = [
{
path: '',
component: SimpleLayoutComponent,
data: {
title: 'Login form'
},
children: [
{
path: '', component: LoginComponent,
}
]
},
{
path: 'dashboard',
component: FullLayoutComponent,
data: {
title: 'Home'
},
children: [
{
path: '',
component: 'mycomponent'
}
]
}
];
Then import this class to your app.module.ts file like below.
import { AppRoutingModule } from './app.routing';
#NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
AppRoutingModule,
],
declarations: [
AppComponent,
LoginComponent
],
providers: [
UserService, AuthGuard],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts Below: views get injected in
import { Component } from '#angular/core';
#Component({
selector: 'body',
template: '<router-outlet></router-outlet>'
})
export class AppComponent { }
#NgModule({
declarations: [AppComponent,CreateComponent,ListComponent],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule.forRoot([
{path:"",component:ListComponent},
{path:"Create",component:CreateComponent},
])
],
bootstrap: [AppComponent]
})
Put this RouterModule in app.module file.
For this you have to import { RouterModule} ;
<router-outlet></router-outlet>
Put router-outlet element in app.component.html to render component through routing.