NativeScript (Angular) APK release errors - node.js

I am new to NativeScript. I am try to release an APK using
tns build android --for-device --release --bundle --env.aot --env.production --key-store-path ./release.keystore --key-store-password app-Release#2018 --key-store-alias app --key-store-alias-password app12345
An I am getting errors like this.
ERROR in ../$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve '/home/nmm/anu/projectname/app/auth/auth.module.ngfactory.js' in '/home/nmm/anu/projectname/$$_lazy_route_resource'
# ../$$_lazy_route_resource lazy namespace object ./auth/auth.module.ngfactory
# ../node_modules/#angular/core/fesm5/core.js
# ./app.module.ts
# ./main.ts
Here is my module file
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptUIAutoCompleteTextViewModule } from "nativescript-ui-autocomplete/angular/autocomplete-directives";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular/listview-directives";
import { TNSCheckBoxModule } from "nativescript-checkbox/angular";
import { RadioButtonModule } from "#webileapps/nativescript-radiobutton/angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { CommonFormsModule } from "~/common-forms/common-forms.module";
import { AdoptGrandParentComponent } from "./adopt-grand-parent.component";
const ROUTES: Routes = [
{ path: "", redirectTo: "adopt-grandparent", pathMatch: "full"},
{ path: "adopt-grandparent", component: AdoptGrandParentComponent}
]
#NgModule({
imports: [
NativeScriptCommonModule,
NativeScriptFormsModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forChild(ROUTES),
RadioButtonModule,
TNSCheckBoxModule,
NativeScriptUIListViewModule,
NativeScriptUIAutoCompleteTextViewModule,
CommonFormsModule.forRoot(),
],
declarations: [
AdoptGrandParentComponent
],
exports: [],
providers: [],
entryComponents: [],
schemas: [NO_ERRORS_SCHEMA]
})
export class AdoptGrandParentModule {
}

Related

NestJ app is not running after running yarn command to install all package

I have run yarn comment to install a new package added by my teammate, after doing that it showing this error.
Argument of type '{ imports: (typeof TypeOrmConfigModule)[]; inject: (typeof ConfigService)[]; name: "default"; useExisting: typeof TypeOrmConfigService; connectionFactory: (options: any) => Promise<...>; }' is not assignable to parameter of type 'TypeOrmModuleAsyncOptions'.
Object literal may only specify known properties, and 'connectionFactory' does not exist in type 'TypeOrmModuleAsyncOptions'.
57 connectionFactory: async (options) => {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
58 const connection = await createConnection(options);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
59 return connection;
~~~~~~~~~~~~~~~~~~~~~~~~~~
60 },
My app. modele .ts file. error is on 57 number line.
/**dependencies */
import { HttpModule } from '#nestjs/axios';
import { MiddlewareConsumer, Module, NestModule } from '#nestjs/common';
import { ConfigModule, ConfigService } from '#nestjs/config';
import { RouterModule } from '#nestjs/core';
import { TypeOrmModule } from '#nestjs/typeorm';
import { createConnection } from 'typeorm';
/**controllers */
import { AppController } from './app.controller';
/**services */
import { AppService } from './app.service';
import { AdminModule } from './modules/admin/admin.module';
import { MasterdataModule } from './modules/admin/masterdata';
import { UniCareerModule } from './modules/admin/uni-career';
import { AgentModule } from './modules/agent/agent.module';
import { CounsellorModule } from './modules/counsellor/counsellor.module';
import { MentorModule } from './modules/mentor/mentor.module';
import { StudentModule } from './modules/student/student.module';
import { StudyModule } from './modules/study/study.module';
import { UniversityModule } from './modules/university/university.module';
import { PublicApiModule } from './public-api';
import { PublicUniversityModule } from './public-api/university';
/**validate env config */
import { validate } from './uni-engine/config/env.validation';
import {
TypeOrmConfigModule,
TypeOrmConfigService,
} from './uni-engine/config/typeorm-config';
import { MailModule } from './uni-engine/mail/mail.module';
/** logger middleware */
import { LoggerMiddleware } from './uni-engine/middleware';
/**modules */
import { UniEngineModule } from './uni-engine/uni-engine.module';
import { UniEngineService } from './uni-engine/uni-engine.service';
import { OnlineLearningModule } from './modules/online-learning/online-learning.module';
import { ScheduleModule } from '#nestjs/schedule';
import { UniChatModule } from './modules/uni-chat/uni-chat.module';
#Module({
imports: [
/**initialize nest js config module */
ConfigModule.forRoot({
validate: validate,
//responsible for use config values globally
isGlobal: true,
}),
//type orm dependencies integration
TypeOrmModule.forRootAsync({
imports: [TypeOrmConfigModule],
inject: [ConfigService],
// Use useFactory, useClass, or useExisting
// to configure the ConnectionOptions.
name: TypeOrmConfigService.connectionName,
useExisting: TypeOrmConfigService,
// connectionFactory receives the configured ConnectionOptions
// and returns a Promise<Connection>.
connectionFactory: async (options) => {
const connection = await createConnection(options);
return connection;
},
}),
//module prefix for modules
RouterModule.register([
//module prefix for admin
{
path: 'admin',
module: AdminModule,
},
{
path: 'admin',
module: MasterdataModule,
},
//module prefix for uni career module
{
path: 'uni-career',
module: UniCareerModule,
},
//module prefix for study module
{
path: 'study',
module: StudyModule,
},
//module prefix for university module
{
path: 'university',
module: UniversityModule,
},
{
path: 'public',
module: PublicApiModule,
},
{
path: 'public',
module: PublicUniversityModule,
},
{
path: 'student',
module: StudentModule,
},
{
path: 'counsellor',
module: CounsellorModule,
},
{
path: 'agent',
module: AgentModule,
},
{
path: 'mentor',
module: MentorModule,
},
{
path: 'online-learning',
module: OnlineLearningModule,
},
]),
UniEngineModule,
AdminModule,
StudyModule,
MailModule,
PublicApiModule,
UniversityModule,
HttpModule,
StudentModule,
CounsellorModule,
MentorModule,
AgentModule,
OnlineLearningModule,
//scheduler module
ScheduleModule.forRoot(),
UniChatModule,
],
controllers: [AppController],
providers: [AppService, UniEngineService],
})
export class AppModule implements NestModule {
configure(consumer: MiddlewareConsumer) {
consumer.apply(LoggerMiddleware).forRoutes('*');
}
}
It was running code. I have just run a yarn command. This project is running on other computers with the same Node Version and yarn version. How can I solve the issue?

Angular 12 sub routes 404 loosing context on refresh

I am having problem with angular 12 sub routes. I can navigate to the sub routes just fine but when I refresh the page I lose context. I am running it locally on the localhost:4200
here is the image of what I am getting in network tab and on the screen when I refresh
enter image description here
here is a link for source code: https://github.com/Stanmozolevskiy/Portfolio
Here is routing component:
import { SinglePortfolioComponent } from './portfolio/single-portfolio/single-portfolio.component';
import { HomeComponent } from './home/home.component';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { ContactComponent } from './contact/contact.component';
import { AboutComponent } from './about/about.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'contact', component: ContactComponent},
{path: 'about', component: AboutComponent},
{path: 'about/portfolio', component: AboutComponent},
{path: 'portfolio', component: PortfolioComponent},
{path: 'portfolio/:query', component: SinglePortfolioComponent},
];
#NgModule({
imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})],
exports: [RouterModule]
})
export class AppRoutingModule { }
Here is app module:
import { AngularFireModule } from '#angular/fire';
import { AngularFireFunctionsModule } from '#angular/fire/functions';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { ContactComponent } from './contact/contact.component';
import { ReactiveFormsModule } from '#angular/forms';
import { AboutComponent } from './about/about.component';
import { GetintouchComponent } from './getintouch/getintouch.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { SinglePortfolioComponent } from './portfolio/single-portfolio/single-portfolio.component';
import { HeaderComponent } from './common/header/header.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { AsideComponent } from './common/aside/aside.component';
import { ParagraphComponent } from './common/paragraph/paragraph.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
ContactComponent,
AboutComponent,
GetintouchComponent,
PortfolioComponent,
SinglePortfolioComponent,
HeaderComponent,
AsideComponent,
ParagraphComponent
],
imports: [
AppRoutingModule,
BrowserModule,
FontAwesomeModule,
ReactiveFormsModule ,
AngularFireFunctionsModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I will be happy to try any suggestions, thank you in advance!
Solution to this problem:
Change your webserver configurations to match your location strategy or use HashLocationStrategy as follow: imports: [RouterModule.forRoot(appRoutes, {scrollPositionRestoration: 'enabled', useHash: true})]
And please change all href attributes over your code base to routerLink directive as follow:
<a routerLink="/portfolio" class="btn btn-lg edit_hover_class custom-btn">
<fa-icon [icon]="faBriefcase"></fa-icon> My portfolio
</a>
I assume you're talking about the index.html fallback that doesn't work on the production like it works locally while in development.
You can fix your issue by looking at the docs here https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml.
Just know what is your online server and do the solution specific for it.

I can not directly access an url in Angular

I have a problem with a simple application. I already have it in production, but when I access a URL directly, I get an error:
In firefox:
In chrome:
But if I access localhost:8080, it is redirected to /home correctly:
I am using the following code:
In app.routes.ts
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroeComponent } from './components/heroe/heroe.component';
import { BuscarComponent } from './components/buscar/buscar.component';
const ROUTES: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'heroes', component: HeroesComponent },
{ path: 'heroe/:id', component: HeroeComponent },
{ path: 'buscar/:palabra', component: BuscarComponent },
{ path: '**', pathMatch: 'full', redirectTo: 'home' }
];
export const APP_ROUTING = RouterModule.forRoot(ROUTES);
In app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { APP_ROUTING } from './app.routes';
import { HeroesService } from './servicios/heroes.service';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/shared/navbar/navbar.component';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroeComponent } from './components/heroe/heroe.component';
import { BuscarComponent } from './components/buscar/buscar.component';
import { HeroeTarjetaComponent } from './components/heroe-tarjeta/heroe-tarjeta.component';
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
HomeComponent,
AboutComponent,
HeroesComponent,
HeroeComponent,
BuscarComponent,
HeroeTarjetaComponent
],
imports: [
BrowserModule,
APP_ROUTING
],
providers: [
HeroesService
],
bootstrap: [AppComponent]
})
export class AppModule { }
I try to change { path: '**', pathMatch: 'full', redirectTo: 'home' } to { path: '', pathMatch: 'full', redirectTo: 'home' } or anything and nothing, not solve.
I tried the application with the NodeJS http-server module.

Runtime error when installing the prebuild theme in the ionic app

I have created an ionic app using npm as normally and following the readme.txt file to assign the theme in the app I have generated errors:-
Error-1
C:/Users/cc/Eklavya1/src/app/app.module.ts
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { Camera } from '#ionic-native/camera';
import { MyApp } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { Camera } from '#ionic-native/camera';
import { MyApp } from './app.component';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
var config = {
backButtonText: '',
backButtonIcon: 'ios-arrow-back',
iconMode: 'ios',
mode:'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
pageTransition: 'ios',
};
#NgModule({
declarations: [
MyApp,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp,config),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
providers: [
StatusBar,
SplashScreen,
Camera,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Cannot find module 'ionic2-rating'.
C:/Users/cc/Eklavya1/src/pages/lesson-details/lesson-details.module.ts
import { LessonDetailsPage } from './lesson-details';
import { Ionic2RatingModule } from 'ionic2-rating';
lesson-detail.module.ts-->
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LessonDetailsPage } from './lesson-details';
import { Ionic2RatingModule } from 'ionic2-rating';
#NgModule({
declarations: [
LessonDetailsPage,
],
imports: [
IonicPageModule.forChild(LessonDetailsPage),Ionic2RatingModule
],
})
export class LessonDetailsPageModule {}
C:/Users/cc/Eklavya1/src/pages/lessons/lessons.module.ts
import { LessonsPage } from './lessons';
import { Ionic2RatingModule } from 'ionic2-rating';
#NgModule({
lesson.module.ts-->
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LessonsPage } from './lessons';
import { Ionic2RatingModule } from 'ionic2-rating';
#NgModule({
declarations: [
LessonsPage,
],
imports: [
IonicPageModule.forChild(LessonsPage),Ionic2RatingModule
],
})
export class LessonsPageModule {}
Cannot find module '#ionic-native/camera'.
C:/Users/cc/Eklavya1/src/pages/profile/profile.ts
import { NavController, ActionSheetController } from 'ionic-angular';
import { Camera, CameraOptions } from '#ionic-native/camera';
profile.ts-->
import { Component } from '#angular/core';
import { IonicPage, NavController, ActionSheetController } from 'ionic-angular';
import { Camera, CameraOptions } from '#ionic-native/camera';
#IonicPage()
#Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
name="Adam G Smith";
current_job="Assistant Professor of Science";
email="Adam.g#gmail.com";
address="2 Floor,Building 4";
phone="91234 56789";
code='1';
password="123456789";
jobs="Assistant Professor of Science 2011 \n,Professor of Physics 2009
\n,Assistant Professor of Science 2011 \n,Professor of Physics 2009";
flag=true;
btn_text='Update';
btn_color="color1";
img='assets/img/profile.png';
constructor(public navCtrl: NavController, public actionSheetCtrl: ActionSheetController, public camera: Camera) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ProfilePage');
}
update(){
if(this.flag==false){
this.flag =true;
this.btn_text="Update";
this.btn_color="color1";
}
else{
this.flag =false;
this.btn_text="Save";
this.btn_color="color2";
}
}
// gallery
// ActionSheet for change user picture
selectImage() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Modify your Picture',
buttons: [
{
text: 'Gallery',
handler: () => {this.get_camera(1);}
},{
text: 'Camera',
handler: () => {this.get_camera(2);}
},{
text: 'Cancel',
role: 'cancel',
handler: () => {}
}
]
});
actionSheet.present();
}
get_camera(source) {
const options: CameraOptions = { quality: 100,destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE
,allowEdit:true,targetWidth:512,targetHeight:512,correctOrientation:true}
if(source==1){
options.sourceType= this.camera.PictureSourceType.PHOTOLIBRARY
}
else {
options.sourceType= this.camera.PictureSourceType.CAMERA
}
this.camera.getPicture(options).then((imageData) => {
this.img='data:image/jpeg;base64,' + imageData;
}, (err) => {});
}
}
Apparently you don't have the follwing libraries in node_modules: ionic2-rating & #ionic-native/camera
Install them with following commands:
$ npm install --save ionic2-rating
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save #ionic-native/camera

Angular2 Template parser errors

Env:
Angular2-webpack bolierplate : https://github.com/preboot/angular2-webpack
nodejs 6.3.1 / npm 3.10.3
When I run a karma test an error occurs but It seems works well while server running.
SUMMARY:
✔ 2 tests completed
✖ 1 test failed
FAILED TESTS:
Home Component
✖ should ...
Chrome 55.0.2883 (Mac OS X 10.12.2)
Error: Template parse errors:
'my-searchbar' is not a known element:
1. If 'my-searchbar' is an Angular component, then verify that it is part of this module.
2. If 'my-searchbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("d="go_mypage" href="/mypage"><img src="/img/mypage-thin.png"></a>
<div class="fold" id="wrapper">
[ERROR ->]<my-searchbar></my-searchbar>
<span>Home Works!</span>
</div>"): HomeComponent#2:2
...
I have looked at several stack overflow questions or other websites related with this error but They were not very helpful.
app.module.ts
import { NgModule, ApplicationRef } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { MypageComponent } from './mypage/mypage.component';
import { HomeModule } from './home/home.module';
import { ApiService } from './shared';
import { routing } from './app.routing';
import { removeNgStyles, createNewHosts } from '#angularclass/hmr';
#NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
routing,
HomeModule
],
declarations: [
AppComponent,
MypageComponent
],
providers: [
ApiService
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(public appRef: ApplicationRef) {}
hmrOnInit(store) {
console.log('HMR store', store);
}
hmrOnDestroy(store) {
let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
// recreate elements
store.disposeOldHosts = createNewHosts(cmpLocation);
// remove styles
removeNgStyles();
}
hmrAfterDestroy(store) {
// display new elements
store.disposeOldHosts();
delete store.disposeOldHosts;
}
}
app.component.html
<main>
<router-outlet></router-outlet>
</main>
./home/home.component.html
<a class="route" id="go_mypage" href="/mypage"><img src="/img/mypage-thin.png"></a>
<div class="fold" id="wrapper">
<my-searchbar></my-searchbar>
<span>Home Works!</span>
</div>
./home/home.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
import { SearchbarComponent } from './searchbar.component';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule
],
declarations: [
HomeComponent,
SearchbarComponent
],
exports: [
HomeComponent,
SearchbarComponent
]
})
export class HomeModule { }
--Update--
./home/searchbar.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-searchbar',
templateUrl: './searchbar.component.html',
styleUrls: ['./style/searchbar.component.scss']
})
export class SearchbarComponent {
searchWord: string;
searchTag: string[];
onKey(event: any) {
console.log(event.key);
}
}
home.component.spec.ts
// This shows a different way of testing a component, check about for a simpler one
import { Component } from '#angular/core';
import { TestBed } from '#angular/core/testing';
import { HomeComponent } from './home.component';
describe('Home Component', () => {
const html = '<my-home></my-home>';
beforeEach(() => {
TestBed.configureTestingModule({declarations: [HomeComponent, TestComponent]});
TestBed.overrideComponent(TestComponent, { set: { template: html }});
});
it('should ...', () => {
const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.nativeElement.children[0].textContent).toContain('Home Works!');
});
});
#Component({selector: 'my-test', template: ''})
class TestComponent { }
The error/warning is explanatory, so pretty much what it says there:
You have created a custom element, <my-searchbar></my-searchbar> which is not a known Angular 2 element, and to suppress the warning add it to schemas in NgModule like so:
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

Resources