I'm trying to use angular materials horizontal stepper in my app. I found it here https://material.angular.io/components/stepper/overview.
But when I import it I get this error.
ERROR in Error: Unexpected directive 'MdHorizontalStepper in /var/www/project/desktop/node_modules/#angular/material/stepper/typings/index.d.ts' imported by the module 'MaterialModule in /var/www/project/desktop/src/app/material/material.module.ts'. Please add a #NgModule annotation.
at Error (native)
at syntaxError (/var/www/project/desktop/node_modules/#angular/compiler/bundles/compiler.umd.js:1729:34)
at /var/www/project/desktop/node_modules/#angular/compiler/bundles/compiler.umd.js:15582:44
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (/var/www/project/desktop/node_modules/#angular/compiler/bundles/compiler.umd.js:15565:49)
at addNgModule (/var/www/project/desktop/node_modules/#angular/compiler/bundles/compiler.umd.js:24408:58)
at /var/www/project/desktop/node_modules/#angular/compiler/bundles/compiler.umd.js:24419:14
at Array.forEach (native)
at _createNgModules (/var/www/project/desktop/node_modules/#angular/compiler/bundles/compiler.umd.js:24418:26)
at analyzeNgModules (/var/www/project/desktop/node_modules/#angular/compiler/bundles/compiler.umd.js:24293:14)
at analyzeAndValidateNgModules (/var/www/project/desktop/node_modules/#angular/compiler/bundles/compiler.umd.js:24303:35)
at AotCompiler.analyzeModulesAsync (/var/www/project/desktop/node_modules/#angular/compiler/bundles/compiler.umd.js:23937:46)
at CodeGenerator.codegen (/var/www/project/desktop/node_modules/#angular/compiler-cli/src/codegen.js:32:14)
at Function.NgTools_InternalApi_NG_2.codeGen (/var/www/project/desktop/node_modules/#angular/compiler-cli/src/ngtools_api.js:73:30)
at _donePromise.Promise.resolve.then (/var/www/project/desktop/node_modules/#ngtools/webpack/src/plugin.js:386:44)
material.module.ts (I created this file to include all the material modules in one place)
```
import { NgModule } from '#angular/core';
import {
MdButtonModule,
MdMenuModule,
MdToolbarModule,
MdIconModule,
MdCardModule,
MdHorizontalStepper,
} from '#angular/material';
#NgModule({
imports: [
MdButtonModule,
MdMenuModule,
MdToolbarModule,
MdIconModule,
MdCardModule,
MdHorizontalStepper,
],
exports: [
MdButtonModule,
MdMenuModule,
MdToolbarModule,
MdIconModule,
MdCardModule,
MdHorizontalStepper,
]
})
export class MaterialModule {}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { RegisterComponent } from './components/register/register.component';
#NgModule({
declarations: [
AppComponent,
RegisterComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MaterialModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
You can't import directive in angular module only #NgModule
So it should be:
import { MdStepperModule } from '#angular/material'
#NgModule({
imports: [
...
MdStepperModule
]
...
})
Plunker Example
Related
I have angular universal + pwa + ngx-translate app and now I have a little glitch/bug. When i load my app i can see for like 300-500ms all untranslated texts (keys) like common.back, common.nextand then they change to translation values like next and back.
How to load translation before page load on angular universal ?
This is my setup :
app.module :
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
imports: [
...
TransferHttpCacheModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
...
]
app.server.module :
import { NgModule } from '#angular/core';
import { ServerModule, ServerTransferStateModule } from '#angular/platform-server';
import { BrowserModule } from '#angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
#NgModule({
imports: [
AppModule,
ServerModule,
ServerTransferStateModule,
BrowserModule.withServerTransition({ appId: 'autorent' }),
],
bootstrap: [AppComponent],
})
export class AppServerModule { }
app.browser.module :
import { NgModule } from '#angular/core';
import { BrowserModule, BrowserTransferStateModule } from '#angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '#angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [
AppModule,
BrowserModule.withServerTransition({ appId: 'autorent' }),
BrowserTransferStateModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
BrowserAnimationsModule
],
bootstrap: [AppComponent],
})
export class AppBrowserModule { }
If you need another info, which I doubt, just write in comments and I will provide.
I'm using the RouterModule and have a problem with the routerLinks.
The routerLinks doesn't work (the anchor isn't clickable) because they are in a child module and I don't know how to fix this problem.
Hierarchy:
App.Module (router-outlet) -> Elements Module -> Navi Module (routerLinks)
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { HttpClientModule } from '#angular/common/http';
import { ElementsModule } from './elements/elements.module';
import { LandingComponent } from './pages/landing.component';
import { GenreComponent } from './pages/genre.component';
import { SinglePostComponent } from './pages/singlepost.component';
import { ListComponent } from './pages/list.component';
import { AppComponent } from './app.component';
import { DataService } from './data.service';
#NgModule({
imports: [
BrowserModule,
ElementsModule,
HttpClientModule,
RouterModule.forRoot([
{path: "", component: LandingComponent},
{path: "post/:id", component: SinglePostComponent},
{path: "lists", component: ListComponent}
], {
useHash: true,
})
],
declarations: [
AppComponent,
LandingComponent,
GenreComponent,
SinglePostComponent,
ListComponent
],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<router-outlet></router-outlet>
navi.componentent.html
<a routerLink="/movies">Movies</a>
In my project I have an module specified for handling routes and that my other modules can import:
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { MainComponent } from './main/main.component';
const routes: Routes = [
{
path: '',
component: MainComponent
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
This is imported by my other modules like:
#NgModule({
declarations: [
AppComponent,
MainComponent
],
imports: [
AppRoutingModule
]
})
export class AppModule {}
I have an Angular 4 application with login and registration page and then we I have this interface to manage my employees and stuff like that.
I want to launch my application on a specific page which is login page, like:
http://localhost:4200/login
How to make login page appear once Angular is started and the URL contains /login segment in it ?
here is my app.module.ts file:
import { UserService } from './user.service';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpModule } from '#angular/http';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatInputModule,MatAutocompleteModule } from '#angular/material';
import { MatFormFieldModule } from '#angular/material';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
// Define the routes
#NgModule({
declarations: [
AppComponent,
UserComponent,
HomeComponent,
LoginComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule ,
RouterModule.forRoot([
{
path: 'home',
component: HomeComponent
},
{
path: 'users',
component: UserComponent
}
{
path: 'login',
component: LoginComponent
}
]),
BrowserAnimationsModule,
MatButtonModule,
MatCardModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatAutocompleteModule
],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }
Use Empty-path route configurations
Add
{path: '' , redirectTo:'/login',pathMatch:'full'} to your routes.
Try this in to your routes
{ path: '**', redirectTo: '/login', pathMatch: 'full' }
I try to create a basic material table in Angular 5.
But I always have the same error:
Error: Uncaught (in promise): TypeError: elementRef is undefined
This error come even when I leave <mat-table></mat-table> totally empty.
Here is my module:
import {NgModule, ViewChild} from '#angular/core';
import { CommonModule } from '#angular/common';
import { MyComponent } from './my_component.component';
import {CdkTableModule} from '#angular/cdk/table';
import { MatCardModule, MatTableModule, MatInputModule, MatButtonModule } from '#angular/material';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
#NgModule({
imports: [
CommonModule,
MatCardModule,
MatTableModule,
MatInputModule,
MatButtonModule,
CdkTableModule,
FormsModule
],
declarations: [
MyComponent
]
})
export class MyComponentModule {
}
HTML, TS and SCSS are exactly the same than the material tutorial.
My component file contains:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<user></user>
`,
})
export class AppComponent {
}
My app.modules :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angluar/forms';
import { AppComponent } from './app.component';
import { UserComponent } from './components/user.component';
#NgModule({
imports: [ BrowserModule ,FormsModule],
declarations: [ AppComponent, UserComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
when i try to compile my code i got this error : error TS2307: Cannot find module 'angular2/forms'
Thanks!
You have a typo in angular:
import { FormsModule } from '#angluar/forms';
should be:
import { FormsModule } from '#angular/forms';
You have errors in your code
check the new one here:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { UserComponent } from './components/user.component';
#NgModule({
imports: [ BrowserModule ,FormsModule],
declarations: [ AppComponent, UserComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }