Runtime error can't resolve all parameters for UserService: (?) - node.js

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 {}

Related

Angular NPM package using after publishing

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.

Error: Unexpected value 'HttpClient' imported by the module 'AppModule'. Please add a #NgModule annotation

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

Nest.js Type 'DynamicModule' is not assignable to type 'ForwardReference' on nest-modules/mailer

I have an Nest.js application. I wanted to add MailerModule to my app using following link -> https://npm.taobao.org/package/#nest-modules/mailer
However, I just did the following steps:
First, npm install --save #nest-modules/mailer
Second I add app module mail config but it is giving an error here is my app.module.ts:
import { Module } from '#nestjs/common';
import { HandlebarsAdapter, MailerModule } from '#nest-modules/mailer';
#Module({
imports: [
MailerModule.forRootAsync({
useFactory: () => ({
transport: 'smtps://user#domain.com:pass#smtp.domain.com',
defaults: {
from:'"nest-modules" <modules#nestjs.com>',
},
template: {
dir: __dirname + '/templates',
adapter: new HandlebarsAdapter(), // or new PugAdapter()
options: {
strict: true,
},
},
}),
}),],
})
export class ApplicationModule {}
Now I can't compile because it is saying that :
TS2345: Argument of type '{ imports: DynamicModule[]; }' is not assignable to parameter of type 'ModuleMetadata'.   Types of property 'imports' are incompatible.     Type 'DynamicModule[]' is not assignable to type '(Type | DynamicModule | Promise | ForwardReference)[]'.       Type 'DynamicModule' is not assignable to type 'Type | DynamicModule | Promise | ForwardReference'.         Type 'DynamicModule' is not assignable to type 'ForwardReference'.           Property 'forwardRef' is missing in type 'DynamicModule'.
Perhaps check what version of nest you're using, this issue may be resolved in versions of nestjs 6+:
https://github.com/nestjs/nest/issues/669
I had a similar problem. I started to make a new project based on the old one. After installing the modules, this error appeared. The problem lay in private modules. They did not install without package-lock.json.

Angular 6 Bootstrap not found in ./src/.././src/app/app.browser.module.ts

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.

unexpected token import when use localize-router in Angular 4 Universal app

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.

Resources