Getting started on Ionic2 which is based on Angular2 and I'm currently trying to extend the base tab component to add an extra input. The point is to sort a list of models into tabs by an attribute.
My class is the following:
import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer} from 'angular2/angular2';
import {IonicApp, Config, Keyboard, NavController, ViewController, Tabs, Tab} from 'ionic/ionic';
#Component({
selector: 'list-tab',
inputs: [
'root',
'tabTitle',
'tabIcon'
],
host: {
'[class.show-tab]': 'isSelected',
'[attr.id]': '_panelId',
'[attr.aria-labelledby]': '_btnId',
'role': 'tabpanel'
},
template: '<template #contents></template>'
})
export class ListTab extends Tab {
constructor(
#Host() parentTabs: Tabs,
app: IonicApp,
config: Config,
keyboard: Keyboard,
elementRef: ElementRef,
compiler: Compiler,
loader: DynamicComponentLoader,
viewManager: AppViewManager,
zone: NgZone,
renderer: Renderer
) {
super(parentTabs, app, config, keyboard, elementRef, compiler, loader, viewManager, zone, renderer);
}
}
I then try using it as a normal tab :
<ion-tabs>
<list-tab *ng-for="#tab of tabs" tab-title="{{tab.title}}" tab-icon="{{tab.icon}}" [root]="tab.component"></list-tab>
</ion-tabs>
But it displays the following error :
Error: Cannot resolve all parameters for ListTab(Tabs #Host() #Host(), IonicApp, Config, ?, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer). Make sure they all have valid type or annotations.
at NoAnnotationError.BaseException [as constructor] (http://localhost:8100/build/js/app.bundle.js:26209:24)
at new NoAnnotationError (http://localhost:8100/build/js/app.bundle.js:27069:17)
at _extractToken (http://localhost:8100/build/js/app.bundle.js:26183:16)
at http://localhost:8100/build/js/app.bundle.js:26135:46
at Array.map (native)
at Array.map (http://localhost:8100/build/js/app.bundle.js:1158:15)
at _dependenciesFor (http://localhost:8100/build/js/app.bundle.js:26135:20)
at resolveFactory (http://localhost:8100/build/js/app.bundle.js:26015:25)
at Object.resolveProvider (http://localhost:8100/build/js/app.bundle.js:26039:67)
at Function.DirectiveProvider.createFromProvider (http://localhost:8100/build/js/app.bundle.js:36482:30)
I've tried different ways of getting Keyboard to import correctly as it seems it doesn't recognize it's annotation, but nothing seems to correct the error.
Is this a framework bug which wouldn't be surprising since we're in alpha, or am I doing something wrong?
Thanks
Try my code, works on 2.0.0-beta.3
import {Tab, Config} from "ionic-angular";
import {Keyboard} from "ionic-angular/util/keyboard";
import {Component, Inject, forwardRef, ElementRef, Compiler, AppViewManager, NgZone, Renderer, ViewEncapsulation} from 'angular2/core';
import {ShiftingTabs} from './tabs';
import {IonicApp} from "ionic-angular";
#Component({
selector: 'shifting-tab',
inputs: [
'root',
'tabTitle',
'tabIcon'
],
host: {
'[class.show-tab]': 'isSelected',
'[attr.id]': '_panelId',
'[attr.aria-labelledby]': '_btnId',
'role': 'tabpanel'
},
template: '<div #contents></div>',
encapsulation: ViewEncapsulation.None
})
export class ShiftingTab extends Tab {
constructor(
#Inject(forwardRef(() => ShiftingTabs)) parentTabs: ShiftingTabs,
app: IonicApp,
config: Config,
keyboard: Keyboard,
elementRef: ElementRef,
compiler: Compiler,
viewManager: AppViewManager,
zone: NgZone,
renderer: Renderer
) {
super(
parentTabs, app, config, keyboard, elementRef, compiler,
viewManager, zone, renderer
);
}
}
example of use:
<ion-tabs tabbarPlacement="top">
<shifting-tab [root]="tab1Root" tabTitle="Test1"></shifting-tab>
</ion-tabs>
Related
I got an error Strict mode code may not include a with statement in Angular 12 with universal when building the server bundle.
I removed this line export { renderModule, renderModuleFactory } from '#angular/platform-server'; as suggested here and here but the issue occures only when I add ServerModule to imports array
#NgModule({
imports: [/*AppModule,*/ ServerModule],
// bootstrap: [AppComponent],
})
export class AppServerModule {}
// export { renderModule, renderModuleFactory } from '#angular/platform-server';
when removing ServerModule the build executed successfully
i have the problem that i have a circular dependency in my project. Unfortunately I cannot solve this with forwardRef.
The following structure:
OrderModule
OrderService
I have the following dependencies in the orderService
PriceService
CustomerService
SalePriceService
...
PriceModule
PriceService
I have the following dependencies in the priceService
OrderService
ProductService
...
I've tried all the options from the Official Documentation.
docs NestJs circular-dependency
What has to be considered here if there are more dependencies in a service?
Many thanks. Best regards.
Update:
order.module.ts
#Module({
imports: [
CustomerModule,
ProductModule,
MongooseModule.forFeature([{ name: 'Order', schema: OrderSchema }]),
forwardRef(() => PriceModule),
],
controllers: [OrderController],
providers: [OrderService],
exports: [OrderService],
})
export class OrderModule {}
order.service.ts
#Injectable()
export class OrderService extends GenericCrudService<OrderDocument> {
constructor(
#InjectModel(Order.name) readonly order: Model<OrderDocument>,
private readonly productService: ProductService,
#Inject(forwardRef(() => PriceService))
private readonly priceService: PriceService,
) {
super(order);
}
}
price.module.ts
#Module({
imports: [
CustomerModule,
SalePriceModule,
MongooseModule.forFeature([{ name: 'Price', schema: PriceSchema }]),
forwardRef(() => OrderModule),
],
controllers: [],
providers: [PriceService],
exports: [PriceService],
})
export class PriceModule {}
price.service.ts
#Injectable()
export class PriceService extends GenericCrudService<PriceDocument> {
constructor(
#InjectModel(Price.name) readonly price: Model<PriceDocument>,
private readonly customerService: CustomerService,
private readonly salePriceService: SalePriceService,
#Inject(forwardRef(() => OrderService))
private readonly orderService: OrderService,
) {
super(price);
}
}
product.module.ts
#Module({
imports: [
PriceModule,
MongooseModule.forFeature([{ name: 'Product', schema: ProductSchema }]),
],
controllers: [ProductController],
providers: [ProductService],
exports: [ProductService],
})
export class ProductModule {}
product.service.ts
#Injectable()
export class ProductService extends GenericCrudService<ProductDocument> {
constructor(
#InjectModel(Product.name) readonly product: Model<ProductDocument>,
) {
super(product);
}
}
The error I'm getting is:
The module at index [1] of the OrderModule "imports" array is undefined.
Potential causes:
- A circular dependency between modules. Use forwardRef() to avoid it. Read more: https://docs.nestjs.com/fundamentals/circular-dependency
- The module at index [1] is of type "undefined". Check your import statements and the type of the module.
Scope [AppModule -> ProductModule -> PriceModule]
Error: Nest cannot create the OrderModule instance.
The module at index [1] of the OrderModule "imports" array is undefined.
Potential causes:
- A circular dependency between modules. Use forwardRef() to avoid it. Read more: https://docs.nestjs.com/fundamentals/circular-dependency
- The module at index [1] is of type "undefined". Check your import statements and the type of the module.
Scope [AppModule -> ProductModule -> PriceModule]
So there's the obvious circular dependency that you have here: OrdersModule to PricesModule and back, that one is properly forwardReffed. However, there's another, not so obvious circular dependency too. OrdersModule to ProductsModule to PricesModule because the next import would be OrdersModule. Because of this, OrdersModule needs to forwardRef the ProductsModule and ProductsModule needs to forwardRef the PricesModule. It looks like the services themselves aren't circular, so it's just the modules that need the forward ref. Always make sure to check the entire import chain, especially when Nest is trying to report something like it did with Scope [AppModule -> ProductModule -> PriceModule].
I have angular 9 pwa universal web app which after npm run build:ssr works with node dist/app/server/server.js. I translated all text , but after build I see only half translated and another half like : common.next , common.back.
Here is what i have :
app.module :
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
imports: [
...
TransferHttpCacheModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
...
]
app.server.module :
import { NgModule } from '#angular/core';
import { ServerModule, ServerTransferStateModule } from '#angular/platform-server';
import { BrowserModule } from '#angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
#NgModule({
imports: [
AppModule,
ServerModule,
ServerTransferStateModule,
BrowserModule.withServerTransition({ appId: 'autorent' }),
],
bootstrap: [AppComponent],
})
export class AppServerModule { }
app.browser.module :
import { NgModule } from '#angular/core';
import { BrowserModule, BrowserTransferStateModule } from '#angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '#angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [
AppModule,
BrowserModule.withServerTransition({ appId: 'autorent' }),
BrowserTransferStateModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
BrowserAnimationsModule
],
bootstrap: [AppComponent],
})
export class AppBrowserModule { }
If you need another info, which I doubt, just write in comments and I will provide.
How to make that ngx-translate would work fully + won't be loaded on page load, It should lode on server I think, because when I open app for the first time, i see how text changes (half of it)
As you use separate translation files and load them after the code (TranslateHttpLoader(http, './assets/i18n/', '.json');) this json file is cached by the browser. As you're not using content hashes there, it is likely that a newer version of you code is getting older translation files from the browser cache. (You can verify this with the chrome dev tools, there is a disable cache checkbox)
You have several options there:
Delete your browser cache and tell your users to do the same after every redeploy
Configure the web server to serve the translation file with a very short cache lifetime
Use some kind of content-hashing where the requested resource is different after a redeploy so that the browser cache does not hit if the file has changed. (for example, modify your build process so that the filename ends like .json?67d383 where the last part is replaced at build time with the git commit hash of the code that was build)
compile the translation into the javascript bundle
I have used options 1, 3 and 4 and recommend the last (for applications with little different locales). The javascript bundle cannot display anything meaningful without the translations, so it might as well include them.
You can directly include the json files for all the languages into the typescript file and use them as a constant. Switch as needed, as any loading of translations will be immediate (no http call) and the translations will always be accurate. Content hashing should be configured for the javascript bundle already (by default).
If you have many languages, I'd rather move towards approach 3 for bundle size.
I have thoroughly followed the instructions in the following guides:
Get Started with ag-Grid in Your Angular Project
Angular Webpack 3
My app.module.ts includes:
import { AgGridModule } from 'ag-grid-angular';
...
#NgModule({
imports: [
...,
AgGridModule.withComponents([])
]
})
In vendor.css
#import "~ag-grid-community/dist/styles/ag-grid.css";
#import "~ag-grid-community/dist/styles/ag-theme-balham.css";
In the home.component.ts:
import { Component, OnInit } from '#angular/core';
import {GridOptions} from 'ag-grid-community';
#Component({
selector: 'jhi-home',
templateUrl: './home.component.html',
styleUrls: ['home.css']
})
export class HomeComponent implements OnInit {
private gridOptions: GridOptions;
public rowData: any[];
private columnDefs: any[];
constructor(
private accountService: AccountService,
private loginModalService: LoginModalService,
private eventManager: JhiEventManager
) {
this.gridOptions = <GridOptions>{
onGridReady: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
this.columnDefs = [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
];
this.rowData = [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
];
}
ngOnInit() {
}
}
Eventually in the template I added the component:
<ag-grid-angular #agGrid style="width: 500px; height: 300px;"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData">
</ag-grid-angular>
Although there are no errors at build, the grid will not render. That is the way my HTML looks after compilation:
I presume there may be an incompatibility between Angular 7/Webpack 4/the way Jhipster loads the app and ag-grid-angular.
Would you suggest any solution? Thank you!
You should import the AgGridModule on each one of your 'entities' apps modules, not on your main apps.module.ts.
hy guys i have problem like this,
i have a app.typescript
and inside it i import
import { Component } from '#angular/core';
import {CORE_DIRECTIVES} from '#angular/common';
import { MODAL_DIRECTVES } from 'ng2-bootstrap';
#Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'my-app.component.html',
styleUrls: ['my-app.component.css'],
directives: [MODAL_DIRECTVES]
})
export class my-appComponent {
title = 'Mp App';
}
but when i run it i got an error that say cant find module ng2-bootstrap
As per the documentation here. It appears you must import from a nested path:
import { MODAL_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
or
import { MODAL_DIRECTIVES } from 'ng2-bootstrap/components/modal';