I do not understand why I am getting this error:
Error: Unexpected value 'HttpClient' imported by the module 'AppModule'. Please add a #NgModule annotation.
I have tried both:
import { HttpClient } from '#angular/common/http';
and
import { HttpClientModule } from '#angular/common/http';
This is the full error:
Error: Unexpected value 'HttpClient' imported by the module 'AppModule'. Please add a #NgModule annotation.
at syntaxError (http://localhost:8100/build/vendor.js:116430:34)
at http://localhost:8100/build/vendor.js:131184:44
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:131159:49)
at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:150357:87)
at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:150318:36)
at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:150212:37)
at CompilerImpl.compileModuleAsync (http://localhost:8100/build/vendor.js:115251:49)
at PlatformRef.bootstrapModule (http://localhost:8100/build/vendor.js:5952:25)
at Object.491 (http://localhost:8100/build/main.js:2405:109)
Ionic Framework: 3.9.2
Ionic Native: ^2.9.0
Ionic App Scripts: 3.2.4
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 8.10.0
OS: Windows 10
You need import HttpClientModule, example:
import { HttpClientModule } from '#angular/common/http';
#NgModule({
imports: [
BrowserModule,
// import HttpClientModule after BrowserModule.
HttpClientModule,
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
Read: Angula HttpClient
Related
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 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'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.
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 new to ionic and I wan't my sidebar to have a header with the user profile that his/her details is shown like other similar apps depending on who logged in the app. However I encountered this error below.
Runtime error can't resolve all parameters for UserService: (?).
Here is my code below:
import { Injectable } from '#angular/core';
// import { Global } from '../../providers/global';
#Injectable()
export class UserService {
constructor( public storage: Storage
)
{
}
user: any;
token_type: any;
access_token: any;
refresh_token:any;
getAccount(): any{
return this.storage.get('user').then((value) => {
return value;
});
}
}
environment details:
cli packages: (/usr/lib/node_modules)
#ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 7.0.1
local packages:
#ionic/app-scripts : 2.0.2
Cordova Platforms : none
Ionic Framework : ionic-angular 3.5.3
System:
Node : v6.11.1
npm : 3.10.10
OS : Linux 4.10
Looking for help. Thanks in advance.
As pointed out in the comments, UserSerivce is not the problem itself. Instead, it is storage, that is not provided properly. Make sure, that you have imported the Storage module in your AppModule like so:
import { IonicStorageModule } from '#ionic/storage'; // <---- Add this!
#NgModule({
declarations: [
// ...
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot() // <--- Add this!
],
bootstrap: [IonicApp],
entryComponents: [
// ...
],
providers: [
// ...
]
})
export class AppModule {}