I have a CheckModule which accepts configuration in the forRoot method using a constant CHECK_OPTIONS:
#Module({})
export class CheckModule {
static forRoot(options?: CheckOptions): DynamicModule {
return {
module: CheckModule,
providers: [
{
provide: CHECK_OPTIONS,
useValue: options,
},
CheckService,
],
exports: [CheckService],
};
}
}
My CheckService uses the options:
#Injectable()
export class CheckService {
...
constructor(#Inject(CHECK_OPTIONS) options: CheckOptions) {}
...
Whenever I debug the application, everything is working fine. But, once I build for production and serve it on Heroku I get an error.
# Production build
nx build $PROJECT_NAME --prod
# Serving the app
node dist/apps/worker/main.js
I get an error:
ERROR [ExceptionHandler] Nest can't resolve dependencies of the CheckService (?). Please make sure that the argument CHECK_OPTIONS at index [0] is available in the CheckModule context.
Am I missing something here? I'm kind of clueless...
Seems like your module needs to be global.
Try adding #Global() decorator before #Module({}).
In my app.module I imported the CheckModule as:
imports: [
CheckModule.forRoot(),
...
]
This method had an optional parameter for CheckOptions:
forRoot(options?: CheckOptions) { ... }
However my CheckService expects a CHECK_OPTIONS which is not optional. This is what caused the error. Correctly marking this InjectionToken as #Optional() resolved this issue.
So, I've changed the code from:
constructor(#Inject(CHECK_OPTIONS) options?: CheckOptions) {}
To:
constructor(#Optional() #Inject(CHECK_OPTIONS) options?: CheckOptions) {}
^^^^^^^^^^^
See https://docs.nestjs.com/providers#optional-providers for more information about the #Optional() decorator.
I had the same issue, fixed it by moving adding all the providers to exports of the dynamic module also. in you case add:
exports: [ {
provide: CHECK_OPTIONS,
useValue: options,
},
CheckService]
Related
Can anyone help me please, I’m trying to get the plug-in Laravel-Vue-pagination working on my nuxt 3(typescript) project.
nuxt.config.ts
plugins: [
'#/plugins/vueLaravelPagination',
],
build: {
transpile: ['LaravelVuePagination'],
},
vue: {
compilerOptions: {
isCustomElement: tag => ['LaravelVuePagination'].includes(tag)
}
}
plugins/vueLaravelPagination.ts
import LaravelVuePagination from 'laravel-vue-pagination'
export default defineNuxtPlugin((nuxt) => {
nuxt.vueApp.use(LaravelVuePagination)
})
I get a warning when I try to use the pager as follows and describe it as follows. I do not know how to solve this problem. Can someone please help me?
<Pagination
:data="data"
#changePage="onAccess" />
runtime-core.esm-bundler.js:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
I use click-outside-vue3' as directive with Nuxt3. Had the same issue.
The reason was that I had:
import ClickOutside from 'click-outside-vue3/src/v-click-outside'
instead of import ClickOutside from 'click-outside-vue3' in plugin file.
The way I use this Vue3 plugin in Nuxt3:
plugins/vClickOutside.ts:
import ClickOutside from 'click-outside-vue3/src/v-click-outside'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(ClickOutside, {
})
})
and also in component where directive is used:
import vClickOutside from 'click-outside-vue3'
...
...
directives: {
clickOutside: vClickOutside.directive
},
And I do not register the plugin in nuxt.config.ts file.
Know there is a better way using "script setup". But it also work
We've run into some problems for our MultiSite Spartacus setup when doing I18n.
We'd like to have different translations for each site, so we put these on an API that can give back the messages dependent on the baseSite, eg: backend.org/baseSiteX/messages?group=common
But the Spartacus setup doesn't let us pass the baseSite? We can
pass {{lng}} and {{ns}}, but no baseSite.
See https://sap.github.io/spartacus-docs/i18n/#lazy-loading
We'd could do it by overriding i18nextInit, but I'm unsure how to achieve this.
In the documentation, it says you can use crossOrigin: true in the config, but that does not seem to work. The type-checking say it's unsupported, and it still shows uw CORS-issues
Does someone have ideas for these problems?
Currently only language {{lng}} and chunk name {{ns}} are supported as dynamic params in the i18n.backend.loadPath config.
To achieve your goal, you can implement a custom Spartacus CONFIG_INITIALIZER to will populate your i18n.backend.loadPath config based on the value from the BaseSiteService.getActive():
#Injectable({ providedIn: 'root' })
export class I18nBackendPathConfigInitializer implements ConfigInitializer {
readonly scopes = ['i18n.backend.loadPath']; // declare config key that you will resolve
readonly configFactory = () => this.resolveConfig().toPromise();
constructor(protected baseSiteService: BaseSiteService) {}
protected resolveConfig(): Observable<I18nConfig> {
return this.baseSiteService.getActive().pipe(
take(1),
map((baseSite) => ({
i18n: {
backend: {
// initialize your i18n backend path using the basesite value:
loadPath: `https://backend.org/${baseSite}/messages?lang={{lng}}&group={{ns}}`,
},
},
}))
);
}
}
and provide it in your module (i.e. in app.module):
#NgModule({
providers: [
{
provide: CONFIG_INITIALIZER,
useExisting: I18nBackendPathConfigInitializer,
multi: true,
},
],
/* ... */
})
Note: the above solution assumes the active basesite is set only once, on app start (which is the case in Spartacus by default).
I'm trying to optimize my nextjs page images with next-optimized-images
This is the next.config.js:
module.exports = {
...
withOptimizedImages: withOptimizedImages({
webpack(config) {
config.resolve.alias.images = path.join(__dirname, 'public')
return config
}
}),
...
Here is how I import image to components:
require(`public/assets/icons/${iconName}`)
My Error:
./public/assets/icons/website/information/hiring-black.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I'm using latest version of next-optimized-image and tried different guides but still no luck.
Please help
Next.js now optimize images by default.
Refer: next/image
If you need svg, you need to try adding svgr-webpack loader.
Install: yarn add #svgr/webpack -D
To configure this, update following in next.config.js
module.exports = {
...
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ['#svgr/webpack'],
});
return config;
},
...
};
Use it as following:
...
import Star from './star.svg'
...
<Star />
...
I'm upgrading to Angular 6 using AngularFire2. My app referenced 2 Firebase projects using code like this to create the database reference:
public initFirebaseApp(config: FirebaseAppConfig, firebaseAppName: string) {
this._db = new AngularFireDatabase(_firebaseAppFactory(config, firebaseAppName));
}
This code is now broken. I get this:
ERROR in src/app/services/firebase.service.ts(24,25): error TS2554: Expected 5 arguments, but got 1.
Thanks!
AngularFire now support many more configuration objects via Injection now, which is why it's expecting more arguments. It currently takes:
constructor(
#Inject(FirebaseOptionsToken) options:FirebaseOptions,
#Optional() #Inject(FirebaseNameOrConfigToken) nameOrConfig:string|FirebaseAppConfig|undefined,
#Optional() #Inject(RealtimeDatabaseURL) databaseURL:string,
#Inject(PLATFORM_ID) platformId: Object,
zone: NgZone
)
Though now that we support dependency injection, I wouldn't suggest directly initializing like you are to support multiple apps. We have an open issue for documenting this but you can now inject different FirebaseOptions via the FirebaseOptionsToken into different components, if you need multiple databases in the same component use something like this:
#Injectable()
export class AngularFireDatabaseAlpha extends AngularFireDatabase { }
#Injectable()
export class AngularFireDatabaseBeta extends AngularFireDatabase { }
export function AngularFireDatabaseAlphaFactory(platformId: Object, zone: NgZone): Project1AngularFireAuth {
return new AngularFireDatabaseAlpha(environment.firebase[0], 'alpha', undefined, platformId, zone)
}
export function AngularFireDatabaseBetaFactory(platformId: Object, zone: NgZone): Project2AngularFireAuth {
return new AngularFireDatabaseBeta(environment.firebase[1], 'beta', undefined, platformId, zone)
}
#NgModule({
...,
providers: [
...,
{ provide: AngularFireDatabaseAlpha, deps: [PLATFORM_ID, NgZone], useFactory: AngularFireDatabaseAlphaFactory },
{ provide: AngularFireDatabaseBeta, deps: [PLATFORM_ID, NgZone], useFactory: AngularFireDatabaseBetaFactory },
...
],
...
})
Then you can just rely on Dependency Injection to get AngularFireDatabaseAlpha and AngularFireDatabaseBeta into your component.
I am using angular2 and uirouter for routing. I have successfully implemented uirouter module in application.But the problem arises when i try to test my application. Where i am using karma, Jasmin and initiating it using npm test. but encountered with ERROR:Can't resolve all parameters for UIRouter: (?, ?).
I have imported "UIRouter" in *.spec.ts file and added it in providers array as below.
import { UIRouterModule } from '#uirouter/angular';
import { UIRouter } from "#uirouter/core";
describe('Footer Menus', () => {
let footerMenuBlServiceRef:FooterMenuBLService;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [],
declarations: [],
providers: [UIRouter],
})
.compileComponents();
}));
But no luck. Any help will be appreciated.
Solved it !!!
Just remove the UIRouter from providers array but keep the import statement for it. and yes its working.
On last friday, I finally found a way to make it work. It is not a clean way to do it but it is working, at least.
I reimport the UIRouter.forRoot with the states of my feature module and I provide the APP_BASE_HREF value for the Root Provider of UIRouter.
Here is my BeforeEach :
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
HomeComponent,
HomeCardComponent
],
imports: [
AppMaterialModule,
// Always import root UIRouter module when testing a component including routing
UIRouterModule.forRoot({states: HOME_STATES})
],
providers: [
// Also, include the base href value when testing a component including routing
{provide: APP_BASE_HREF, useValue: '/'}
],
}).compileComponents();
}));
If you know a better way, I would be happy to know! :)
The UI-Router source can be of some help. This is what worked for me:
import { UIRouterModule } from '#uirouter/angular';
...
TestBed.configureTestingModule({
...
imports: [UIRouterModule.forRoot({ useHash: true })],
})