I've created a new aurelia project with webpack and I want to use my custom nprogress component
import { bindable, noView } from 'aurelia-framework';
import * as nprogress from 'nprogress';
#noView(['nprogress/nprogress.css'])
export class LoadingIndicator {
#bindable public loading = false;
private loadingChanged(newValue): void {
if (newValue) {
nprogress.start();
} else {
nprogress.done();
}
}
}
I get the following error at runtime: Failed loading required CSS file: nprogress/nprogress.css
webpack is not using aurelia.json.
just change it as follow:
import * as nprogress from 'nprogress';
import { bindable, noView } from 'aurelia-framework';
import 'nprogress/nprogress.css';
#noView()
export class LoadingIndicator {
#bindable loading = false;
loadingChanged(newValue) {
if (newValue) {
nprogress.start();
} else {
nprogress.done();
}
}
}
or change your css loader in webpack.config.js. More info here https://github.com/aurelia/webpack-plugin/issues/120
You should have a file called aurelia_project/aurelia.json if you generated your project via Aurelia CLI. In that file, there is a block build.bundles.dependencies. You need to add the following to the block:
"dependencies": [
...,
{
"name": "nprogress",
"path": "../node_modules/nprogress",
"main": "nprogress",
"resources": [
"nprogress.css"
]
}
]
Related
I'm developing some tests for single file components in VueJs. These components use font-awesome.
This is my App, as you can see I have fontawesome available for all child components.
import { createApp } from 'vue';
import App from './App.vue';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import { fas } from "#fortawesome/free-solid-svg-icons";
import { library } from '#fortawesome/fontawesome-svg-core';
library.add(fas);
createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app');
Here's a test
import { mount } from '#vue/test-utils'
import ListComponent from '#/components/ListComponent.vue'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
let someData = [{
name: 'Some person name',
key: '2222222',
moreInfo: [
{title: 'aa'},
{title: 'bb'},
]
},
{
name: 'Some other person name',
key: '12321123,
moreInfo: [
{title: 'cc'},
{title: 'x'},
]
},
}];
let wrapper = mount(ListComponent, {
propsData: {
someData
},
stubs: {
'font-awesome-icon': FontAwesomeIcon
}
});
describe('ListadoImputados.vue', () => {.... tests ....});
Test details are not important, I don't know how to add / include font-awesome-icon in the context so i can avoid getting the following warnings
console.warn node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:40
[Vue warn]: Failed to resolve component: font-awesome-icon
I tried adding this dependency as a mock and stub but no luck. Also importing Fontawesome at the top of the file does not work, the warning is still showing. I was thinking maybe in creating a vue app in the test file and inject the component like this
createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app');
but I'm copying and pasting code and I'm not sure this is the right way.
Is there a way to add this dependencies to my test context?
I'm using Vue 3, vue-test-utils + jest
In Vue Test Utils v2 (for Vue 3), the stubs mounting option is moved into global.stubs. Also note that a stub does nothing by definition, so stubbing the component only requires providing the component name.
Your mounting options should look like this:
const wrapper = mount(ListComponent, {
global: {
stubs: ['FontAwesomeIcon']
}
})
If for some reason you need the actual component, you could technically provide the component definition as a "stub", but you'd also need to initialize the icons for it as you would in the app's startup:
// assume only `faUserSecret` icon used in `ListComponent`
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faUserSecret)
//...
const wrapper = mount(ListComponent, {
global: {
stubs: { FontAwesomeIcon }
}
})
I am using ngx-toastr in angular 6 for http error notification, as injected ToastrService in httpInterceptor
export class MyInterceptor implements HttpInterceptor {
constructor(public toasterService: ToastrService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request)
.pipe(
tap((evt: any) => {
if (evt instanceof HttpResponse) {
if (evt.body)
this.toasterService.success('success', '!!', { positionClass: 'toast-bottom-center' });
//alert(`success`);
}
}),
catchError((err: any) => {
if (err instanceof HttpErrorResponse) {
try {
this.toasterService.error(err.error.message, err.error.title, { positionClass: 'toast-bottom-center' });
} catch (e) {
this.toasterService.error('An error occurred', '', { positionClass: 'toast-bottom-center' });
}
//log error
}
return of(err);
})
)
}
}
and imported ToastrModule in app.module.ts like
imports:[
ToastrModule.forRoot()
]
I am getting below error, any idea whats going wrong here..............
ngx-toastr.js?4996:264 Uncaught TypeError: Object(...) is not a
function
at eval (ngx-toastr.js?4996:264) .................................
I found the actual issue regarding this. It's happening because of the mismatch of the version of an angular and the package. To overcome this problem perform the following steps
STEP1: Check for angular CLI version: ng --version
Now check this image
If your angular version is 7.3.10 then you need to install 10.1.0 version of ngx-toastr
STEP2: Install a specific version of ngx-toastr according to your angular CLI version: npm i ngx-toastr#10.1.0 --save
STEP3: import it into app.module.ts
app.module.ts
import { CommonModule } from '#angular/common';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
#NgModule({
imports: [
CommonModule,
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot() // ToastrModule added
],
bootstrap: [App],
declarations: [App]
})
export class AppModule {}
STEP4: add css path in styles array in angular.json file
angular.json
"styles": [
"node_modules/font-awesome/css/font-awesome.css",
"src/styles/app.scss",
"node_modules/sweetalert2/dist/sweetalert2.min.css",
"node_modules/ngx-toastr/toastr.css"
]
Don't forget to restart your server after making changes in angular.json file
STEP5: make helper service to show toasters
helper.service.ts
import { Injectable } from '#angular/core';
import { ToastrService } from 'ngx-toastr';
#Injectable({
providedIn: 'root'
})
export class HelperService {
constructor(private toastr: ToastrService) { };
showSuccessToast(msg) {
this.toastr.success(msg);
}
showErrorToast(msg) {
this.toastr.error(msg);
}
showInfoToast(msg) {
this.toastr.info(msg);
}
}
STEP6: Now you are done you just need to use these functions in your component.ts file
user.component.ts
import { Component, OnInit } from '#angular/core';
import { routerTransition } from '../../router.animations';
import { UserService } from './user.service';
import { HelperService } from 'src/app/helpers/helper.service';
#Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss'],
animations: [routerTransition()]
})
export class UserComponent implements OnInit {
constructor(
private userService: UserService,
private helperService: HelperService,
) {
}
ngOnInit() {
this.getUsers();
}
async getUsers() {
try {
const res: any = await this.userService.getUsers();
this.helperService.showSuccessToast(res.message);
} catch (err) {
this.helperService.showErrorToast(err.error || 'Something went wrong');
}
}
}
I am developing nativescript-angular app that contains dataform in a module and calling this module using in lazy loading technique. Life is beautiful in Android, but the application exits immediately when I open this module in ios wihtout any error log!
The code is very simple and forward, I can't see where is the problem!
test.component.ts
import { Component, OnInit } from "#angular/core";
import { ActivatedRoute } from "#angular/router";
import { RadDataForm, DataFormEventData } from "nativescript-ui-dataform";
import { UserAddress } from "../../shared/data-services/address";
#Component({
selector: "test",
moduleId: module.id,
templateUrl: "./test.component.html",
styleUrls:["./test.component.css"]
})
export class TestComponent implements OnInit {
private _userAddress: UserAddress;
constructor() {
}
ngOnInit() {
this._userAddress = new UserAddress();
}
get userAddress(): UserAddress {
return this._userAddress;
}
}
test.component.html
<ActionBar class="action-bar">
<NavigationButton [nsRouterLink]="['../../home']" android.systemIcon="ic_menu_back"></NavigationButton>
<Label class="action-bar-title" text="Test"></Label>
</ActionBar>
<ScrollView tkExampleTitle tkToggleNavButton>
<StackLayout>
<RadDataForm tkExampleTitle tkToggleNavButton [source]="userAddress">
</RadDataForm>
</StackLayout>
</ScrollView>
Routing of this module
signup-routing.module.ts
import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { ItemsComponent } from "./test/test.component";
export const COMPONENTS = [ItemsComponent ];
const routes: Routes = [
{ path: "", redirectTo: "testInfo" },
{ path: "testInfo", component: testComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forChild(routes)], // set the lazy loaded routes using forChild
exports: [NativeScriptRouterModule]
})
export class SignupRoutingModule {}
Then we have
signup.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { COMPONENTS, SignupRoutingModule } from "./signup-routing.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
#NgModule({
imports: [
NativeScriptCommonModule, // for rednering actionbar with lazy laoding
NativeScriptFormsModule,
SignupRoutingModule,
NativeScriptUIDataFormModule
],
declarations: [
...COMPONENTS
],
// providers: [SignupService],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class SignupModule { }
And the module is called using lazy loading in the basic routing file like this:
{ path: "signup", loadChildren: "~/app/signup/signup.module#SignupModule", outlet: "homeTab" }
Help is appreciated!
CODE ON GitHub
https://github.com/lighttiger/lazy
How do you do state management in angular 5 ? Between Redux and Behavior Subject which approach is better to follow and why.
Thanks.
Angular Service Layers: Redux, RxJs and Ngrx Store - When to Use a Store And Why?
ngrx sample example
Install the below packages:
npm install #ngrx/store --save
npm install #ngrx/effects --save
app.module.ts
import { appReducer } from './state/app.reducer';
import { StoreModule } from '#ngrx/store';
#NgModule({
declarations: [
...
],
imports: [
...
StoreModule.forRoot(appReducer)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Store } from '#ngrx/store';
import { AppState } from './state/app.state';
import { SetAppTitleAction, getAppTitle } from './state/app-title';
import { Observable } from 'rxjs';
#Component({
selector: 'app-root',
template:
`<h1>{{appTitle$ | async}}</h1>
`
})
export class AppComponent implements OnInit {
appTitle$: Observable<string>;
constructor(private store: Store<AppState>) {
this.appTitle$ = this.store.select(getAppTitle);
}
ngOnInit(): void {
this.store.dispatch(new SetAppTitleAction('Location: AppComponent'));
}
}
app-title.action.ts
import { Action } from '#ngrx/store';
export const SetAppTitle = 'Set App Title';
export class SetAppTitleAction implements Action {
readonly type = SetAppTitle;
constructor(public payload: string) {}
}
export type AppTitleActions = SetAppTitleAction;
app-title.reducer.ts
import { AppTitleActions, SetAppTitle } from './app-title.actions';
export function appTitleReducer(state: string, action: AppTitleActions) {
switch (action.type) {
case SetAppTitle:
return action.payload;
default: return state;
}
}
index.ts
export * from './app-title.actions';
import { AppState } from './app.state';
export const getState = (state: AppState) => state;
export const getAppTitle = createSelector(getState, state => state.appTitle);
app.reducer.ts
import { ActionReducerMap } from '#ngrx/store';
import { AppState } from './app.state';
import { appTitleReducer } from './app-title/app-title.reducer';
import { versionInfoReducer } from './version-info/version-info.reducer';
export const appReducer: ActionReducerMap<AppState> = {
appTitle: appTitleReducer
};
export interface AppState {
appTitle: string;
}
I created a custom pipe module and imported it in my custom module,but it's not working
limit.pipe
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'limitTo'
})
export class RcycLimitPipe implements PipeTransform {
transform(value: any, args?: any): any {
let limit = args ? parseInt(args, 10) : 10;
let trail = '...';
return value.length > limit ? value.substring(0, limit) + trail : value;
}
}
limit.pipe.module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RcycLimitPipe } from './rcyc-limit.pipe';
#NgModule({
imports: [
CommonModule
],
declarations: [
RcycLimitPipe
],
exports: [
RcycLimitPipe
]
})
export class RcycLimitPipeModule { }
then I imported it in my custom modules.
import { NgModule } from '#angular/core';
import { ChannelsComponent } from './rcyc-channels.component';
import { routing } from './rcyc-channels.routing';
import { CommonModule } from '#angular/common';
import { NgxCarouselModule } from "ngx-carousel";
import { RcycChannelsService } from "./rcyc-channels.service";
import { RcycLimitPipeModule } from "../../rcyc-pipes/rcyc-limit/rcyc-limit.module";
import { RcycDefaultImagePipeModule } from '../../rcyc-pipes/rcyc-default-image/rcyc-default-image.module';
#NgModule({
imports: [routing,CommonModule,NgxCarouselModule,RcycLimitPipeModule,RcycDefaultImagePipeModule],
declarations: [ChannelsComponent],
providers: [RcycChannelsService]
})
export class ChannelsModule {}
but it still showing an error by telling that 'the limit and the 'defaultimage' could not be found.
this is my error
what the issue is here?please help me
Do you really need a separate module for your pipe? After all, you are really just importing NgModule, CommonModule (which you also import in your main module) and RcycLimitPipe.
You could simply remove limit.pipe.module altogether, import RcycLimitPipe in your main module and add it to its declarations.