I'm doing the quickstart tutorial and am encountering some error. The following is my file structure:
//## home/home.component.ts #################
import {Component} from '#angular/core';
#Component({
selector:'home',
template: `
<div>I'm a home component.</div>
`
})
export class HomeComponent{}
//## home/home.module.ts #################
import {NgModule} from "#angular/core";
import {HomeComponent} from "./home.component";
NgModule({
declarations: [HomeComponent],
exports: [HomeComponent]
});
export class HomeModule {
}
//## app.component.ts #################
import {Component} from "#angular/core";
#Component({
selector: 'app',
template: `
<div>I'm the App Component</div>
`
})
export class AppComponent {}
//## app.module.ts #################
import {AppComponent} from "./app.component";
import {BrowserModule} from "#angular/platform-browser";
import {NgModule} from "#angular/core";
import {HomeModule} from "./home/home.module"; //this breaks it
#NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [BrowserModule, HomeModule] //home module breaks it
})
export class AppModule{}
//## main.ts #################
import {platformBrowserDynamic} from "#angular/platform-browser-dynamic";
import {AppModule} from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);
I am confused, as this is a pretty simple example. The Home module is causing the application to fail somehow. It gives the following error:
ZoneAwareErrormessage: "(SystemJS) Cannot set property 'stack' of undefined ... followed by hundreds of lines of the same. Does anyone have any ideas on how to debug errors like these?
If HomeModule is a feature module, change your declaration section to be declarations: [CommonModule, HomeComponent]
I get the same error,and it's cause the zone find some error in my template. I'm in Angular 2.4.1 and zone 0.7.4,try upgrade.
btw,I had set the template property to the url of my template,it's work,so,I think the zone may has a bug or something.
You must import CommonModule in the HomeModule. Your HomeModule code will be like this:
import {NgModule} from "#angular/core";
import {CommonModule} from "#angular/common"; // Add this
import {HomeComponent} from "./home.component";
NgModule({
imports: [CommonModule], // Add this
declarations: [HomeComponent],
exports: [HomeComponent]
});
export class HomeModule { }
I coudn't fix this, but for anyone experiencing the same problem, avoid the quickstart tutorial and use angular-cli to generate things instead. It seems much cleaner and easier to understand when starting out.
ng new new-project --style=sass should sort you out.
Related
i am using angular material table for angular 10 project. I added material table successfully.
but now i am trying to add pagination to my table. therefor i added below code to my component.
import {MatPaginator} from '#angular/material/paginator';
i added above import to my app.module.ts file.
this is the code that i added for my html page to load pagination
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
but this html tag did not work. it occurred error.
please check below image.
my modules
As stated by your IDE, the module doesn't know that component.
The solution is to add it in your app.module.ts (or equivalent depending where your ar ein the app)
You should import the module MatPaginatorModule in your appmodule
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { MatPaginatorModule } from '#angular/material/paginator';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MatPaginatorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Note that i have imported the module and not the component directly
I'm having trouble setting up the dependencies for a component that includes an ng bootstrap modal. The following code is from a test project that isolates the issue. The component works and runs with no errors when the website is served but there seems to be a dependency issue with the tests. I'm using the NgbModal service to open and close the modal within the component. Here's the setup of the component:
#Component({
selector: 'app-main-component',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css'],
providers: [ NgbModal ]
})
export class MainComponent implements OnInit {
constructor(private modalService: NgbModal) { }
and here's where the dependencies are set up in the app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent,
MainComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
bootstrap: [AppComponent]
})
and the dependencies for the testbed are set up in the main.component.ts file here:
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MainComponent ],
imports: [ NgbModule.forRoot(), BrowserModule ],
providers:[ NgbModal ]
})
.compileComponents();
component = TestBed.get(MainComponent);
modalService = TestBed.get(NgbModal);
}));
When I try to run the tests it's giving me this error
Failed: StaticInjectorError(DynamicTestModule)[NgbModal -> NgbModalStack]:
StaticInjectorError(Platform: core)[NgbModal -> NgbModalStack]:
NullInjectorError: No provider for NgbModalStack!
which seems to imply there's a missing dependency. With errors like this in the main app it seems like it's usually caused by the NgbModule.forRoot() not getting imported but it's in the imports for the test.
Thank you for your time.
Turns out the issue wasn't in my main component spec file, it was an issue running the test for my app component spec file. Since the component was used in the main app component it needed to have the same imports in the app component spec file.
I have a module AppModule and another module say FooModule. I have some components in FooModule and I' am loading routes of FooModule in AppModule like any normal app would do.
Following is the sample code for AppModule:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from 'app/components/app';
#NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'foo',
loadChildren: './foo.module#FooModule'
}
])
],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Following is the sample code for FooModule:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'
import { FooComponent } from 'app/components/foo';
#NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: FooComponent
}
])
],
declarations: [FooComponent],
})
export class FooModule {}
Now when I run the app, I' am getting Can't bind to 'ngIf' since it isn't a known property of 'div'. error which as per my understanding shouldn't happen because I' am using BrowserModule in AppModule and loading routes of FooModule in AppModule.
Am I missing something?
I' am using Angular CLI v1.2.0 and Angular 4.2.5.
Edit
I know that to fix this issue I need to import CommonModule in FooModule. But that's exactly why I' am asking this question in first place that when I have imported BrowserModule in AppModule which re-exports CommonModule then why I need to include CommonModule in each individual module?
Thanks
In each feature module, such as your fooModule you need to import CommonModule. It contains the common directives and pipes.
Actually, the BrowserModule imports and re-exports CommonModule, so they export the same functionality.
For more information, see this: https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=2s
UPDATE
Modules are not inherited. To say it another way, you cannot get the functionality of a module unless you import that module or another module that exports it.
As shown in the above diagram... If Shared Module imports Forms Module and App Module imports Shared Module, App Module would not have access to the Forms Module component, directives, and pipes (such as ngModel in this example) unless Shared Module exports Forms Module.
KEY:
Orange lines: Imports
Gray lines: Exports
Blue lines: Declarations
Import CommonModule into FooModule and any other module. BrowserModule imports CommonModule. CommonModule contains *ngIf etc. directives
Trying to better understand the #component selector and template to path my routing to an html file. I am getting errors when trying to simply point to the html file even though it seems I have what I need in my index.ts files. The errors I am getting are:
Looking at the involved files, I am not sure what is wrong. Here is my user.component.ts:
import {Component} from '#angular/core';
#Component({
selector: 'users',
template: require('./components/userMgmt/inviteUser.html')
})
export class userComponent {}
Then my index.ts from the root of app:
import {NgModule} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import 'jquery';
import 'bootstrap';
import 'font-awesome/css/font-awesome.css';
import {routing, RootComponent} from './routes';
import {AppComponent} from './containers/app';
import {HeaderComponent} from './components/header';
import {userComponent} from './components/userMgmt/user.component';
#NgModule({
imports: [
BrowserModule,
routing
],
declarations: [
RootComponent,
AppComponent,
HeaderComponent,
userComponent
],
bootstrap: [RootComponent]
})
export class AppModule {}
And finally, my index.ts from the root of my /src:
import 'core-js/client/shim';
import 'zone.js/dist/zone';
import '#angular/common';
import 'rxjs';
import './index.scss';
import {enableProdMode} from '#angular/core';
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
import {AppModule} from './app';
declare var process: any;
if (process.env.NODE_ENV === 'production') {
enableProdMode();
} else {
Error['stackTraceLimit'] = Infinity; // tslint:disable-line:no-string-literal
require('zone.js/dist/long-stack-trace-zone'); // tslint:disable-line:no-var-requires
}
platformBrowserDynamic().bootstrapModule(AppModule);
Where I am going wrong on this? I don't see any issues. Am I not using template correctly? Seems I should be able to inject html or add a path to the html file, no?
Per the first answer, it fixed part of it, but not understanding why now it doesn't understand the path. The console no longer out puts an error, but the page does not load in the browser. Here is the error:
And here is a screenshot of my file structure:
Looking at your component folder and code. I feel that the path to the component html is incorrect. Try this code and see.
import {Component} from '#angular/core';
#Component({
selector: 'users',
templateUrl: './inviteUser.html'
})
export class userComponent {}
Add moduleID in #component
#Component({
selector: 'users',
moduleId: module.id,
templateUrl: './inviteUser.html'
})
I've an Angular 2 application, using Angular CLI and Webpack, where I'm using a external Angular 2 module called angular2-swiper, it's basically a wrapper to a library called Swiper.
I've to import a module in my AppModule called KSSwiperModule, but when I try to start my server with my code, it give me an error:
UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: KSSwiperModule is not an NgModule
But if I run without the import of this module, the server runs, and I put the import after it's running, it doesn't give any error and execute perfectly. (no, my app can't work without this module).
My code:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {KSSwiperModule} from 'angular2-swiper';
import { AppComponent } from './app.component';
import { SwiperComponent } from './swiper.component';
import { AppRoutingModule } from './app-routing.module';
import { FlickityComponent } from "./flickity.component";
#NgModule({
declarations: [
AppComponent,
SwiperComponent,
FlickityComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
KSSwiperModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Somebody know why it's happening and how to handle it?
I found the answer thanks a guy from my work (Warren)!
The problem is with the angular-cli version. I was using 1.0.0-beta.22-1, when i rolled back to 1.0.0-beta.19-3 it worked smoothly.