I am trying to import the HttpModule module in nest.js, but I am unable to. I get the following error
src/app.module.ts:1:18 - error TS2724: '"#nestjs/common"' has no exported member named 'HttpModule'. Did you mean 'HttpCode'?
This is my module.ts code
import { Module, HttpModule } from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
#Module({
imports: [HttpModule],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
I also installed the module using
npm i --save #nestjs/axios
Change your import to import { HttpModule } from '#nestjs/axios'
nestjs/axios
The HttpModule exported from the #nestjs/common package has been deprecated and will be removed in the next major release. Instead, please use the #nestjs/axios package (otherwise, there are no API differences).
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 import MongooseModule and use it according the documentation of NestJS and when I compile the server locally I get this error node_modules/mongoose/index.d.ts:1883:33 - error TS2339: Property 'Buffer' does not exist on type 'typeof globalThis'. I installed #types/node but I don't know what to do from here.
app.module.ts
import { Module } from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ClientsModule } from './clients/clients.module';
import { MongooseModule } from '#nestjs/mongoose';
#Module({
imports: [ClientsModule, MongooseModule.forRoot(`mongodb+srv://xxx:xxx#cluster0.ikjjp.mongodb.net/yyyyyyyy?retryWrites=true&w=majority`)],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Explicitly add '#types/node' by installing types. Should be fixed in mongoose, but works as of now.
npm i --save-dev #types/node#^14.0.0
I solved my problem by running npm i #types/node#15.14.1. After that, I could run the server. For anyone having this issue in a near future, try both solutions from Karunakaran and mine.
I build an npm package as a test to see how it works. So far it worked, I could build it (--prod) and publish it to a registry. Just one question, if I want to use it in a different project I can include the Module of my npm package which is published and it will be shown in my project.
My Module consists of a few components (ts and HTML) how do I do that if I only want to use one component? So install everything but only use one of them through the selector? For example Angular packages like routing you can do something like this
"" this is what I want to do too.
My module.ts of npm package
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { ShowTitleComponent } from './show-title/show-title.component';
import { MypageComponent } from './mypage/mypage.component';
import { MyCounterComponent } from './my-counter/my-counter.component';
import { MyTitleComponent } from './my-title/my-title.component';
#NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{path: '', pathMatch: 'full', component: MypageComponent}
]),
],
declarations: [ShowTitleComponent, MypageComponent, MyCounterComponent, MyTitleComponent]
})
export class MyuiModule {}
And say I want to install everything but only use ShowtitleComponent, how do I do this? If I import my module in new project everything is shown.
First question
Goal
I'm trying to add SSR to my Angular project with ng add #nguniversal/express-engine --clientProject [name] (so I can dynamically prerender meta tags)
Expected Result
I expected the command to execute successfully with all the scaffolding and necessary updates to my existing files, as demonstrated in this YouTube tutorial.
Actual Result
Instead, the console says this:
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Cannot find BrowserModule import in /src/app/app.module.ts
But BrowserModule is imported in app.module.ts.
What I've Tried
Reinstalling package
I've tried uninstalling the package with npm uninstall #nguniversal/express-engineand re-running the ng add above, same issue.
Other posted questions about ng adding #nguniversal/express-server don't seem to apply here, as those guys actually got as far as creating some of the scaffolding and generating the new files - no files are created for me at all, but the module does get added to my node-modules folder.
Could it be an issue with simply reading the typescript in app.module.ts? The BrowserModule import is there, and in the imports array. This is the output for npm ls typescript:
+-- #angular-devkit/build-angular#0.901.8
| `-- #angular-devkit/build-optimizer#0.901.8
| `-- typescript#3.6.5
+-- #ng-toolkit/universal#1.1.21
| +-- #ng-toolkit/_utils#1.1.51
| | `-- #schematics/angular#7.3.10
| | `-- typescript#3.2.4
| `-- #schematics/angular#0.6.8
| `-- typescript#2.7.2
`-- typescript#3.8.3
Additional Info (for David)
app.module.ts
import { BrowserModule, Meta, Title } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { SoftwareComponent } from './software/software.component';
import { MediaComponent } from './media/media.component';
import { ShopComponent } from './shop/shop.component';
import { FilmDetailsComponent } from './film-details/film-details.component';
import { ShareModalComponent } from './share-modal/share-modal.component';
import { ShareModule } from 'ngx-sharebuttons';
import { ShareButtonModule } from 'ngx-sharebuttons/button';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';
#NgModule({
imports: [
ShareButtonModule,
ShareIconsModule // Optional if you want the default share icons
]
})
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
HomeComponent,
SoftwareComponent,
MediaComponent,
ShopComponent,
FilmDetailsComponent,
ShareModalComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FontAwesomeModule,
ShareModule,
ShareButtonModule,
ShareIconsModule
],
providers: [Meta, Title],
bootstrap: [AppComponent]
})
export class AppModule { }
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
This error is caused by multiple NgModules in the app.module, as the first NgModule imports doesn't contain BrowserModule.
app would still work fine if you remove first NgModule since the modules in the imports are already imported in the second one
I'm sorry for my bad english.
my fault is that when I want to seo the joints in the module.browser class bootstrap does not appear
app.browser.module.ts;
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
#NgModule({
bootstrap: [
AppComponent
],
imports:[
BrowserModule.withServerTransition({appId: 'app-root'}),
AppModule,
]
})
export class AppBrowserModule {}
my bad eror
D:\çalışmalar\code\myWebSite>ng add #ng-toolkit/universal
Installing packages for tooling via npm.
INFO: Project property is set to 'myWebSite'.
ERROR: Bootstrap not found in ./src/.././src/app/app.browser.module.ts.
ERROR: If you think that this error shouldn't occur, please fill up bug report here: https://github.com/maciejtreder/ng-toolkit/issues/new
INFO: stacktrace has been sent to tracking system.
Nothing to be done.
help me please
After running once ng add #ng-toolkit/universal we got our initial files generated and retrieved this error.
For me this solution worked:
Delete app.browser.module.ts
In main.ts you need to insert AppModule (instead of AppBrowserModule) in the .bootstrapModule() function.
Now your main.ts looks like this:
import { AppBrowserModule } from '.././src/app/app.browser.module';
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));
});
Add bootstrap: [AppComponent] to your app.module.ts #NgModule configuration
Run ng add #ng-toolkit/universal
This will run through successfully but ng-toolkit will leave an invalid line in app.module.ts .withServerTransition({appId:''}), which you can simply delete. Afterwards you can run ng run build:prod and deploy.
If this retrieved an error check if bootstrap: [AppComponent] exists in your app.module.ts and run ng run build:prod again.
You should check where you included Bootstrap.
ERROR: Bootstrap not found in ./src/.././src/app/app.browser.module.ts.
This error points that, it can not find the right path.