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).
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.
I try to build Angular 4 app with server rendering side and language route path. All this base on Angular CLI in 1.5.0-rc1 version.
Everything work OK but I can't solve a problem with language in route.
I have two idea - one to make it like a parameter :lang in URL, but everywhere people advice me to use localize-router plugin. It look very good, but my npm run server can't start properly. In console I get an error:
/home/xxx/Projects/private/angular4-cli-seed/node_modules/localize-router/src/localize-router.config.js:1
(function (exports, require, module, __filename, __dirname) { import { Inject, OpaqueToken } from '#angular/core';
Here is my app-routing.module.ts:
import {NgModule, PLATFORM_ID, Inject, OpaqueToken} from '#angular/core';
import 'zone.js';
import 'reflect-metadata';
import { Routes, RouterModule } from '#angular/router';
import {AboutComponent} from './about/about.component';
import {HomeComponent} from './home/home.component';
import {LocalizeParser, LocalizeRouterModule, LocalizeRouterSettings, ManualParserLoader} from 'localize-router';
import {HttpClientModule, HttpClient} from '#angular/common/http';
import {TranslateService} from '#ngx-translate/core';
import { Observable } from 'rxjs/Observable';
import { Location } from '#angular/common';
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
}
];
export function localizeFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings): LocalizeParser {
const browserLocalizeLoader = new ManualParserLoader(translate, location, settings, ['en', 'pl'], 'pl');
return browserLocalizeLoader;
}
#NgModule({
imports: [
RouterModule.forRoot(routes),
LocalizeRouterModule.forRoot(routes, {
parser: {
provide: LocalizeParser,
useFactory: (localizeFactory),
deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
}
}),
],
exports: [RouterModule]
})
export class AppRoutingModule {
private static TranslateService: any;
}
Do you have any tips how can I solve it? I found some tips for Webpack (to use exclude list), but I want to use CLI because I don't know Webpack too well.
This problem is connected with library type - it's not a commonjs type, but ES6. More about this problem you can read here on GitHub.
To solve it you can contact the author of library what you want to use in Angular 4 Universal (with Angular CLI). They should recompile it in a proper way.
Another solution (more quick to realize) give me a #sjogren on GitHub. You can use babel.js to recompile library during a building process. To do this you should run:
npm install babel-cli --save
npm install babel-preset-env --save
npm install babel-preset-es2015 --save
and add this code in package.json:
"babel": {
"presets": [
"es2015"
]
},
Finally in package.json you should add to your scripts prestart script with code to recompile the library. In my example:
"scripts": {
"prestart": "node node_modules/babel-cli/bin/babel.js node_modules/localize-router --out-dir node_modules/localize-router --presets es2015"
"start": "......"
}
This worked fine for me, and I don't have an Unexpected Token Import error.
I am developing an node app with angular2 and gulp. I have written a component file login.ts as follows:
import {Component, View} from 'angular2/angular2';
import {FormBuilder, formDirectives } from 'angular2/forms';
#Component({
selector: 'login',
injectables: [FormBuilder]
})
#View({
templateUrl: '/scripts/src/components/login/login.html',
directives: [formDirectives]
})
export class login {
}
And my bootstrap.ts file is:
import {bootstrap} from 'angular2/angular2';
import {login} from './components/login/login';
bootstrap(login);
but when I compile these files it gives me the following errors:
client\bootstrap.ts(1,25): error TS2307: Cannot find module 'angular2/angular2'.
client\components\login\login.ts(1,31): error TS2307: Cannot find module 'angular2/angular2
client\components\login\login.ts(2,45): error TS2307: Cannot find module 'angular2/forms'.
Here is my tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"watch": true,
"removeComments": true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}
I have installed the typing for angular2 using:
tsd install angular2 --save
Please help to fix the error.
yups as said by #simon error is in imports. but for further imports i have posted this answer may be this is useful for others too.
import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf NgForm, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http'
update -
#View is no more in angular2 now, so no need to import
import {view} from 'angular2/core'
Update 2
As of angular2 is in RC so there is breaking change in all imports here is the list if all updated imports -
angular2/core -> #angular/core
angular2/compiler -> #angular/compiler
angular2/common -> #angular/common
angular2/platform/common -> #angular/common
angular2/common_dom -> #angular/common
angular2/platform/browser -> #angular/platform-browser-dynamic
angular2/platform/server -> #angular/platform-server
angular2/testing -> #angular/core/testing
angular2/upgrade -> #angular/upgrade
angular2/http -> #angular/http
angular2/router -> #angular/router
angular2/platform/testing/browser -> #angular/platform-browser-dynamic/testing
It changed module just ahead of going beta to
import {Component, View} from 'angular2/core';
FYI: bootstrap also changed to
import {bootstrap} from 'angular2/platform/browser';
as a result a lot of the blog posts on the net are out of date :-(
As per the new release of Angular2 rc1, you can update your package.json to
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
.....
}
In addition to this also import as following in your component or container:
import { Component } from '#angular/core';
import {ROUTER_DIRECTIVES, Router, RouteParams} from '#angular/router-deprecated';
Please note that as form Angular2 final release the correct answer is this.
import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular/core';
import {bootstrap} from 'angular/platform/browser';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf NgForm, Control, ControlGroup, FormBuilder, Validators} from 'angular/common';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular/router';
import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular/http'
This is true as said in yups update 2 from above
angular2/core -> #angular/core
angular2/compiler -> #angular/compiler
angular2/common -> #angular/common
angular2/platform/common -> #angular/common
angular2/common_dom -> #angular/common
angular2/platform/browser -> #angular/platform-browser-dynamic
angular2/platform/server -> #angular/platform-server
angular2/testing -> #angular/core/testing
angular2/upgrade -> #angular/upgrade
angular2/http -> #angular/http
angular2/router -> #angular/router
angular2/platform/testing/browser -> #angular/platform-browser-dynamic/testing
You are trying to access Component from wrong/old directory of node_modules.
Please access Component from
import { Component, OnInit } from '#angular/core';
instead of : import { Component, View } from 'angular2/angular2';
AND
Access bootstrap from bellow path :
import { bootstrap } from 'angular2/platform/browser';
you have to Update Angular2 version in final version --
And then use like ----
import { Component } from '#angular/core';
there is a updated library like --- '#angular/core'
'angular2/angular2' is not a valid dependencies of angular2
you have to first check package.json file "#angular/core" exist or not
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "2.0.0",
"#angular/router-deprecated": "2.0.0",
"#angular/upgrade": "2.0.0",
.....
}
see the component file like this and also you have too use formGroup as belove
import { Component, OnInit, DoCheck } from '#angular/core'
import { Router } from '#angular/router'
import { FormBuilder, FormGroup, Validators, FormControl } from '#angular/forms'
#Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.scss'],
})
export class UserProfileComponent implements OnInit, DoCheck {
profileForm: FormGroup
constructor(private fb: FormBuilder) {
this.profileForm = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', Validators.required],
mobileNo: ['', Validators.required]
});
}
than you have to import ReactiveFormsModule in app.module.ts file
import { ReactiveFormsModule } from '#angular/forms';
without ReactiveFormsModule formGroup not work it make error
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { UserProfileComponent } from './user-profile.component';
import { UserProfileRoutingModule } from './user-profile-routing.module';
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
imports: [
CommonModule,
UserProfileRoutingModule,
ReactiveFormsModule
],
declarations: [UserProfileComponent]
})
The best way to kick of angular2 project is using Angular CLI.
The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!
please check this for more details.
import from ''angular2/angular2' was in previous version which no longer supported now .So Now we have to import the same from 'angular2/core'.For detail reference
use (https://angular.io/guide/quickstart)
import {Component} from "#angular/core";
#Component({
selector: "userForm",
template: '<div><input type="text" name="name" [disabled]="flag"/></div>'
});
export class userForm{
public flag = false; //boolean value: true/false
}
First update your angular2 liberies at packege.json.
Second
import {Component} from "#angular/core";
import {FormBuilder } from "#angular/forms";
#Component({
selector: "login",
providers: [FormBuilder],
templateUrl: "/scripts/src/components/login/login.html"
})
export class login {
}