I'm trying to edit prefix at component, service when generate new angular4 web app.I used options "--jhi-prefix" in command
jhipster --jhi-prefix my-prefix
but doesn't work.
In file app.module.ts
#NgModule({
imports: [
BrowserModule,
LayoutRoutingModule,
Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}),
In file navbar.component.ts
#Component({
selector: 'jhi-navbar',
templateUrl: './navbar.component.html',
styleUrls: [
'navbar.scss'
]
})
Please help me edit prefix 'jhi' to my custom prefix.
Related
I am building a nestjs app where I want to create a rabbitmq
#Module({
imports: [
ClientsModule.register([
{
name: 'rabbitmq',
transport: Transport.RMQ,
options: {
urls: [
'amqp://guest:guest#rabbitmq',
],
queue: 'my_queue',
},
},
]),
],
controllers: [],
providers: [RabbitMQService],
exports: [RabbitMQService],
})
And service:
#Injectable()
export class RabbitMQService {
constructor(
#Inject('rabbitmq') private client: ClientProxy
) {}
}
The error I am getting is: Nest can't resolve dependencies of the RabbitMQService (?). Please make sure that the argument rabbitmq at index [0] is available in the RabbitMQService context.
As much I am aware, this should work, but nope. Could anyone help?
From the error, it looks like somewhere in your application you have RabbitMQService in an imports array where #Module() classes are supposed to go. Make sure that you keep providers and other #Injectables() to the providers array and keep #Module() and other DynamicModules to the imports array. Common error docs
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.
So I followed the guide on how to create a configuration for my Nest app
https://docs.nestjs.com/techniques/configuration
and due to the fact I have many configuration parts I wanted to split the parts into multiple configuration services. So my app.module.ts imports a custom config module
#Module({
imports: [CustomConfigModule]
})
export class AppModule {}
This custom config module (config.module.ts) bundles all the config services and loads the Nest config module
#Module({
imports: [ConfigModule.forRoot()],
providers: [ServerConfigService],
exports: [ServerConfigService],
})
export class CustomConfigModule {}
Lastly I have a simple config service server.config.service.ts which returns the port the application is running on
#Injectable()
export class ServerConfigService {
constructor(private readonly configService: ConfigService) {}
public get port(): number {
return this.configService.get<number>('SERVER_PORT');
}
}
I would like to validate those services on application startup. The docs explain how to setup a validationschema for the configuration module
https://docs.nestjs.com/techniques/configuration#schema-validation
How can I use that for my service validation when using a custom config module?
Do I have to call joi in each service constructor and validate the properties there?
Thanks in advance
I believe in your ConfigModule.forRoot() you can set the validation schema and tell Nest to run the validations on start up instead of having to add it to each custom config service. The docs show something like:
#Module({
imports: [
ConfigModule.forRoot({
validationSchema: Joi.object({
NODE_ENV: Joi.string()
.valid('development', 'production', 'test', 'provision')
.default('development'),
PORT: Joi.number().default(3000),
}),
validationOptions: {
allowUnknown: false,
abortEarly: true,
},
}),
],
})
export class AppModule {}
Which would run validations on NODE_ENV and PORT. You could of course extend it out to more validations overall. And then you could just have one ConfigModule that has smaller config services that split each segment up so all validations are run on startup and only what you need is available in each module's context.
I created a directive to auto-grow a textbox but when i implemented it to the component i'm getting the error.
myAppComps.ts
NPM RUN BUILD
auto-grow.directives.ts
myAppComps.html
package.json:
If you are using RC6 and up - you need to use #NgModule to declare the directives (under 'declarations'):
#NgModule({
imports: [ BrowserModule],
declarations: [ AppComponent,PeopleListComponent ], //<----here
providers: [],
bootstrap: [ AppComponent ]
})
Source
import {Component} from 'angular2/core';
#Component({
selector: 'app',
styleUrls: ['./app.component.less'],
templateUrl: './app.component.html'
})
export class AppComponent {
name:string = 'Demo'
}
When using the relative path for templateUrl and styleUrls, I get: error 404, file not found:
zone.js: 101 GET http://localhost/app.component.html 404 (Not Found)
code: https://github.com/Dreampie/angular2-demo
I think this is not good design,because under different circumstances may build directory is not the same, can I change it to relative current path?
raw-loader can resolve this,but html-loader,less-loader not work for template,styles,it only work in string,so why not suport them?
import {Component} from 'angular2/core';
#Component({
selector: 'app',
styles: [require('./app.component.less')],
template: require('./app.component.html')
})
export class AppComponent {
name:string = 'Demo'
}
get other error:
browser_adapter.js:77 EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!.BrowserDomAdapter.logError
browser_adapter.js:77 ORIGINAL EXCEPTION: Expected 'styles' to be an array of strings.
Let me add some more information.
Why can't Angular calculate the HTML and CSS URLs from the component file's location?
Unfortunately, that location is not readily known. Angular apps can be loaded in many ways: from individual files, from SystemJS bundles, or from CommonJS bundles, to name a few. With this diversity of load strategies, it's not easy to tell at runtime where these files actually reside.
The only location Angular can be sure of is the URL of the index.html home page. So by default it resolves template and style paths relative to the URL of index.html. That's why we previously wrote our CSS file URLs with an app/ base path prefix.
Official Angular Docu
The ./ (single dot) notation works for ts paths only, it doesn't work with html or css paths.
These paths are relative to index.html, so according to your file structure, this should work
#Component({
selector: 'app',
styleUrls: ['app.component.less'],
templateUrl: 'app.component.html'
})
You need to try
#Component({
selector: 'app',
template: require('./app.component.html'),
styles: [
require('./app.component.less').toString()
or
String(require('./app.component.less'))
or
add css-to-string in your webpack conf ({test: /\.css$/, loaders: ['css-to-string', 'style', 'css']})
})
Set the moduleId property to module.id for module-relative loading, so that urls are relative to the component.
#Component({
moduleId: module.id,
selector: 'app',
styleUrls: ['app.component.less'],
templateUrl: 'app.component.html'
})
If you are using SystemJS for example, see my answer here: https://stackoverflow.com/a/40694657/986160
You can use model.id and convert it from your build path (that with the js) to the one with ts,css and html. That way you can use relative paths for your templates and styles in Angular 2 no problem
#Component({
moduleId: module.id.replace("/dist/", "/"),
...
});
I have noticed the same error in my case. The reason of
Expected 'styles' to be an array of strings
in my case was css-loader which was used for loading CSS files and piped to angular2-template-loader.
What I understood from debugging that css-loader has some "smart" detection of changes in CSS files and if nothing were changed CSS file just wasn't exported as a string by webpack module.
As it was just hello word app my solution was very simple: replace css-loader by raw-loader. It is my version of loaders:
loaders: [
{
include: [srcPath],
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{
include: [srcPath],
test: /\.js$/,
loader: 'angular2-template-loader',
query: {
keepUrl: true
}
},
{
include: [srcPath],
test: /\.(html|css)$/,
loader: 'raw',
query: {
minimize: true
}
}
]
WebPack2 do not require this moduleId anymore