I'm using Angular 4 and angular/material. MdToolbar works fine, but when I add MdSidenav to my app template just like the documentation states Node gives me a ReferenceError: navigator is not defined. anyone experience anything similar?
src/app.component.html
<md-sidenav-container>
<layout-header>
<nav-bar></nav-bar>
<!-- TODO: Create nav component -->
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
<a routerLink="/lazy">Lazy</a>
<a routerLink="/lazy2">Lazy 2</a>
<a routerLink="/user-profile">User Profile</a>
<a routerLink="/test-rest">Test Rest</a>
<a routerLink="/test-route-params">Test Route Params</a>
</layout-header>
<md-sidenav #sidenav class="sidenav">
<ul>
<li>Search</li>
<li>Start a Group</li>
<li>App Settings</li>
<li>About</li>
<li>Help</li>
<li>Logout</li>
</ul>
</md-sidenav>
<!--primary router outlet: a dynamic component that the router uses to
display-->
<router-outlet></router-outlet>
<!-- TODO: Issue with event not emitting via onShown/onHidden -->
<!-- Ref: https://github.com/valor-software/ngx-bootstrap/issues/1886 -->
<app-dialog (dynamicComponent)="onDialogLoad($event)" (onShown)="test()"
(onHidden)="test2()"></app-dialog>
<!--TODO: example; Delete-->
<button (click)="create()">Create</button>
<simple-notifications [options]="options"></simple-notifications>
<layout-footer></layout-footer>
</md-sidenav-container>
src/app.module.ts
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
TransferHttpModule,
NgReduxModule,
MdToolbarModule,
MdSidenavModule,
MdIconModule,
MdCardModule,
MdInputModule,
MdButtonModule,
DialogModule.forRoot([LoginForm]),
SimpleNotificationsModule.forRoot(), // TODO: remove; testing only
RouterModule.forRoot(AppRoutes)
],
providers: [ AuthGuard, DialogService ],
declarations: [
AppComponent,
HomeView,
AboutComponent,
HeaderComponent,
FooterComponent,
NavBarComponent,
LoginForm,
SideNavComponent
],
exports: [ AppComponent ],
bootstrap : [ AppComponent ]
})
export class AppModule {}
NodeJS error
ERROR { ReferenceError: navigator is not defined
at new Platform (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/material/bundles/material.umd.js:3396:36)
at ServerAppModuleInjector.get (ng:///ServerAppModule/module.ngfactory.js:177:61)
at ServerAppModuleInjector.get (ng:///ServerAppModule/module.ngfactory.js:182:120)
at ServerAppModuleInjector.get (ng:///ServerAppModule/module.ngfactory.js:187:108)
at ServerAppModuleInjector.getInternal (ng:///ServerAppModule/module.ngfactory.js:477:56)
at ServerAppModuleInjector.NgModuleInjector.get (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:3563:44)
at resolveDep (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:10931:45)
at createClass (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:10795:147)
at createDirectiveInstance (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:10628:37)
at createViewNodes (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:11978:49)
at callViewAction (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:12348:13)
at execComponentViewsAction (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:12287:13)
at createViewNodes (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:12005:5)
at createRootView (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:11883:5)
at Object.createProdRootView [as createRootView] (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:12461:12)
at ComponentFactory_.create (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:9819:46)
at ComponentFactoryBoundToModule.create (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:3434:29)
at ApplicationRef_.bootstrap (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:5016:57)
at /Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:4803:79
at Array.forEach (native)
at PlatformRef_._moduleDoBootstrap (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:4803:42)
at /Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:4765:27
at ZoneDelegate.invoke (/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:365:26)
at Object.onInvoke (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:4132:37)
at ZoneDelegate.invoke (/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:364:32)
at Zone.run (/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:125:43)
at /Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:758:57
Just exporting MdSidenavModule from NgModule might do the trick in your case.
I had luck breaking out the Material modules(the ones used across multiple components) into their own module, which cleaned up app.module a bit. Then did an import AND export in app.module, something like this:
material.module.ts
import { MdSidenavModule } from '#angular/material';
.
.
const MATERIAL_MODULES = [
MdSidenavModule,
.
.
];
#NgModule({
imports: MATERIAL_MODULES,
exports: MATERIAL_MODULES
})
export class MaterialModule { }
app.module
import { MaterialModule } from '../material.module';
.
.
#NgModule({
imports: [
MaterialModule,
.
.
],
exports: [ MaterialModule ],
})
Related
I import a module in other module but a can access the service in other context
The module when i exported
#Module({
controllers: [ModuleController],
providers: [
ModulesAcessService,
ModulesRepository,
ModulesService
],
exports: [ModulesService, ModulesRepository, ModulesAcessService],
imports: [
TypeOrmModule.forFeature([ModuleEntity]),
forwardRef(() => CoursesModule),
forwardRef(() => LessonsModule)
]
})
export class ModulesModule { }
The module when i imported - ModulesModule
#Module({
controllers: [LessonsController],
providers: [
LessonsService,
LessonsAcessService,
LessonsRepository,
UserLessonsService,
UserLessonsRepository,
UserLessonsSubscriber,
UserLessonsEvents
],
exports: [LessonsRepository,LessonsService, LessonsAcessService, UserLessonsService],
imports: [
TypeOrmModule.forFeature([Lesson, UserLesson]),
forwardRef(() => CoursesModule),
forwardRef(() => ModulesModule)
]
})
export class LessonsModule { }
The error message
Nest can't resolve dependencies of the LessonsService (LessonsAcessService, UserLessonsService, UrlHelper, LessonsRepository, CoursesService, ?). Please make sure that the argument dependency at index [5] is available in the LessonsModule context.
The import in my service - I can't access the ModulesService.
import { ModulesService } from '../modules/modules.service';
#Injectable()
export class LessonsService {
constructor(
private lessonsAccessService: LessonsAcessService,
private userLessonsService: UserLessonsService,
private urlHelper: UrlHelper,
private lessonsRepository: LessonsRepository,
private coursesService: CoursesService,
private modulesService: ModulesService
) { }
...
Node version 14.7.0
Nestjs version 7
You need to make use of the forwardRef for the services too, not just the modules. In your ModulesService use #Inject(forwardRef(() => LessonsService)) on the lessonsService. In the LessonsService use #Inject(forwardRef(() => ModulesService)) on the modulesService.
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
I was coding watching a Brad Traversy tutorial. and I did exactly as it is said.
this is my 'app.module.ts'.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {RouterModule, Routes} from '#angular/router';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { HomeComponent } from './components/home/home.component';
import { ProfileComponent } from './components/profile/profile.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
const appRoutes: Routes = [
{path:'', component: HomeComponent},
{path:'register', component: RegisterComponent},
{path:'login', component: LoginComponent},
{path:'dashboard', component: DashboardComponent},
{path:'profile', component: ProfileComponent}
]
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
RegisterComponent,
HomeComponent,
ProfileComponent,
DashboardComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes) // appRoutes: an object
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
this is my navbar component
<li><a class="nav-link" [routerLink] = "['/']" [routerLinkActive]="
['active']">Home</a></li>
<li><a class="nav-link" [routerLink] = "['/login']" [routerLinkActive]="
['active']">Login</a></li>
I also added
<base href="/">
to the index.html file.
When I remove the RouterLink part the pages are working good.it displays the content inside the components when I give the path in the URL.
I checked in several questions. but I have done everything, I can't find an answer.
write routerLinkActive as bellow..remove those brackets
<li>
<a class="nav-link" [routerLink] = "['/']" routerLinkActive="active">Home</a>
</li>
<li>
<a class="nav-link" [routerLink] = "['/login']" routerLinkActive="active">Login</a>
</li>
official documentation :- https://angular.io/guide/router
Update: To improve on my answer. What you're trying to do is call a directive by adding [routerLink] with braces around. Then passing it a string which will evaluate as javascript to a route. This will not work, so you need to pass it valid javascript, e.g. an array of routes.
Try removing the slash and quotes from the routerlink like this:
<li><a class="nav-link" [routerLink]=['/'] [routerLinkActive]=['active']>Home</a></li>
<li><a class="nav-link" [routerLink]=['/login'] [routerLinkActive]=['active']>Login</a></li>
As described here:
Feel free to comment if this doesn't work and I will update my answer.
Kind regards Chris
I have an error in regards with the angular 2 when I implement with autocomplete on material design and I have no idea why because it is my first time implementing it practicing with backend asp.net core. I tried installing some of the ng2 libraries but does not work at all. Here is my code below:
import { Component } from '#angular/core';
import { WebServiceComponents } from '../WebService/web.service';
import { FormControl } from '#angular/forms';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
#Component({
selector: 'new-user-account',
template: `
<md-card class="card-margin">
<md-card-content>
<md-input-container>
<input mdInput placeholder="Select Employee" [mdAutocomplete]="auto" [formControl]="UserAccountCtrl" /><br />
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let userAccount of filterUserAccount | async" [value]="userAccount">
{{userAccount.username}}
</md-option>
</md-autocomplete>
<md-input-container>
<input mdInput placeholder="Username" /><br />
</md-input-container>
</md-card-content>
</md-card>
`
})
export class NewUserAccountComponent{
UserAccountCtrl: FormControl;
filterUserAccount: any;
async ngOnInit(){
var response = await this.webService.getUserAccounts();
this.userAccounts = response.json();
}
userAccounts = [];
constructor(private webService : WebServiceComponents){
this.UserAccountCtrl = new FormControl();
this.filterUserAccount = this.UserAccountCtrl.valueChanges
.startWith(null)
.map(name => this.filterUserAccount(name));
}
filteredUserAccount(val: string) {
return val ? this.userAccounts.filter(s => new RegExp(`^${val}`, 'gi').test(s))
: this.userAccounts;
}
}
And the error as follows below:
zone.js:645 Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("ainer>
<input mdInput placeholder="Select Employee" [mdAutocomplete]="auto" [ERROR ->][formControl]="UserAccountCtrl" /><br />
</md-input-container>
"): ng:///AppModule/NewUserAccountComponent.html#4:93
Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("ainer>
<input mdInput placeholder="Select Employee" [mdAutocomplete]="auto" [ERROR ->][formControl]="UserAccountCtrl" /><br />
</md-input-container>
"): ng:///AppModule/NewUserAccountComponent.html#4:93
at syntaxError (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:1513:34)
at TemplateParser.parse (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:11951:19)
at JitCompiler._compileTemplate (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:25723:39)
at eval (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:25647:62)
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:25647:19)
at createResult (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:25532:19)
at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:391:26)
at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:141:43)
at http://localhost:3002/node_modules/zone.js/dist/zone.js:818:57
at syntaxError (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:1513:34)
at TemplateParser.parse (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:11951:19)
at JitCompiler._compileTemplate (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:25723:39)
at eval (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:25647:62)
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:25647:19)
at createResult (http://localhost:3002/node_modules/#angular/compiler/bundles/compiler.umd.js:25532:19)
at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:391:26)
at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:141:43)
at http://localhost:3002/node_modules/zone.js/dist/zone.js:818:57
at resolvePromise (http://localhost:3002/node_modules/zone.js/dist/zone.js:770:31)
at resolvePromise (http://localhost:3002/node_modules/zone.js/dist/zone.js:741:17)
at http://localhost:3002/node_modules/zone.js/dist/zone.js:818:17
at ZoneDelegate.invokeTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:424:31)
at Zone.runTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:191:47)
at drainMicroTaskQueue (http://localhost:3002/node_modules/zone.js/dist/zone.js:584:35)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:490:25)
I don't know whats going on but I followed the steps in angular material design autocomplete component but it seems not working to me.
Does anyone knows how to fix this issue? And can someone help me with my code? I'm newbie working for fixing this issue for almost 3 hours right now.
Thanks and have a great day!
import FormsModule, ReactiveFormsModule from #angular/forms like below
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
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