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.
Related
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'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
I'm using angular 4, here is the problem I have proposal-list component, and I would like to use accounting-js from npmjs for accounting-js and link documentation how to use the function, I installed using
npm install accounting-js
here is my proposal-list.component.ts
import { Component, OnInit } from '#angular/core';
import { formatNumber } from 'accounting-js/lib/formatNumber.js';
#Component({
selector: 'app-proposal-list',
templateUrl: './proposal-list.component.html',
styleUrls: ['./proposal-list.component.css']
})
export class ProposalListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
my question how I can use the function inside formatNumber.js?
I tried to use in proposal-list.component.html
total money = {{formatNumber(1000500.65)}}
but it's not showed up, but no error message.
addional info for problem
here is my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AlertModule } from 'ngx-bootstrap';
import { BsDropdownModule } from 'ngx-bootstrap';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { AppRoutingModule } from './app-routing.module';
import { DocumentsComponent } from './documents/documents.component';
import { ProposalListComponent } from './proposal/proposal-list/proposal-list.component';
import { ProposalShowComponent } from './proposal/proposal-show/proposal-show.component';
import { ProposalNewComponent } from './proposal/proposal-new/proposal-new.component';
#NgModule({
declarations: [
AppComponent,
HomepageComponent,
DocumentsComponent,
ProposalListComponent,
ProposalShowComponent,
ProposalNewComponent
],
imports: [
AlertModule.forRoot(),
BsDropdownModule.forRoot(),
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
you should be doing it in your ts file and if you want to do it in your html then you have to define a function in your ts. Try this.
import { Component, OnInit } from '#angular/core';
import { formatNumber } from 'accounting-js/lib/formatNumber.js';
#Component({
selector: 'app-proposal-list',
templateUrl: './proposal-list.component.html',
styleUrls: ['./proposal-list.component.css']
})
export class ProposalListComponent implements OnInit {
private money: number ;
constructor() { }
ngOnInit() {
this.money = formatNumber(1000500.65)
}
}
and in your html
total money = {{money}}
but if you want to use it on the fly, you can create a custom pipe using FormatNumber function
import { Pipe, PipeTransform } from '#angular/core';
import { formatNumber } from 'accounting-js/lib/formatNumber.js';
#Pipe({name: 'formatNumber'})
export class FormatNumberPipe implements PipeTransform {
transform(money:number): number {
return formatNumber(money)
}
}
and can use it like
total money = 1000500.65 | formatNumber
Update
You must include your pipe in the declarations array of the AppModule.
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { FormatNumberPipe} from './pipe.component';// whatever the name of your pipe component
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule
],
declarations: [
AppComponent,
FormatNumberPipe// **<-- this guy**
]
......
if the import is a problem then you need to think about these below stuffs.
wat is the export type of the function in side your js file like UMD, AMD, es2015, etc
then you need to understand which types of module is imported in which way in typescript.
once you imported the module/function you can then call them from your typescript
like you can import open function import * as services from 'thisService'
But if that function is inside a module, you need to import it from the module like imort { service} from 'thisServiceModule'.
Hope it helps
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 { }
Env:
Angular2-webpack bolierplate : https://github.com/preboot/angular2-webpack
nodejs 6.3.1 / npm 3.10.3
When I run a karma test an error occurs but It seems works well while server running.
SUMMARY:
✔ 2 tests completed
✖ 1 test failed
FAILED TESTS:
Home Component
✖ should ...
Chrome 55.0.2883 (Mac OS X 10.12.2)
Error: Template parse errors:
'my-searchbar' is not a known element:
1. If 'my-searchbar' is an Angular component, then verify that it is part of this module.
2. If 'my-searchbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("d="go_mypage" href="/mypage"><img src="/img/mypage-thin.png"></a>
<div class="fold" id="wrapper">
[ERROR ->]<my-searchbar></my-searchbar>
<span>Home Works!</span>
</div>"): HomeComponent#2:2
...
I have looked at several stack overflow questions or other websites related with this error but They were not very helpful.
app.module.ts
import { NgModule, ApplicationRef } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { MypageComponent } from './mypage/mypage.component';
import { HomeModule } from './home/home.module';
import { ApiService } from './shared';
import { routing } from './app.routing';
import { removeNgStyles, createNewHosts } from '#angularclass/hmr';
#NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
routing,
HomeModule
],
declarations: [
AppComponent,
MypageComponent
],
providers: [
ApiService
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(public appRef: ApplicationRef) {}
hmrOnInit(store) {
console.log('HMR store', store);
}
hmrOnDestroy(store) {
let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
// recreate elements
store.disposeOldHosts = createNewHosts(cmpLocation);
// remove styles
removeNgStyles();
}
hmrAfterDestroy(store) {
// display new elements
store.disposeOldHosts();
delete store.disposeOldHosts;
}
}
app.component.html
<main>
<router-outlet></router-outlet>
</main>
./home/home.component.html
<a class="route" id="go_mypage" href="/mypage"><img src="/img/mypage-thin.png"></a>
<div class="fold" id="wrapper">
<my-searchbar></my-searchbar>
<span>Home Works!</span>
</div>
./home/home.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
import { SearchbarComponent } from './searchbar.component';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule
],
declarations: [
HomeComponent,
SearchbarComponent
],
exports: [
HomeComponent,
SearchbarComponent
]
})
export class HomeModule { }
--Update--
./home/searchbar.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-searchbar',
templateUrl: './searchbar.component.html',
styleUrls: ['./style/searchbar.component.scss']
})
export class SearchbarComponent {
searchWord: string;
searchTag: string[];
onKey(event: any) {
console.log(event.key);
}
}
home.component.spec.ts
// This shows a different way of testing a component, check about for a simpler one
import { Component } from '#angular/core';
import { TestBed } from '#angular/core/testing';
import { HomeComponent } from './home.component';
describe('Home Component', () => {
const html = '<my-home></my-home>';
beforeEach(() => {
TestBed.configureTestingModule({declarations: [HomeComponent, TestComponent]});
TestBed.overrideComponent(TestComponent, { set: { template: html }});
});
it('should ...', () => {
const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.nativeElement.children[0].textContent).toContain('Home Works!');
});
});
#Component({selector: 'my-test', template: ''})
class TestComponent { }
The error/warning is explanatory, so pretty much what it says there:
You have created a custom element, <my-searchbar></my-searchbar> which is not a known Angular 2 element, and to suppress the warning add it to schemas in NgModule like so:
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]