I am using Angular 14 framework and the ngx-masonry library (https://www.npmjs.com/package/ngx-masonry/v/14.0.1), but I am experiencing issues with it not working properly. Could anyone provide assistance or advice on how to resolve this issue? Any help would be greatly appreciated.
The output of this code is a blank screen.
app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { BrowserModule} from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { NgxMasonryModule } from 'ngx-masonry';
import { AppComponent } from './app.component';
import { TitleComponent } from './title/title.component';
import { CdkScrollingComponent } from './cdk-scrolling/cdk-scrolling.component';
#NgModule({
declarations: [
AppComponent,
TitleComponent,
CdkScrollingComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NgxMasonryModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
cdk-scrolling.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-cdk-scrolling',
styleUrls: ['cdk-scrolling.component.css'],
templateUrl: 'cdk-scrolling.component.html',
})
export class CdkScrollingComponent{
masonryItems = [
{ title: '/assets/memes/meme1.jpg' },
{ title: '/assets/memes/meme2.jpg' },
{ title: '/assets/memes/meme3.jpg' },
{ title: '/assets/memes/meme4.jpg' },
{ title: '/assets/memes/meme5.jpg' },
{ title: '/assets/memes/meme6.jpg' },
{ title: '/assets/memes/meme7.jpg' },
{ title: '/assets/memes/meme8.jpg' },
{ title: '/assets/memes/meme9.jpg' },
{ title: '/assets/memes/meme10.jpg' },
{ title: '/assets/memes/meme11.jpg' },
{ title: '/assets/memes/meme12.jpg' },
{ title: '/assets/memes/meme13.jpg' },
{ title: '/assets/memes/meme14.jpg' },
{ title: '/assets/memes/meme15.jpg' },
];
constructor() {}
}
cdk-scrolling.component.html
<ngx-masonry>
<div ngxMasonryItem class="masonry-item" *ngFor="let item of masonryItems">
{{item.title}}
</div>
</ngx-masonry>
cdk-scrolling.component.css
.masonry-item {
width: 100%;
padding: 10px;
}
It seems that you might have a problem with the path of the images.
In your code, you are providing the path of the images as '/assets/memes/meme1.jpg', '/assets/memes/meme2.jpg', etc.
It seems like these images are located in the assets folder under the project root directory.
In that case, you need to make sure that the path of the images is correct and that the images are indeed present in that location.
Another possible issue could be that the images are not loading due to a problem with the CORS (Cross-Origin Resource Sharing) policy. The browser may block the images from loading if it detects that they are coming from a different origin than the one the app is being served from. You can check the browser's developer console for any error messages related to CORS.
You can also try to use the ng serve --prod command to see if the problem persists and if the problem is with the development server or not.
Also, you can try to change the path of the images to use relative path instead of absolute path like
{ title: 'assets/memes/meme1.jpg' }
It will help you to understand the problem is with the path of the images or anything else.
Related
I am using the following code in visual studio. Here is the routing part when I click to FAQ component through page component and perform according in FAQ component backs to page component.
Here is routing part
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { PageComponent } from './components/page/page.component';
import { FaqComponent } from './Folder/faq/faq.component';
import { HomeComponent } from './Folder/home/home.component';
const routes: Routes = [
{path: 'login', component: HomeComponent },
{path: 'data', component: FaqComponent },
{ path: '', component: PageComponent },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
FaqComponent=>PageComponent
data => /
<a routerLink="/">xxx</a>
I have a project on angular 9. where i want execute Three components in my homepage named header, body, and footer. and i have other two componets login and signup. These are working fine but homepage components are not working. Only header component is loading, others are not. I have found similar questions but they are not solving my problem
what i have tried
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './component/login/login.component';
import { SignupComponent } from './component/signup/signup.component';
import { HeaderComponent } from './component/header/header.component';
import { BodyComponent } from './component/body/body.component';
import { FooterComponent } from './component/footer/footer.component';
const routes: Routes = [
{
path: '' , redirectTo: 'header,body,footer', pathMatch: 'full'
},
{
path: 'header', component:HeaderComponent
},
{
path: 'body' , component:BodyComponent
},
{
path: 'footer', component:FooterComponent
},
{
path: 'login', component:LoginComponent
},
{
path: 'signup' , component:SignupComponent
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<router-outlet></router-outlet>
Thankyou
you need to create one common component called home component and include header,body,footer into that
home.component.html
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
route
{
path: 'home', component:HomeComponent
},
{
path: '' , redirectTo: 'home', pathMatch: 'full'
},
I have an issue with routing in my app. In my local all works right but not on the server. The program has the following routes:
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'thankyou', component: ThankyouComponent },
{ path: 'home', component: UserHomeComponent, canActivate: [AuthGuard] },
{ path: 'publish', component: PublishComponent, canActivate: [AuthGuard] },
{ path: '**', component: PageNotFoundComponent }
];
The root route always works.
If on my computer I send request directly, for example, the route:
http://localhost:4200/publish
Assuming that I have logged in there are no problems loading it. But if execute that route in server with the route:
http://myserver/mypath/dist/publish
It doesn't find the route.
I modified index.html as well, to execute on server.
<base href="/"> by <base href="/mypath/dist/">
If I execute that route by the template html using directive
routerLink="/publish"
It works fine.
Does anyone know why this happens?
Your webserver needs to be configured to reroute requests to your index.html, excluding assets.
For nginx, add this inside your server block of your nginx.conf or your site config:
location / {
try_files $uri $uri/ /path/to/index.html;
}
For apache, check this answer.
Here is an example of a file that creates a routing structure for the routes to hit when they are put into the url. So far I have not seen anything in your question that suggests you are actually handling routes from outside your app. In other words, how does some url from your server know where to go if you haven't defined a route that would be typed in as a url? Seems you don't have a root path. That's what I've been driving at.
import { Routes, RouterModule } from '#angular/router';
import { SomeComponent } from 'app/components/some-component';
import { Path1Component } from 'app/components/path1-component';
import { Path2Component } from 'app/components/path2-component';
import { Path3Component } from 'app/components/path3-component';
const MyRoutes: Routes = [
{
path: 'root/',
component: SomeComponent,
children: [
{
path: 'path1',
component: Path1Component
},
{
path: 'path2',
component: Path2Component
},
{
path: 'path3',
component: Path3Component
},
{
path: '**', // default path
component: Path2Component
}
],
}
];
#NgModule({
imports: [
RouterModule.forChild(MyRoutes)
],
exports: [
RouterModule
]
})
export class MyRouting { }
I have found the solution in this site https://github.com/angular/angular/issues/11884
but I don't have full access to server. I have switched in root module to HashLocationStrategy as the angular guide says here https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles
and it works!
I'm having some issues while navigating between pages with Ionic2.
I have a List of Data, that I got from a data.json
Here is the list
I want to get details:
Example - From "A"
The data that I have on my data/Example.Json
{
"title": "A",
"lat": 2.323733,
"lon": 64,546465
},
So as soon as I click on the Title, I want to get the title, lat and lon on a new page.
app.modules.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MapPage } from '../pages/map/map';
import { ListPage } from '../pages/list/list';
import { DetailPage } from '../pages/detail/detail';
import { Locations } from '../providers/locations';
import { GoogleMaps } from '../providers/google-maps';
import { Connectivity } from '../providers/connectivity';
declare var google: any;
#NgModule({
declarations: [
MyApp,
HomePage,
MapPage,
ListPage,
DetailPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
MapPage,
ListPage,
DetailPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Locations,GoogleMaps, Connectivity]
})
export class AppModule {}
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MapPage } from '../pages/map/map';
import { ListPage } from '../pages/list/list';
import { DetailPage } from '../pages/detail/detail';
import { Locations } from '../providers/locations';
import { GoogleMaps } from '../providers/google-maps';
import { Connectivity } from '../providers/connectivity';
declare var google: any;
#NgModule({
declarations: [
MyApp,
HomePage,
MapPage,
ListPage,
DetailPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
MapPage,
ListPage,
DetailPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Locations,GoogleMaps, Connectivity]
})
export class AppModule {}
PageA.ts ( list of Data )
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Locations } from '../../providers/locations';
import { DetailPage } from '../detail/detail';
#Component({
selector: 'page-list',
templateUrl: 'list.html'
})
export class ListPage {
constructor(public navCtrl: NavController, public locations: Locations) {
}
ionViewDidLoad() {
console.log('Test Si marche');
}
viewLocation(event,location) {
this.navCtrl.push(DetailPage, {
"title":location.title,
"longitude":location.longitude
})
}
}
Page B ( where i want to get the detail as soon as i click on something on the list )
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {NavParams} from "ionic-angular";
import { Locations} from '../../providers/locations';
import { ListPage } from '../list/list';
#Component({
selector: 'page-detail',
templateUrl: 'detail.html',
providers: [ Locations ],
entryComponents:[ ListPage ]
})
export class DetailPage {
title: string
latitude: string
navParams: NavParams
constructor(navParams: NavParams,public navCtrl: NavController) {
this.navParams = navParams
this.title = this.navParams.get('title');
this.latitude = this.navParams.get('latitude');
}
ionViewDidLoad(err) {
console.log(err);
}
goBack() {
this.navCtrl.pop();
}
}
listA.html
<ion-header>
<ion-navbar color="secondary">
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list no-lines>
<ion-item *ngFor="let location of locations.data">
<ion-item (click)="viewLocation($event, locations)">{{locations.title}}</ion-item>
<ion-avatar item-left>
<ion-icon name="pin"></ion-icon>
</ion-avatar>
<!--<img src="./src/pics/mus.png"/>-->
<h2>{{location.title}}</h2>
<p>{{location.distance*1.609}} Km</p>
</ion-item>
</ion-list>
</ion-content>
data.json
[
{ "title": "Cat", "longitude": "14,57" },
{ "title": "Bird", "longitude": "17.45" },
{ "title": "Spider", "longitude": "19,12" }
]
If you want to pass data from one page to another, you can either
1) Store your JSON data in SQL format via JSON.stringify(store) and JSON.parse(retrieving) method.
Meaning you stringify the data, before storing inside the SQL table and once retrieved from the next page, you do a JSON.parse to get back your JSON object.
You may want to read up on the following article on how to store data in SQL.
SQL Ionic 2
JSON Parse
JSON Stringify
Or either which, 2) you can make use of navController to "push" data from one page to another. One downside would be if your JSON data is huge, you will have to slowly iterate through.
A simple example would be:
this.navController.push(ThePageNameYouWannaGo, {
firstPassed: "firstData",
secondPassed: "secondData",
thirdPassed: "thirdData",
});
//On the next page (at your constructor),
Constructor(....,NavParams,.....){
this.first = navParams.get("firstPassed");
this.second= navParams.get("secondPassed");
this.third= navParams.get("thirdPassed");
//the value would be stored inside this.first, this.second respectively
For your case, I would recommend method 1 as I have no clue how big is your JSON file and to make your life easier in the future when your JSON file changes.
We intergrated angular2-google-maps in our project. The project is built angularjs 2 release version and using webapi.
app.module.ts
import { LazyMapsAPILoaderConfig, AgmCoreModule } from 'angular2-google-maps/core';
import { appConfig,IAppConfig,GoogleMapApiKey } from "./app.config";
#NgModule({
imports: [
AgmCoreModule.forRoot({
apiKey: ""
})
],
declarations: [
AppComponent
],
providers: [
{ provide: LazyMapsAPILoaderConfig, useValue: GoogleMapApiKey }
],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.config.ts
import { OpaqueToken } from "#angular/core";
export let appConfig = new OpaqueToken('app.config');
export interface IAppConfig {
apiKey: string
}
export const GoogleMapApiKey : IAppConfig = {
apiKey: "Key"
};
I hardcoded the google map api key in the typescript file. Is it possible to read it from .net web.config file.
Also is this correct way of displaying the map or can i make it part of component.
Any suggestions.