I create a login.component.spec.ts for my loginComponent. However, when I run tns test android, the TestBed.createComponent(LoginComponent) failed. The error is below:
NativeScript / 29 (10; Android SDK built for x86) LoginComponent
Should create the app FAILED
Failed: StaticInjectorError(DynamicTestModule)[TestComponentRenderer
-> InjectionToken DocumentToken]:
StaticInjectorError(Platform: core)[TestComponentRenderer ->
InjectionToken DocumentToken]: document is not defined
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [
'TestComponentRenderer', InjectionToken DocumentToken ] }) at Jasmine
I cannot find any result in website about my problem. Thanks for helping.
I tried to include http module since someone said the undefined document may because of http. However, it still does not work.
This is code for login.component.spec.ts:
import "core-js";
import "zone.js/dist/zone";
import "zone.js/dist/proxy";
import "zone.js/dist/sync-test";
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";
import "zone.js/dist/jasmine-patch";
import "zone.js/dist/long-stack-trace-zone";
import { ComponentFixture, async, TestBed} from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { NO_ERRORS_SCHEMA, DebugElement} from '#angular/core';
import { RouterTestingModule } from '#angular/router/testing';
import { Router } from '#angular/router';
import { ActivatedRoute } from "#angular/router";
import { RouterExtensions } from "nativescript-angular/router";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting }
from '#angular/platform-browser-dynamic/testing';
import { LoginComponent } from '~/pages/login/login.component';
describe ('LoginComponent', () => {
beforeEach(async( () => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
providers: [],
declarations: [
LoginComponent
],
schemas: [
NO_ERRORS_SCHEMA]
}).compileComponents();
}));
it('Should create the app', async( () => {
const fixture = TestBed.createComponent(LoginComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});
You are using the BrowserDynamicTestingModule which is not valid for {N}. You are suppose to use NativeScriptTestingModule form nativescript-angular/testing.
Related
Below is my code
I tried to set a web socket gateway as below.
events.gateways.ts
import {
MessageBody,
SubscribeMessage,
WebSocketGateway,
WebSocketServer,
} from "#nestjs/websockets";
import { Server } from "socket.io";
#WebSocketGateway({
cors: {
origin: "http://localhost:3000",
},
})
export class EventsGateway {
#WebSocketServer()
server: Server;
#SubscribeMessage("events")
handleEvent(#MessageBody() data: string): string {
return data;
}
}
I set above gateway as a provider to a module.
events.module.ts
import { Module } from "#nestjs/common";
import { EventsGateway } from "./events.gateway";
#Module({
providers: [EventsGateway],
})
export class EventsModule {}
Fianllt, i imported above module to the app.module.ts and now I am getting the error
app.module.ts
import { Module } from "#nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { APP_FILTER } from "#nestjs/core";
import { AllExceptionFilter } from "./all-exception.filter";
import { ConfigModule } from "#nestjs/config";
import { TypeOrmModule } from "#nestjs/typeorm";
import { Student } from "./student/entities/student.entity";
import { EventsModule } from "./events/events.module";
#Module({
imports: [
ConfigModule.forRoot(),
TypeOrmModule.forRoot({
type: "postgres",
host: process.env.DB_HOST,
port: parseInt(process.env.DB_PORT as string) | 5432,
username: process.env.DB_USERNAME,
password: process.env.DB_PASSWORD,
database: process.env.DB_DATABASE,
entities: [Student],
synchronize: true,
}),
EventsModule,
],
controllers: [AppController],
providers: [
{
provide: APP_FILTER,
useClass: AllExceptionFilter,
},
AppService,
],
})
export class AppModule {}
This is the error I am keep getting.
TypeError: this.graphInspector.insertEntrypointDefinition is not a function
at /home/Desktop/New Folder/nest_try_1/node_modules/#nestjs/websockets/web-sockets-controller.js:108:33
at Array.forEach (<anonymous>)
at WebSocketsController.inspectEntrypointDefinitions (/home/Desktop/New Folder/nest_try_1/node_modules/#nestjs/websockets/web-sockets-controller.js:106:25)
at WebSocketsController.subscribeToServerEvents (/home/Desktop/New Folder/nest_try_1/node_modules/#nestjs/websockets/web-sockets-controller.js:39:14)
at WebSocketsController.connectGatewayToServer (/home/Desktop/New Folder/nest_try_1/node_modules/#nestjs/websockets/web-sockets-controller.js:30:14)
at SocketModule.connectGatewayToServer (/home/Desktop/New Folder/nest_try_1/node_modules/#nestjs/websockets/socket-module.js:47:35)
at /home/Desktop/New Folder/nest_try_1/node_modules/#nestjs/websockets/socket-module.js:36:38
at IteratorWithOperators.forEach (/home/Desktop/New Folder/nest_try_1/node_modules/iterare/lib/iterate.js:157:13)
at SocketModule.connectAllGateways (/home/Desktop/New Folder/nest_try_1/node_modules/#nestjs/websockets/socket-module.js:36:14)
at /home/Desktop/New Folder/nest_try_1/node_modules/#nestjs/websockets/socket-module.js:31:61
Node.js v19.4.0
I am follwing the documentation and I am keep getting above error.
you should align your dependencies, ie., if you're using #nestjs/websockets v9.3.1, #nestjs/core must be in v9.3.1 as well
Run npx nest info and check that out.
That error is because #nestjs/websockets is invoking a method added in v9.3 which depends on a method added in v9.3 of #nestjs/core as well.
btw there are closed issues on GitHub about that error: https://github.com/nestjs/nest/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed+insertEntrypointDefinition
I spun up a new project with Angular and AngularFire. I ran
firebase init firestore
firebase init functions
This set up this Angular module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { initializeApp,provideFirebaseApp } from '#angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore,getFirestore } from '#angular/fire/firestore';
import { provideFunctions,getFunctions } from '#angular/fire/functions';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
provideFunctions(() => getFunctions())
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I didn't write any of that. It looks like AngularFire 7.
The AngularFire Functions documentation shows a different module setup. It looks like AngularFire 6:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '#angular/fire/compat';
import { AngularFireFunctionsModule } from '#angular/fire/compat/functions';
import { environment } from '../environments/environment';
#NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireFunctionsModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
The differences are that the new module has:
import { initializeApp,provideFirebaseApp } from '#angular/fire/app';
import { provideFirestore,getFirestore } from '#angular/fire/firestore';
import { provideFunctions,getFunctions } from '#angular/fire/functions';
...
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
provideFunctions(() => getFunctions())
There are two extra lines because I initialized Firestore. The older module has this:
import { AngularFireModule } from '#angular/fire/compat';
import { AngularFireFunctionsModule } from '#angular/fire/compat/functions';
...
AngularFireModule.initializeApp(environment.firebase),
AngularFireFunctionsModule
I left the new module as is and went on to the component. Here's what the AngularFire Functions documentation says to use this (I added a template and stylesheet):
import { Component } from '#angular/core';
import { AngularFireFunctions } from '#angular/fire/compat/functions';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private functions: AngularFireFunctions) { }
}
That component throws an error message:
R3InjectorError(AppModule)[AngularFireFunctions -> InjectionToken
It can't inject AngularFireFunctions.
I went back to the module and added these lines:
import { AngularFireFunctionsModule } from '#angular/fire/compat/functions';
...
imports: [
...
AngularFireFunctionsModule
],
That doesn't fix the error. The error only goes away when I add this code to the module:
import { AngularFireModule } from '#angular/fire/compat';
import { AngularFireFunctionsModule } from '#angular/fire/compat/functions';
...
imports: [
BrowserModule,
// provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
provideFunctions(() => getFunctions()),
AngularFireModule.initializeApp(environment.firebase),
AngularFireFunctionsModule
],
In other words, I commented out the AngularFire 7 version of initializeApp and used the AngularFire 6 version of initializeApp.
This code is getting smelly. It seems to me that I should leave the module alone and in the component I should import httpsCallable and AngularFireFunctions from #angular/fire/functions. No problem importing httpsCallable but AngularFireFunctions isn't on #angular/fire/functions.
I feel like the component should look like this:
import { Component } from '#angular/core';
import { Firestore, doc, getDoc, getDocs, collection, updateDoc } from '#angular/fire/firestore';
import { httpsCallable, AngularFireFunctions } from '#angular/fire/functions';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private functions: AngularFireFunctions) {}
callMe() {
console.log("Calling...");
this.functions.httpsCallable('helloWorld');
}
}
The problem is in AngularFireFunctions. Has this been replaced with something new in AngularFire 7?
I looked through the AngularFire repo on GitHub looking for #angular/fire/functions but I couldn't find this. Where can I see the properties on this type?
There's no AngularFire 7 module for Functions. Use the Firebase module:
import { getFunctions, httpsCallable, httpsCallableFromURL } from "firebase/functions";
I have been developing a simple application on Nativescript playground recently, where i found that ngModel was not working on input type TextField. I have made sure that i import NativescriptFormModule in the module of the app. but still it is not working.
You the extended syntax instead of ngModel (text and textChange) as the TextFuield is a complex layout with multiple bindable properties (hint, text, returnType, etc.) - example Playground here and documentation article here
HTML
<TextField [hint]="hint" [text]="name" (textChange)="onTextChange($event)"></TextField>
TypeScript
export class SignupComponent implements OnInit {
name: string;
hint: string = "enter name";
tf: TextField;
onTextChange(args: EventData) {
console.log("onTextChange");
this.tf = <TextField>args.object;
console.log("tf.text: ", this.tf.text);
}
}
I had the same issue with the NativeScript Playground tutorial today. Could'nt have my [(ngModel)]="user.email" (or password) to work. I fixed it by importing the NativeScriptFormsModule and adding it to #NgModule imports in the app.module.ts
import { NativeScriptFormsModule } from "nativescript-angular/forms";
then
#NgModule({
imports: [NativeScriptFormsModule]
})
app.module.ts file:
import { NgModule } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { AppComponent } from "./app.component";
#NgModule({
imports: [
NativeScriptModule,
NativeScriptUIChartModule,
NativeScriptHttpClientModule,
NativeScriptFormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
I have added angular2-dropdown-multiselect in Jhipster angular part. Its not working perfectly as per the angular2-dropdwon-multi select or ngx-treeview I have added the dependency using
npm install angular2-multiselect-dropdown --save
Then I have added the same into app.module.ts
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
#NgModule({
// ...
imports: [
AngularMultiSelectModule,
]
// ...
})
Then Try this following example
import { Component, OnInit } from '#angular/core';
export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit(){
this.dropdownList = [
{"id":1,"itemName":"India"},
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"},
{"id":6,"itemName":"Germany"},
{"id":7,"itemName":"France"},
{"id":8,"itemName":"Russia"},
{"id":9,"itemName":"Italy"},
{"id":10,"itemName":"Sweden"}
];
this.selectedItems = [
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"}
];
this.dropdownSettings = {
singleSelection: false,
text:"Select Countries",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
classes:"myclass custom-class"
};
}
onItemSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any){
console.log(items);
}
onDeSelectAll(items: any){
console.log(items);
}
}
with HTML
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>
But after runing yarn serve
it just showing
Please help me
I had a similar problem with another third party library (ngx-treeview) and I also was only getting the html component empty and with no errors in the javascript console.
It was solved after importing the third party library properly following the JHipster project structure. If you want to use an external module in more than one module component, which is common, you need to configure it in shared-libs.module.ts and also add it to imports and to the exports on its #NgModule configuration.
src\main\webapp\app\shared\shared-libs.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { CommonModule } from '#angular/common';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { NgJhipsterModule } from 'ng-jhipster';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { CookieModule } from 'ngx-cookie';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { TreeviewModule } from 'ngx-treeview';
#NgModule({
imports: [
NgbModule.forRoot(),
NgJhipsterModule.forRoot({
alertAsToast: false,
i18nEnabled: true,
defaultI18nLang: 'en'
}),
InfiniteScrollModule,
CookieModule.forRoot(),
FontAwesomeModule,
TreeviewModule.forRoot() // new third party lib import
],
exports: [FormsModule, CommonModule, NgbModule, NgJhipsterModule,
InfiniteScrollModule, FontAwesomeModule,
TreeviewModule] // new third party lib export
})
export class MyProjectSharedLibsModule {}
Share-libs module is generated by Jhipster and it is by default imported in shared.module which is imported by app.module and also the other modules that are created at start by Jhipster. For more about project structure: https://www.jhipster.tech/using-angular/
However, if you create a new angular module component you need to add the shared module in the imports to be able to use the third parties libraries there.
#NgModule({
...
imports: [MyProjectSharedModule,
RouterModule.forChild([HOME_ROUTE])],
..
})
export class MyProjectAnotherModule {}
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {FormsModule} from '#angular/forms';
import { AppComponent } from './app.component';
#NgModule({
imports:
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModeule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I am recently learning Angular JS from it's official website. My site was working correctly at the starting but now I am stuck at binding the component to the module. I am getting error that it cannot find food. I don't have any idea what to do I have rechecked code several times .