I'm trying to use the ng2-translate package with Webpack. In development mode it all works fine.
When i'm starting a build, it doesn't copy the language files to the "dist" directory.
Can anyone give me some advices how to change the output path, I tried to follow up https://github.com/ocombe/ng2-translate instructions but I doesnt provide any working example for webpack in production, and its not very clear how to use TranslateStaticLoader and change 18n/*.json.
If I add this I get an error with the libraries
#NgModule({
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
deps: [Http]
})
],
bootstrap: [AppComponent]
})
This is my app.module.ts
import {BrowserModule} from "#angular/platform-browser";
import { NgModule } from '#angular/core';
import {HttpModule} from '#angular/http';
import { AppComponent } from './app.component';
import {TranslateModule} from 'ng2-translate';
#NgModule({
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot()
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
My app.component.ts
import { Component } from '#angular/core';
import {TranslateService} from 'ng2-translate';
import '../../public/css/styles.css';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
param: string = "world";
constructor(translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
}
}
My app.component.html
<div>{{ 'HELLO' | translate:{value: param} }}</div>
and my json
{
"HELLO": "hello {{value}}"
}
Thanks for your help.
What errors do you have ? I'm using it in development mode and it's working perfectly.
Related
in my code two components are present.
1)app component
2)login component
after login it is going to another page.but on refresh it comes to login page.please solve this issue.i am using angular6.please provide code how to solve this problem.
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 { PloginComponent } from './plogin/plogin.component';
import { AfterploginComponent } from './afterplogin/afterplogin.component';
import { RouterModule } from '#angular/router';
import { ReactiveFormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
AppComponent,
PloginComponent,
AfterploginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule.forRoot([
{
path : 'after-login',
component : AfterploginComponent
},
{
path : 'before-login',
component : PloginComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
-------------------------------------------------
import { Component ,OnInit} from '#angular/core';
import { Router} from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'login';
constructor(private router :Router){
}
ngOnInit(){
this.router.navigateByUrl('before-login');
}
}
i am beginer to angular6.on refresh how to stay on same page i don't know.
plese tell me the different approaches to solve the problem easily.
In angular 7, I'm facing following issue, where I need to inject my MenuWidgetComponent in home component, I have imported it in widget component and exported in via index.ts. But still I'm getting,
I googled it but, could not found any solution. Did I miss something in my code?
Angular 7 : ERROR Error: Uncaught (in promise): Error:
StaticInjectorError(AppModule)[MenuWidgetComponent -> TripsMenu]:
Above error, Please help.
Folder Structrue:
ApplicationWorkspace >
1. GlobalApp >
- App >
- app.module
- home Component
2. Libs >
- widget >
src >
- MenuWidgetComponent
- widget module
index.ts
index.ts
export * from './lib/widgets.module';
export * from './lib/menu-widget/menu-widget.component';
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { NxModule } from '#nrwl/nx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { WidgetsModule } from '#gp-angular-workspace/widgets';
#NgModule({
declarations: [AppComponent, HomeComponent],
imports: [
BrowserModule,
NgbModule.forRoot(),
NxModule.forRoot(),
AppRoutingModule,
WidgetsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Home.html
<div class="home" background="assets/images">
<pfj-menu-widget></pfj-menu-widget>
</div>
widget.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { WidgetWrapperComponent } from './widget-wrapper/widget-wrapper.component';
#NgModule({
imports: [CommonModule],
declarations: [MenuWidgetComponent],
exports: [ModalWidgetComponent]
})
export class WidgetsModule {}
This should get you fixed up:
#NgModule({
declarations: [AppComponent, HomeComponent],
imports: [
BrowserModule,
NgbModule.forRoot(),
NxModule.forRoot(),
AppRoutingModule,
WidgetsModule
],
providers: [],
entryComponents: [
WidgetsModule
],
bootstrap: [AppComponent]
})
Anything you want to inject into another component must be defined as an entry component. It's the same as if you were to inject a component into a mat-dialog.
See: https://angular.io/guide/entry-components for more info.
I had missed to import TripsMenu in widgets module.
import { TripsMenu } from './menu-widget/trips-menu';
And it worked!
I just started learning Angular yesterday so I apologize if I'm missing something obvious, but I am trying to display a component on the app.component.html, however, it is not showing up.
TS file for the component I am trying to display:
import { Component, OnInit } from '#angular/core';
import { ImageService } from '../shared/image.service';
#Component({
selector: 'image-list',
templateUrl: './image-list.component.html',
styleUrls: ['./image-list.component.css']
})
export class ImageListComponent implements OnInit {
images: any[];
constructor(private _imageService : ImageService ) { }
searchImages(query : string)
{
return this._imageService.getImage(query).subscribe
(
data => console.log(data),
error => console.log(error),
() => console.log("Request Completed!")
);
}
ngOnInit() {
}
}
image-list.component.html :
<button>Find Images</button>
app.component.html :
<image-list></image-list>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
image.service.ts
import { Injectable } from "#angular/core";
import { environment } from "../../environments/environment";
import { Http, Headers } from "#angular/http";
import { map, filter, scan } from 'rxjs/operators';
#Injectable()
export class ImageService
{
private query: string;
private API_KEY: string = environment.API_KEY;
private API_URL: string = environment.API_URL;
private URL: string = this.API_URL + this.API_KEY + '&q=';
constructor(private _http: Http) {
}
getImage(query)
{
return this._http.get(this.URL + this.query).pipe(
map((res) => res.json));
}
}
I had a similar problem trying to use a component outside its module.
In this case, you have to export a component from your .module.ts:
#NgModule({
// …
declarations: [ MyComponent ],
exports: [ MyComponent ],
// …
})
You need to import your Component and your Service into your app.module.ts and then to declarations and to providers property
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ImageListComponent } from './image-list.component';
import { ImageService } from './image.service';
#NgModule({
declarations: [
AppComponent,
ImageListComponent
],
imports: [
BrowserModule
],
providers: [ ImageService ],
bootstrap: [AppComponent]
})
export class AppModule { }
Adjust ImageListComponent path into the import statement.
Teorically when you generate a component with Angular CLI with a command like this:
ng generate component image-list
it should update your app.module.ts file for you.
To generate a service use
ng generate service image
check this one
in src/app/app.module.ts
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, HttpClientModule],
bootstrap: [AppComponent],
})
export class AppModule {}
from this link: https://malcoded.com/posts/why-angular-not-works/
You may try the Angular tutorial from: https://angular.io/start . It shows how to render a custom Ansible component on the app.component.html page.
You just need to update the app.module.ts file. Assuming your component is named ImageListComponent:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'; // add this line
import { AppComponent } from './app.component';
import { ImageListComponent } from './image-list/image-list.component'; // add this line
#NgModule({
declarations: [
AppComponent,
ImageListComponent // add this line
],
imports: [
BrowserModule,
// add the following 3 lines
RouterModule.forRoot([
{ path: '', component: ImageListComponent },
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
First try this, without adding any custom services.
It seems you have nothing that triggers the API call on your method searchImages in ImageComponent. Having a click eventListener on the <button>Find Images</button> tag should do the trick. Also register the ImageComponent and ImageService in your app.module.ts file.
My data is arranged in ascending order... and i want it in descending order. I am using angular4.
For this i am using a reverse pipe. The code for the same is as below. The first time i used it...it worked ..but later from second time onwards it has started giving error as --> The pipe 'reverse' could not be found.
This is were i referred the code from -
Invert Angular 2 *ngFor
transaction.component.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse',
pure:false
})
export class TransactionComponent implements OnInit ,PipeTransform{
transform (values: any) {
if (values) {
return values.slice().reverse();
}
}
.....//code
}
transaction.component.html
<tr *ngFor="let dat of result |reverse | filter:filterdata|
paginate: { itemsPerPage: 5, currentPage: p };let i = index ">
The below code declares a pipe.
reverse.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse',
pure:false
})
export class ReversePipe implements PipeTransform{
transform (values: any) {
if (values) {
return values.slice().reverse();
}
}
.....//code
}
In order to use it in your app.You need to import the pipe and add it to the declarations in your module like below.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { ReversePipe } from '../path/to/yourpipe'
#NgModule({
declarations: [
AppComponent,
ReversePipe
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Working demo on Stackblitz
Hope this helps :)
Add your pipe to declarations array in your module.
#NgModule({
declarations: [
// import and add your pipe to this.
],
imports: [
],
providers: [],
bootstrap: []
})
export class AppModule { }
I have a simple application and I am getting this error. Cannot GET /. and in the console this.Error in event handler for (unknown): TypeError: Cannot read property 'checked' of null
at Object.SL_BBL_locer (chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/js/inject/translator.js:1174:41)
at chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/js/inject/data.js:100:30
I really dont know , what I am doing wrong. Here are my codes.
app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import {AppRoutingModule} from './app-routing.module';
#NgModule({
declarations: [
AppComponent,
DashboardComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
**app.component.html**
<div>
<app-dashboard></app-dashboard>
</div>
dashboard.component
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
dashoboard.component.html
<div> Im here</div>
I assume that your workschedule.module is a feature module. In this case you need to add the CommonModule to the imports property of #NgModule:
#NgModule({
imports: [
CommonModule,
WorkScheduleRoutingModule
],
declarations: [
WorkscheduleComponent
],
providers: []
})