I just try to create a project in mean stack2.
But, I got a error message 'Cannot GET/User' while refresh the browser as follow.
How can I fix it?
Just add the following code inside #NgModule decorator in app.module.ts class.
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
import locationStategry and HashLocationStatregry from #angular/common
import { LocationStrategy, HashLocationStrategy } from "#angular/common"
Related
I'm simply trying to import the https://shoelace.style/ library for use within an Angular app.
I've tried both their recommended method of adding style and link elements into the index file, and I've also tried adding their NPM package and then adding the following to my angular.json
"styles": [
"src/styles.scss",
"node_modules/#shoelace-style/shoelace/dist/themes/base.css"
],
"scripts": [
"node_modules/#shoelace-style/shoelace/dist/shoelace.js"
],
However no matter what I do, whenever I try to use a particular Shoelace component such as <sl-button> I get 'sl-button' is not a known element
What do I need to do to get this working?
Try adding this to your app module
schemas: [CUSTOM_ELEMENTS_SCHEMA]
Just make sure to apply the custom elements schema as shown below.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
You can find more about CUSTOM_ELEMENTS_SCHEMA here
I am using the Ionic image Loader plugin to cache and load images within my app
https://github.com/zyra/ionic-image-loader
<img-loader [src]="user?.picture" useImg></img-loader>
This works fine when the image is not from my firebase storage, however when it is the download URL provided by firebase storage - it fails to loads and gives me a useless error on the xcode console.
ERROR: ERROR [object Object]
This problem is limited to the app running on the physical IOS device, but on chrome, it is absolutely fine.
MODULE.TS FILE
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { EditSkillPage } from './edit-skill';
import { IonicImageLoader } from 'ionic-image-loader';
#NgModule({
declarations: [
EditSkillPage,
],
imports: [
IonicPageModule.forChild(EditSkillPage),
IonicImageLoader,
],
})
export class EditSkillPageModule {}
It works for me (With firebase storage):
<img-loader src={{data.dataImgURL}} useImg></img-loader>
The doc is pretty clear.
So I am creating ASP.NET MVC application with angular. For my app I need service worker, so I found that angular has it's own (https://www.npmjs.com/package/#angular/service-worker). So I installed and found that I need to register it in order to work. I took example from github (https://github.com/webmaxru/pwatter/tree/ngsw/src/app). As I try to register and run everything I always getting this error :
I've read that I need to use HTTPS and/or production mode instead of development, so I tried various combinations and nothing worked... Could someone please explain me what I am doing wrong?
This is my app.module.ts (without imports):
#NgModule({
// directives, components, and pipes
declarations: [
AppComponent
],
// modules
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule,
AppRouting,
ImageUploadModule.forRoot(),
NgbModule.forRoot(),
InfiniteScrollModule,
NouisliderModule,
ChartsModule,
NgxPaginationModule,
ServiceWorkerModule.register("\ngsw-worker.js")
],
// providers
providers: [
PushService,
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
I'm trying to display a simple leaflet-map by using the yaga component (npm yaga-module). Therefore I generated a new project with angular cli and followed the introduction on the npm page. In the end, I got a broken map.
Image of the broken map.
I already implemented a working map with the leaflet library + JS and even with yaga in the ionic framework. In both cases I get the same broken map, if I remove the link to the leaflet.css. But where do I have to link the css file? If I insert the path in my .angular-cli.json, it seems to be loaded successfully. But then my map disappears completely.
Did I make a mistake? You can find my code below:
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { YagaModule } from '#yaga/leaflet-ng2';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
YagaModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Test';
}
app.component.html:
<h1>{{title}}</h1>
<yaga-map [zoom]="2">
<yaga-tile-layer [url]="'http://a.tile.osm.org/{z}/{x}/{y}.png'"></yaga-tile-layer>
</yaga-map>
My app.component.css file is empty. Any ideas what's going wrong?
In your styles.css add the following line of code
#import '../node_modules/leaflet/dist/leaflet.css'
This question was discussed in the YAGA leaflet-ng2 github repository. We think that the leaflet.css was missing or that there wasn't set a height on the map. Without setting the height the map has a height of 0px, so that it seems like the map disappeared. Have a look on issue 286 in the leaflet-ng2 github repository. If you still have the problem, please write us on github.
In Ionic2 you have to add the leaflet.css in your app.scss like that:
#import "node_modules/leaflet/dist/leaflet";
I'm having a problem using RxJS with Angular 2. Most of methods suggested from Typescript definition file are not defined on my Observable object like...
then I figured out, that methods does not exists on the Observable prototype.
I know a lot of things changed from version 4 to 5,so do I miss something?
Browserify added it for me...
Without seeing your actual code, I can't tell you exactly what to add to fix it.
But the general problem is this: RxJS 5 is not included with Angular 2 any longer now that it has entered the Beta stage. You will need to import either the operator(s) you want, or import them all. The import statements looks like this:
import 'rxjs/add/operator/map'; // imports just map
import 'rxjs/add/operator/mergeMap'; // just mergeMap
import 'rxjs/add/operator/switchMap'; // just switchMap
import {delay} from 'rxjs/operator/delay'; // just delay
or like
import 'rxjs/Rx'; // import everything
To determine the path to your desired module, look at the source tree. Every import with add will add properties to Observable or Observable.prototype. Without add, you'd need to do import {foo} from 'rxjs/path/to/foo'.
You will also need to make sure that RxJS is being brought into the project correctly. Something like this would go into your index.html file:
System.config({
map: {
'rxjs': 'node_modules/rxjs' // this tells the app where to find the above import statement code
},
packages: {
'app': {defaultExtension: 'js'}, // if your app in the `app` folder
'rxjs': {defaultExtension: 'js'}
}
});
System.import('app/app'); // main file is `app/app.ts`
If you use Webpack to build the Angular 2 app like in this Github project (like I did), then you don't need that System stuff and the imports should do it.
Yes, in Angular 2.0 you have to include the operators/observables you need.
I do it like this:
import 'rxjs/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';
import 'rxjs/observable/interval';
import 'rxjs/observable/forkJoin';
import 'rxjs/observable/fromEvent';
However, you also need to configure this in System.js
System.config({
defaultJSExtensions: true,
paths: {
'rxjs/observable/*' : './node_modules/rxjs/add/observable/*.js',
'rxjs/operator/*' : './node_modules/rxjs/add/operator/*.js',
'rxjs/*' : './node_modules/rxjs/*.js'
}
});
Here is working code: https://github.com/thelgevold/angular-2-samples
I have a JSPM setup in my project, so adding rxjs to the path section was not enough.
jspm added the following to my SystemJS configuration (map section):
"npm:angular2#2.0.0-beta.6": {
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"es6-promise": "npm:es6-promise#3.1.2",
"es6-shim": "npm:es6-shim#0.33.13",
"process": "github:jspm/nodelibs-process#0.1.2",
"reflect-metadata": "npm:reflect-metadata#0.1.2",
"rxjs": "npm:rxjs#5.0.0-beta.0",
"zone.js": "npm:zone.js#0.5.14"
},
So if you use jspm make sure you remove the rxjs mapping above, otherwise some rxjs files will be loaded twice, once via jspm_packages and once via node_modules.