Here is my requirement
I have two Angular web application App1 & App2. Here in App1 i am creating an token object (it can be a string too).
I want to open by replacing the url from App1 with the URl of App2(No new window should open, it should open the App2 url on same address bar)
Here i have tried the below approach it's not working so far
This code in "App1" by pressing the button i am triggering App2
The Code written in App1
goToNextPage(){
var domain = 'http://localhost:1338/';
// //create popup window
var myPopup = window.open(domain,"_self");
// //periodical message sender
setInterval(function(){
var message = 'current time: ' + (new Date().getTime());
console.log('blog.local: sending message: ' + message);
myPopup.postMessage(message,domain);
//send the message and target URI
},2000);
window.addEventListener('message',function(event) {
if(event.origin !== 'http://localhost:1337/') return;
console.log('received response: ',event.data);
},false);
}
In App2 i am using below code to retrieve the data.
constructor(public cookieService:CookieService){
// //respond to events
window.addEventListener('message',function(event) {
debugger
// //
if(event.origin == 'http://localhost:1337/') return;
console.log('message received: ' + event.data,event);
alert('message received: ' + JSON.stringify(event.data))
// //event.source.postMessage('holla back youngin!',event.origin);
},false);
}
Here in am getting the event.data is undefined
Any idea what could be the solution for this
You can have a server side shared api or pass data on the url with a query string. Things like cookies, session storage and local storage could work if the two apps are running on the same domain.
if you are using Angular 2+ you can use cookies
Step -1 install npm install ngx-cookie-service for both the apps or can install globally
Step 2 .
App1 - > app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CookieService} from 'ngx-cookie-service'
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [CookieService],
bootstrap: [AppComponent]
})
export class AppModule { }
App1 - app.component.ts
import { Component } from '#angular/core';
import {CookieService} from 'ngx-cookie-service'
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-first-project';
constructor(public cookieService:CookieService){
}
goToNextPage(){
this.cookieService.set("my-key","yourkey")
}
}
App2 - app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CookieService} from 'ngx-cookie-service'
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [CookieService],
bootstrap: [AppComponent]
})
export class AppModule { }
App2 - app.component.ts
import { Component } from '#angular/core';
import {CookieService} from 'ngx-cookie-service'
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-second-project';
constructor(public cookieService:CookieService){
alert(this.cookieService.get("my-key"))
}
}
Very simple .. But you can look also other ways like other has mentioned.
Related
Due to the requirements of project I need to send data value dataOne in app.component.ts to its app.module.ts so that I can store it in variable moduleValue. Please refer code below and suggest how can achieve this transfer of data within files.
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'formcheck';
dataOne: any;
getValues(val: any) {
console.warn(val);
this.dataOne = val;
}
}
app.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
let moduleValue: any;
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
}
I'd suggest that you declare a variable or an observable in a service, however, since you mentioned that you need to do this within the same files you might want to export a variable from your component and import it into your module like so:
app.component.ts
export class AppComponent {
title = 'formcheck';
dataOne: any;
getValues(val: any) {
console.warn(val);
this.dataOne = val;
DATA = this.dataOne;
}
}
export var DATA = '';
app.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DATA } from './app.component';
let moduleValue: any;
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
}
Here is the solution using service, I used BehaviorSubject for dynamic updation of value.
https://stackblitz.com/edit/angular-9pitmh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fdata.service.ts,src%2Fapp%2Fhello.component.ts
Full error shows up in the app.component.html file where I try to use the component as follows:
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
The full error is:
But I've done exactly what the guide says, and it's still not working:
I installed the library through the command line command: npm install --save #angular-slider/ngx-slider and it shows up in the package.json as:
I imported it in app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { NgxSliderModule } from '#angular-slider/ngx-slider';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxSliderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I've imported it into app.component.ts:
import { Component } from '#angular/core';
import { Options } from '#angular-slider/ngx-slider';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
value: number = 100;
options: Options = {
floor: 0,
ceil: 200
};
}
And finally added it to app.component.html:
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
So why is it not working?
Versions for reference:
Node version: 14.17.1
NPM version: 6.14.13
Angular & Angular CLI version: 13
I'm practicing angular, but received this error while compiling my code:
Module not found: Error: Can't resolve './app.component.css' in 'D:\hello-world-app\src\app'
i ｢wdm｣: Failed to compile.
My app.component.html
<h1>Angular</h1>
<courses></courses>
My courses.component.ts
// tslint:disable-next-line: import-spacing
import{Component} from '#angular/core';
#Component({
selector: 'courses', //<courses>
template: '<h2>Courses</h2>'
})
export class CoursesComponent {
}
My app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'hello-world-app';
}
My app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { CoursesComponent } from './courses.component';
#NgModule({
declarations: [
AppComponent,
CoursesComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular is failing to find (resolve) the file, just as the error states. In order to fix the error, you need to either add the file, or delete the line styleUrls: ['./app.component.css']
If you do not want to avoid the file reference and are using angular cli (if you're not, you probably should be), you can use --inlineStyle=true when generating a component. Granted, if you're using angular cli, the css file should have been created when the component was generated.
Odds are either you copy pasted some stuff, or mistakenly deleted that file. Either way, Angular will always complain when it can't find something you're referencing. (Much like pretty much every other programming framework/system/language)
I have created a simple service using angular4
Here's the code:
//app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { MyserviceService } from './myservice.service';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
//the service
import { Injectable } from '#angular/core';
#Injectable()
export class MyserviceService {
constructor() { }
cars = ['fiat', 'form'];
myData() {
return 'Hello from service!';
}
}
//app.component.ts
import { Component, OnInit } from '#angular/core';
import { MyserviceService } from './myservice.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(private myservice: MyserviceService) {}
ngOnInit() {
console.log(this.myservice.cars);
this.something = this.myData();
}
}
I am having 2 problems here:
No console message
myData is not recognized 'myData does not exists in app.component'
What I'm I doing wrong here?
You are accessing myData() method on app.component, it is not a member of app component. you have to access myData() with myservice, like this
ngOnInit() {
console.log(this.myservice.cars);
this.something = this.myservice.myData();
}
and Everything else looks fine to me.
I've just installed a fresh install of Angular 2. But when I try to inject a service called TestService into a login component like this:
LoginComponent:
import {Component, Inject} from '#angular/core';
#Component({
selector: 'app-login',
template: `
{{ test.test }}
`,
styles: []
})
export class LoginComponent {
constructor(#Inject('test') private test){};
}
App
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import {TestService} from "./test.service";
#NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [{provide: 'test', useClass:TestService}],
bootstrap: [AppComponent]
})
export class AppModule { }
TestService
import { Injectable } from '#angular/core';
#Injectable()
export class TestService {
test = 'test';
constructor() { }
}
I receive an error:
error_handler.js:47EXCEPTION: Error in ./AppComponent class AppComponent - inline template:1:25 caused by: Cannot read property 'name' of undefined
What am I doing wrong?
On view you should be using Elvis Operator. Just to make sure test property will ask on test. Currently when initial change detection occurs test.test tries to evaluate binding on view. Since initially test is undefined test.test fails.
{{ test?.test }}