Hi I am developing web application in Angular 5. I am trying to read appsettings.json and use the value in app.module.ts. In app.module.ts inside imports I have following line of code.
AppInsightsModule.forRoot('dfd77fnd-3ba9-43e6-a90f-3e762444938b')
In the above code value is hard coded. I have below tag in appsettings.json.
"ApplicationInsights": {
"InstrumentationKey": "dfd77fnd-3ba9-43e6-a90f-3e762444938b"
}
I want to read from appsettings.json. Below the app.module.ts I can read it. I have created service and inject it. App.module.ts the root file in Angular. Here how can i take the value from appsettings.json? Can someone help me to identify the solution for this? Any help would be appreciated. Thank you.
For loading the configuration data before application load you can use angular provided APP_INITIALIZER.
Details at :- https://devblog.dymel.pl/2017/10/17/angular-preload/
https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/
providers: [
ConfigProvider,
{ provide: APP_INITIALIZER, useFactory: configProviderFactory, deps: [ConfigProvider], multi: true }
],
bootstrap: [AppComponent]
Related
I've been going through the "Getting Started" tutorial for the ag-grid on the fresh project. Completed all the steps but got an error saying
ag-Grid: could not find matching row model for rowModelType clientSide
ag-Grid: Row Model "Client Side" not found. Please ensure the ClientSideRowModelModule is loaded using: import '#ag-grid-community/client-side-row-model';
Compared all my code with examples provided in the tutorial and some plunker examples, and didn't notice any differences. Tried importing ClientSideRowModelModule to the app.module but interfaces did not match with what angular requested, so it didn't work. I'm out of ideas and failed to find any info on how to fix it.
app.module.ts:
... imports: [
BrowserModule,
AppRoutingModule,
AgGridModule.withComponents([])
],...
app.cpmponent.html:
<ag-grid-angular
style="width: 500px; height: 500px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
app.component.ts:
...columnDefs = [
{headerName: 'Make', field: 'make' },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'}
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];...
I'm using Angular: 8.2.10, Angular CLI: 8.2.2, npm: 6.9.0
In your app.component.ts, you first need to import the ClientSideRowModelModule
import { ClientSideRowModelModule } from '#ag-grid-community/client-side-row-model';
Then inside the AppComponent class, you need to create a module array variable like this:
modules: Module[] = [ClientSideRowModelModule];
Finally, in your app.component.html, you need to bind it to the ag-grid-angular component
<ag-grid-angular
style="width: 500px; height: 500px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
[modules]="modules"
>
</ag-grid-angular>
For further resource look at AgGrid's documentation, it is step 3 on installing AgGrid Modules.
I have been using the community version with no issues. I just downloaded a trial of enterprise and everything changed. When I ran into this issue, I learned that [modules]="modules" is required on the grid. That requires these two lines to be included on the component:
import { AllModules } from '#ag-grid-enterprise/all-modules';
modules: Module[] = AllModules;
I've never had to do this before in community version, but it quickly corrected the issue.
The answer that was accepted above is stating what needs to happen when your application is integrating only individual modules. Per the documentation: "If you choose to select individual modules then at a minimum the a Row Model need to be specified. After that all other modules are optional depending on your requirements".
To solve this problem, I had to first import ModuleRegistry and AllCommunityModules in maint.ts and add ModuleRegistry.registerModules(AllCommunityModules); below just before platformBrowserDynamic().bootstrapModule(AppModule) like:
import { ModuleRegistry, AllCommunityModules } from '#ag-grid-community/all-modules';
ModuleRegistry.registerModules(AllCommunityModules);
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Lastly, in the component (e.g. users.component.ts) I used it by importing the AllCommunityModules and declaring the variable like:
import { AllCommunityModules } from '#ag-grid-community/all-modules';
public modules: Module[] = AllCommunityModules;
I got the idea from this answer here
It looks like you have installed AG Grid via its modules but then the code you are following assumes the use of the packaged versions.
As of v27 the all-modules packages are no longer recommended instead you should just use the following packages to have access to all the grid features.
"ag-grid-community": "^27.0.0",
"ag-grid-enterprise": "^27.0.0"
You only need to worry about the scoped packages if you are trying to reduce your bundle size. In that case, you should include the specific feature modules that you require.
From the docs
It is important that you do not mix packages and modules in the same
application as this will result in AG Grid being included twice and
doubling your bundle size! All modules are scoped by either
#ag-grid-community/* or #ag-grid-enterprise/* and should not be mixed
with the standalone packages of ag-grid-community and
ag-grid-enterprise.
Modules
Packages
#ag-grid-community/xxxxx
ag-grid-community
#ag-grid-enterprise/xxxxx
ag-grid-enterprise
I have written about this more in this blog post.
I'm currently trying to implement Lottie to my Angular web-app.
Somehow I couldn't manage to do so yet. I tried to follow the instructions from github, but that lead to multiple errors, as f.e.:
lottie-player is not a known ng module.
Furthermore, I tried to install ng-lottie for Angular - since the original wasn't working - but this one didn't provide any option to jump to a frame or loop only to a certain frame.
Does anyone know an alternative or a way to get lottie player working?
You can add lottie-player as a custom element schema
npm install --save #lottiefiles/lottie-player
angular.json
"scripts": [
"./node_modules/#lottiefiles/lottie-player/dist/lottie-player.js"
]
custom.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
#NgModule({
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CustomModule { }
custom.component.html
<lottie-player src="https://assets4.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json" background="transparent" speed="1" loop autoplay >
</lottie-player>
Hope this helps! and if you managed to implements it with a different approach you can help by sharing it
theres a much simpler approach, install required packages as below
npm i ngx-lottie & lottie-web
in your app.module.ts, add
import { LottieModule } from 'ngx-lottie'; // add this line
export function playerFactory() { // add this line
return import('lottie-web'); // add this line
} // add this line
#NgModule({
declarations: ['your component 1', 'your component 2'...],
imports: [
LottieModule.forRoot({ player: playerFactory, useCache: true }) // add this line
]})
stop your angular server 4200 and start again using ng serve
define options in your component.ts file as
options: AnimationOptions = {
path: 'add animation json file link', // download the JSON version of animation in your project directory and add the path to it like ./assets/animations/example.json
};
then in your component.ts file
import the animation options module at the top of your component as
import { AnimationOptions } from 'ngx-lottie';
then in your component.html
<ng-lottie height="auto" [options]="options"></ng-lottie>
for more information on other attributes of ng-lottie tag visit
https://www.npmjs.com/package/ngx-lottie
I had created one project for login form, here am attaching screenshot of program,
while am executing my project it is showing only index page and waited for some time but still showing only index page, here am attaching output screenshot,
If you want to display a login page as a default page when user serves the application then you have to configure your app.module.ts to handle these type of URL. So the changes that you required is as:
In app.module.ts:
Import RouterModule from angular/router:
import { RouterModule } from '#angular/router';
and in imports Array add
RouterModule.forRoot([
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent }
])
and in app.component.html:
<router-outlet></router-outlet>
That’s because when we run ng-serve to start up our server it creates JavaScript bundles and automatically adds the right imports into our index.html.
In order for your app.component.html to show in localhost:4200, add <router-outlet></router-outlet? to your index.html.
Problem
I have 4 static pages with full angular 6 web app I want to render home.html page on start and after login redirect to actual angular web app from where angular routing fired up and do the magic. question is why I want this? I want this because my web app have some static pages like home, contact us,I want terms and conditions and privacy policy etc. I want this pages to be static for crawler friendly and also for fast rendering by excluding angular out of it.
Question
How I can achieve this.
Done so far
I create 3 static pages in root where index.html is located. the in angular cli I put this line
"index": "src/home.html",
but now I an unable to navigate to contactus.html page it shows me this error.
Error
"The selector "app-root" did not match any elements"
If I understand you right, you can use "Routes" for mapping your page and show in the same "index" all your contend easily. Is versatile, because with that, you can manage lot of things like the session access: I show you an example:
app.module.ts
import { Routes, RouterModule } from '#angular/router';
/*Example component*/
import { InicioComponent } from './inicio/inicio.component';
import{ ExamplePage } from './page1/examplePage.component';
/*Routes mapping*/
const routes: Routes = [
{path: '', component: InicioComponent },
{path: 'proveedores', component: ExamplePage, canActivate: [GuardService] }] /* Example of protected by session page*/
#NgModule({
declarations: [
ExamplePage,
InicioComponent
],
imports: [
RouterModule.forRoot(routes)
]
app.component.html
<h1>Angular</h1>
<hr>
<hr>
<app-header></app-header>
<div class="container text-center">
<router-outlet>**Here are all the pages**</router-outlet>
</div>
This is only a short example, is complicated do a deep explain of that here, but there are a lot of documentation in angular.io about this module: https://angular.io/guide/router
I'm following this tutorial to show a chaart from fusionchart at angular 6
But it only is showing this message:
Cannot read property 'moduleObj' of undefined
I've done imported in app.module.ts
import { FusionChartsModule } from 'angular-fusioncharts';
// Import fusioncharts core in the root
import FusionCharts from 'fusioncharts/core';
// Import chart type
import Column2D from 'fusioncharts/viz/column2d'; // Column2D chart
// Import the fusion theme
import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';
import { ChartComponent } from './chart/chart.component'
// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, Column2D, FusionTheme);
#NgModule({
imports: [ BrowserModule, FormsModule, FusionChartsModule ],
declarations: [ AppComponent, HelloComponent, ChartComponent ],
bootstrap: [ AppComponent ]
})
This is my html:
Meu html está assim:
<fusioncharts
width="700"
height="400"
type="Column2d"
[dataSource]="dataSource">
</fusioncharts>
Here is my stackblitz
I was having the same problem, but later found it out that stackblitz internally tries to compile the code into ES5, however in FusionCharts recent modular build, they are internally using all ES6 module syntax, hence, stackblitz is not able to run the charts, however, if you check the sample locally using Angular CLI it will work fine. Let me know if you need any assistance, I can share a sample if needed.