I am trying to add highcharts3d in Angular 6 application. How to use highchart3d in application to display chart in 3d format. It gives compilation error after import of highchart3d library as follows:
import Highcharts3d from 'highcharts/highcharts-3d';
Thanks,
Install angular2-highcharts from npm:
npm install angular2-highcharts --save
Setup in App Module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import { App } from './App';
#NgModule({
imports: [
BrowserModule,
ChartModule.forRoot(require('highcharts')
],
declarations: [App],
bootstrap: [App]
})
export class AppModule {}
And use it in the component:
import { Component } from '#angular/core';
#Component({
selector: 'simple-chart-example',
template: `
<chart [options]="options"></chart>
`
})
export class App {
constructor() {
this.options = {
title : { text : 'simple chart' },
series: [{
data: [29.9, 71.5, 106.4, 129.2],
}]
};
}
options: Object;
}
Read more here:
https://www.npmjs.com/package/angular2-highcharts#add-highcharts-modules
Related
i want to use Ckeditor and Ckfinder thgother in angular .
i u use by this way :
Module :
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { CKEditorModule } from '#ckeditor/ckeditor5-angular';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
CKEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and this is my component :
import { Component, OnInit } from '#angular/core';
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
public Editor = ClassicEditor;
ngOnInit(): void {
ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [CKFinder],
// Enable the "Insert image" button in the toolbar.
toolbar: ['uploadImage' ],
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}
});
}
}
and this is Html Code :
<ckeditor [editor]="Editor" [config]="{ toolbar: [ 'heading','ckfinder', '|', 'bold', 'italic' ] }"
data="<p>Hello, world!</p>"></ckeditor>
but it show me this error:
Uncaught CKEditorError: ckeditor-duplicated-modules
whats the problem ? how can i use the Ckfinder in angular ?
You can use the official CK Editor 5 Angular component.
Documentation: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html
GitHub:
https://github.com/ckeditor/ckeditor5-angular
You can create a custom build using Online Builder tool with all the required plugins and then import that build in angular.
I have been using the custom build with custom plugins without any issues.
I am trying to learn Angular 2 and play with it now. But I don't know why it doesn't go to start page from AppComponent. As long as I know, this has to move to test page and show "test" text. But when I run this, it only displays "Hello" which is app.component text. If I enter /test url, there is 404 error. Is this because the test component is not loaded successfully?
main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { test } from './test';
#NgModule({
imports: [
BrowserModule,
routing
],
declarations: [
AppComponent,
test
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.routing.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { test } from './test.index';
const routes: Routes = [
{ path: '', component: test },
{ path: 'test', component: test },
{ path: '**', redirectTo: '' },
];
export const routing = RouterModule.forRoot(routes);
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<h1>Hello </h1>`,
})
export class AppComponent { }
test.ts
import { Component } from '#angular/core';
#Component({
selector: 'test-app',
template: `<h1>test </h1>`,
})
export class test {}
Include '<router-outlet></router-outlet>' in your appcomponent template:
<div>
<h3>App component</h3>
</div>
<div>
<router-outlet></router-outlet>
</div>
It looks like you need to provide a <router-outlet></router-outlet> in your app.component.ts template.
So the test component isn't being loaded because it can't inject the component into anything without the <router-outlet>.
https://angular.io/tutorial/toh-pt5#add-routeroutlet
I am currently learning the ropes around Angular2 in Ionic2.
I am going through a tutorial that is a bit outdated, and since i'm not 100% familiar with Angular2 environments, I can't debug this error:
Uncaught (in promise): Error: No component factory found for ReposPage. Did you add it to #NgModule.entryComponents? Error: No component factory found for ReposPage. Did you add it to #NgModule.entryComponents? at noComponentFactoryError
These are the files I've changed from a clean ionic2 install:
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
import { UsersPage } from '../pages/users/users';
import { ReposPage } from '../pages/repos/repos';
import { OrganisationsPage } from '../pages/organisations/organisations';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage = HelloIonicPage;
pages: Array<{title: string, component: any}>;
constructor(
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen
) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Users', component: UsersPage },
{ title: 'Repos', component: ReposPage },
{ title: 'Organisations', component: OrganisationsPage },
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
I have also created 3 pages through the ionic g page command.
any help on this issue would be grateful.
You need to include ReposPage in ngModule in app.module.ts .
It should be present in both declarations and entryComponents array.
#NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage //here
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage //here
],
as the error message clearly saying, you need to add 'ReposPage' to the entryComponents array in app.modules.ts file. Also you would need to add it as a declaration.
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage
]
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage
]
I am testing the Lazy Router version with Angular.
I implemented for every component with the following parts:
in componentone.component.ts
#Component({...})
export class ComponentOne ...
in componentone.module.ts
#NgModule({..., imports: [componentOneRoutes]})
export default class ComponentOneModule
in componentone.routes.ts
const routes = [ {path: '', component: ComponentOne} ]
export default RouterModule.forChild(routes);
In my appcomponent.ts
#Component({})
export class AppComponent {
// for displaying the content in url in the app.component.html
navs = [ {url: '', content: 'Component 1'},... ]
}
In app.routes.ts
const routes = [ {path: "", loadChildren:
"app/componentone/componentone.module"} ]
export default RouterModule.forRoot(routes);
Then in app.module.ts import the app.routes.ts
#NgModule({imports:[appRoutes,...]})
I receive the following Error:
ERROR in Cannot use "in" operator to search for "providers" in null.
My providers section is empty because i have no services only the routing part in the import array.
I am using angular 4 and angular-cli 1.0.0
The loadChildren syntax is not correct. It needs the name of the Angular module. Something like this:
loadChildren: 'app/products/product.module#ProductModule'
Expanding on the above so it is crystal clear to everyone (as this is what worked for me):
Change all your default exports, for example:
1) In exporting class:
export default class GridModule { };
2) The class that imports the module:
import GridModule from './gridModule'
Change these default exports to exports, for example:
1) In exporting class:
export class GridModule { };
2) The class that imports the module:
import { GridModule } from './gridModule'
A possible reason for this is described here: https://github.com/angular/angular-cli/issues/3826
First, remove the default annotation from your code (componens and others places).
Second, where are the definitions of componentOneRoutes and appRoutes?
The below setup and files gives me the same error no matter what I change to match any of the solutions currently offered.
Current Setup
#angular/cli: 1.1.0
node: 6.9.1
os: darwin x64
#angular/animations: 4.1.3
#angular/common: 4.1.3
#angular/compiler: 4.1.3
#angular/core: 4.1.3
#angular/forms: 4.1.3
#angular/http: 4.1.3
#angular/material: 2.0.0-beta.3
#angular/platform-browser: 4.1.3
#angular/platform-browser-dynamic: 4.1.3
#angular/router: 4.1.3
#angular/cli: 1.1.0
#angular/compiler-cli: 4.1.3
Account Module - To be lazy Loaded
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ACCOUNT_COMPONENTS } from './components/index';
import { ACCOUNT_CONTAINER } from './containers/index';
import { routes } from './account.routes';
#NgModule({
imports: [
routes,
CommonModule,
],
exports: [
...ACCOUNT_CONTAINER,
...ACCOUNT_COMPONENTS
],
declarations: [
...ACCOUNT_CONTAINER,
...ACCOUNT_COMPONENTS
],
providers: [],
})
export class AccountModule { }
Account Routing
import { Route, RouterModule } from '#angular/router';
import { AccountComponent } from './containers/account/account.component';
const accountRoutes: Route[] = [
{ path: '',
component: AccountComponent
}
];
export const routes = RouterModule.forChild(accountRoutes);
Main Routing File
import { AccountComponent } from './account/containers/account/account.component';
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const appRoutes: Routes = [
{
path: '',
children: [
{
path: '',
loadChildren: 'app/home/home.module#HomeModule',
},
{
path: 'accounts',
loadChildren: 'app/account/account.module#AccountModule',
},
]
},
{ path: '404-page', loadChildren: 'app/404-page/404- page.module#PageNotFoundModule' },
{ path: '**', redirectTo: '404-page' }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);
APP Module
import { LayoutModule } from './layout/layout.module';
import { RunbookEffects } from './core/effects/runbook.effects';
import { AppComponent } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { Angular2TokenService } from 'angular2-token';
import { EffectsModule } from '#ngrx/effects';
import { StoreDevtoolsModule } from '#ngrx/store-devtools';
import { MaterialModule } from '#angular/material';
import { BrowserAnimationsModule } from '#angular/platform- browser/animations';
import { routes } from './app.routes';
import { APP_SERVICES } from './core/services';
import { reducer } from './core/store/reducers';
import { StoreModule } from '#ngrx/store';
import { UserEffects } from './core/effects/user.effects';
import { AccountEffects } from './core/effects/account.effects';
import { ProjectEffects } from './core/effects/project.effects';
#NgModule({
declarations: [
AppComponent
],
imports: [
routes,
MaterialModule,
LayoutModule,
BrowserAnimationsModule,
BrowserModule,
FormsModule,
HttpModule,
StoreModule.provideStore(reducer),
StoreDevtoolsModule.instrumentOnlyWithExtension({
maxAge: 5
}),
EffectsModule.run(UserEffects),
EffectsModule.run(AccountEffects),
EffectsModule.run(ProjectEffects),
EffectsModule.run(RunbookEffects)
],
providers: [
Angular2TokenService,
APP_SERVICES
],
exports: [
],
bootstrap: [AppComponent]
})
I am trying to find out the reason for the following error.
app/src/app.module.ts(13,33): error TS2307: Cannot find module 'src/components/test/test.module
I am using Angular2 RC5 and created a feature module and imported it in app.module.ts file. I am using lazy loading of the module with the router.
app.module.ts looks like this
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing } from './app.routes';
/* App Root */
import { AppComponent } from './app.component';
/* Feature module */
import { TestModule } from 'src/components/test/test.module';
#NgModule({
imports: [ BrowserModule, routing ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: []
})
export class AppModule { }
test.module.ts looks like this
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TestComponent } from './test.component';
import { routing } from './test.routes';
#NgModule({
imports: [ CommonModule, routing ],
declarations: [ TestComponent ],
providers: []
})
export default class TestModule { }
app.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
export const routes: Routes = [
{
path: '',
redirectTo: '/test',
pathMatch: 'full'
},
{
path: 'test',
loadChildren: 'src/components/test/test.module'
}
];
export const routing = RouterModule.forRoot(routes);
test.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
import { TestComponent } from './test.component';
const routes: Routes = [
{ path: '',
component: TestComponent }
];
export const routing = RouterModule.forChild(routes);
Above error appears when I try to compile test.module.ts file with default keyword. If I remove it, error disappears. but of course, in that case, I won't be able to use lazy loading for feature module.
Does anyone come across this?
I see multiple errors in your code.
You are importing wrong module in your AppModule.
Your export class name of test.module.ts is TestModule, but you are importing DashboardModule in your AppModule.
Instead of:
import { DashboardModule } from 'src/components/test/test.module';
You should import:
import { TestModule } from 'src/components/test/test.module';
And, of course, you need to add TestModule to your AppModule imports.