In angular 1.4 i was using ng6 boilerplate and it was generating an awesome structure, like:
app
common
components
services
etc...
Now i'm trying to learn angular2 with typescript. I'm using Angular CLI.
And i wanna port some of structure from angular 1.4: i mean to separate, for example, select-component from customer-component etc.
And i created such structure:
components - is a module, customer is a module, list - is a component.
How in my app.component.html i can use list-component? Like:
<app-customer-list></app-customer-list>
I have troubles with importing modules & components.
I do it in a such way:
**app.module.ts**
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
declarations: []
})
export class ComponentsModule { }
--
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
--
**list.component.ts**
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-customer-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
What i do wrong? How can i correctly import them?
You are forgetting to export your components/modules in those modules that you are sharing with other modules:
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent],
exports: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
exports: [CustomerModule]
declarations: []
})
Related
I am using angular, and I have this two script here inside index.html, theses scripts are used in the navbar component ( this navebar is inside "shared module" ,
in app.module :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
//modules
import { SharedModule } from './shared/shared.module';
#NgModule({
declarations: \[
AppComponent
\],
imports: \[
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
SharedModule,
\],
providers: \[\],
bootstrap: \[AppComponent\]
})
export class AppModule { }
in app.routing.module
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { FeaturesComponent } from './features/features.component';
const routes: Routes = \[
{
path: 'feature',
component: FeaturesComponent,
loadChildren: () =\> import('./features/features.module').then(m =\> m.FeaturesModule) },
\];
#NgModule({
imports: \[RouterModule.forRoot(routes)\],
exports: \[RouterModule\]
})
export class AppRoutingModule { }
in features module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FeaturesRoutingModule } from './features-routing.module';
import { FeaturesComponent } from './features.component';
mport { SharedModule } from '../shared/shared.module';
//component
import { DashboardComponent } from './dashboard/dashboard.component';
#NgModule({
declarations: \[
FeaturesComponent,
DashboardComponent
\],
imports: \[
CommonModule,
FeaturesRoutingModule,
SharedModule
\]
})
export class FeaturesModule { }
so when i use <app-navbar></app-navbar> in app.component.html everything works fine
bu when i use <app-navbar></app-navbar> in features.component.html the script used in the navbar is not working like i can see the navbar and all but the script declared in the index is not working
I want the <app-navbar> in my features module
Due to the requirements of project I need to send data value dataOne in app.component.ts to its app.module.ts so that I can store it in variable moduleValue. Please refer code below and suggest how can achieve this transfer of data within files.
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'formcheck';
dataOne: any;
getValues(val: any) {
console.warn(val);
this.dataOne = val;
}
}
app.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
let moduleValue: any;
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
}
I'd suggest that you declare a variable or an observable in a service, however, since you mentioned that you need to do this within the same files you might want to export a variable from your component and import it into your module like so:
app.component.ts
export class AppComponent {
title = 'formcheck';
dataOne: any;
getValues(val: any) {
console.warn(val);
this.dataOne = val;
DATA = this.dataOne;
}
}
export var DATA = '';
app.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DATA } from './app.component';
let moduleValue: any;
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
}
Here is the solution using service, I used BehaviorSubject for dynamic updation of value.
https://stackblitz.com/edit/angular-9pitmh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fdata.service.ts,src%2Fapp%2Fhello.component.ts
Error
compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden">
I have a NavbarComponent and a FooterComponent that I want to move into the SharedModule, to keep the root app.module cleaner.
app.module
import { AdminComponent } from './admin/admin.component';
// import { NavbarComponent } from './navbar/navbar.component';
// import { FooterComponent } from './footer/footer.component';
// Modules
import { DashboardModule } from './dashboard/dashboard.module';
import { HomeModule } from './home/home.module';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
RegisterComponent,
PasswordResetComponent,
ResetPasswordComponent,
AdminComponent,
// NavbarComponent,
// FooterComponent,
share.module
However, once I moved those components into here, and update their paths correctly ./ -> ../ the app breaks.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { NavbarComponent } from '../navbar/navbar.component';
import { FooterComponent } from '../footer/footer.component';
import { TermsComponent } from './terms.component';
import { PageNotFoundComponent } from './not-found.component';
import { PrivacyPolicyComponent } from './privacy-policy.component';
#NgModule({
imports: [
CommonModule
],
declarations: [
NavbarComponent,
FooterComponent,
TermsComponent,
PageNotFoundComponent,
PrivacyPolicyComponent
]
})
export class SharedModule { }
navbar.component.ts
import { Component, OnInit } from '#angular/core';
import { AuthService } from '../auth.service';
import { environment } from '../../environments/environment';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
isHidden = true;
oauthUrl = this.authService.generateOauthUrl();
constructor(public authService: AuthService) { }
ngOnInit() {
}
logout() {
sessionStorage.clear();
}
}
Then a couple of lines with the [ngbCollapse] in navbar.component.html
<div *ngIf="!authService.isLoggedIn()" class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isHidden">
I think this has something to do with the relative paths, any ideas?
To use ng-bootstrap components and directives in Angular templates, you need to import the NgbModule. In your case, you should import it in the SharedModule. Also, in order to use the shared components in other parts of the application, you should export them from the SharedModule and import the SharedModule in the modules when the components are to be used.
shared.module.ts
...
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
imports: [
CommonModule,
NgbModule
],
declarations: [
NavbarComponent,
FooterComponent,
TermsComponent,
PageNotFoundComponent,
PrivacyPolicyComponent
],
exports: [
NavbarComponent,
FooterComponent,
TermsComponent,
PageNotFoundComponent,
PrivacyPolicyComponent
]
})
export class SharedModule { }
app.module.ts
import { SharedModule } from './shared/shared.module';
...
#NgModule({
imports: [
SharedModule,
...
],
...
})
Note: if you want to use ng-bootstrap components and directives in templates outside of the SharedModule, you should add NgbModule to the exports of the SharedModule.
To work with ng-bootsrap you should add this dependency first :
ng add #ng-bootstrap/ng-bootstrap
source: https://ng-bootstrap.github.io/#/home
then imporst the module as follows :
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
imports: [
CommonModule,
NgbModule
],
...
I am getting error in module not found error I already install that module .
here is my code
https://stackblitz.com/edit/angular-bup8gb
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http'
import { DataService } from './dataservice'; // our custom service, see below
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule ,HttpClientModule],
providers: [DataService],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I am adding a new user component and also import in app.module file but when run server user.component js file not created
folder structure
typescript
components
user
user.component.ts
app.component.ts
app.module.ts
main.ts
app.module.js
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';
#NgModule({
imports: [ BrowserModule ],
declarations: [
AppComponent,
UserComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
user.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'user-listing',
template: '<h4>Users here</h4>'
})
export class UserComponent {
}