I have a new CLI based Angular applicaiton that I am creating. I have followed the instructions on the ng-bootstrap site.
Installed Bootstrap: npm install bootstrap#4.0.0-alpha.6
Installed ng-bootstratp: npm install --save #ng-bootstrap/ng-bootstrap
Made sure my angular version was up to date "4.1.1"
Setup the app.module.ts correctly (I think)
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { FileDataService, FILE_UPLOAD_URL } from './file-data.service';
import { AppComponent } from './app.component';
import { FileDetailComponent } from './file-detail/file-detail.component';
import { FileListComponent } from './file-list/file-list.component';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule } from '#angular/router';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent,
FileDetailComponent,
FileListComponent,
NavbarComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgbModule.forRoot(),
RouterModule.forRoot([
{
path: 'filelist',
component: FileListComponent
}
]),
],
providers: [ FileDataService,
{ provide: FILE_UPLOAD_URL, useValue: 'http://localhost:8008' }
],
bootstrap: [AppComponent]
})
export class AppModule { }
The CSS is being applied correclty and looks fine. The issue is that none of the javascript is getting executed. For example the toggle for the menu when it goes down to the hamberger does not work. Alerts that are supposed to be dismissable do not react to clicking the "X". I am not sure how to fix this. I don't have any errors in console.
Thanks for any help.
Related
I am going through and Angular Basics course on Simplilearn.com and am on the Angular Forms lesson. When I hit submit, the page refreshes automatically and nothing shows in the console. Also none of the CSS is showing.
.html file:
.html file
.ts file:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-form-component',
templateUrl: './form-component.component.html',
styleUrls: ['./form-component.component.css']
})
export class FormComponentComponent{
submit(login: any){
console.log("form submitted", login);
}
}
.css file:
div{
text-align: center;
}
label{
text-align: left;
}
app.module.ts file:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormComponentComponent } from './form-component/form-component.component';
import { FormsModule } from '#angular/forms';
#NgModule({
declarations: [
AppComponent,
FormComponentComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
According to the lesson, the message "form submitted" as well as the form info should be visible in the console without the page reloading. All of the text should be in the middle of the page.
Importing ReactiveFormsModule didn't change anything.
I have separated routing for modules.
This is my app.module.ts
import { NgModule, Component } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule } from '#angular/router';
import { AppComponent } from "./app.component";
import appRoutes from "./app.routing";
import { HomeComponent } from "./app.routing";
#NgModule({
imports: [ BrowserModule, appRoutes ],
declarations: [ AppComponent, HomeComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
This is my app.routing.ts
import { RouterModule } from '#angular/router';
import { AppComponent } from "./app.component";
import { Component } from "#angular/core";
#Component({
template : `I am from home`
})
export class HomeComponent {}
const routes = [
{
path : "",
component : HomeComponent
},
{
path : "contact",
loadChildren : "app/contact/contact.module"
}
];
export default RouterModule.forRoot(routes);
This is my contact.module.ts
import { NgModule } from "#angular/core";
import { CommonModule } from "#angular/common";
import { RouterModule } from "#angular/router";
import { ContactComponent } from "./contact.component";
const routes = [
{path : "contact", component : ContactComponent}
];
#NgModule({
imports: [ CommonModule, RouterModule.forChild(routes) ],
declarations: [ ContactComponent ],
})
export default class ContactModule {
}
HomeComponent link is working fine. But If I contact route no contents are displayed in browsers
I cannot find what the issue is. Any help is greatly appreciated.
Thanks in advance.
You must specify the name of the module you're trying to load:
loadChildren : "app/contact/contact.module#ContactModule"
I have started a Visual Studio Community 2017 project using the Angular Single Page Application (SPA) template, as described in the .NET Web Development and Tools Blog:
https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/
2-way data binding using [(ngModel)] is not working.
For example:
In login.component.html:
<input [(ngModel)]="x" name="x"/>
<h1>{{x}}</h1>
In login.component.ts:
export class LoginComponent {
x = 5;
}
Result:
When I change the value in the input box, the text in the h1 tag should change as well. But it doesn't change.
I have already tried importing the FormsModule from #angular/forms and adding FormsModule to the imports for the #NgModule decorator in app.module.ts as noted here: Angular 2 two way binding using ngModel is not working.
More info (added 2017-06-12):
Note that the app module is divided up into three separate files
app.module.shared.ts:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from
'./components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component';
//dcowan: for login page
import { TimeEntryComponent } from
'./components/timeentry/timeentry.component'; //dcowan: for time entry page
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
LoginComponent, //dcowan: for login page
TimeEntryComponent //dcowan: for time entry page
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent }, //dcowan: for login page
{ path: 'timeentry', component: TimeEntryComponent }, //dcowan: for time entry page
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
};
app.module.client.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
//import { FormsModule } from '#angular/forms';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { sharedConfig } from './app.module.shared';
// dcowan: Imports for loading & configuring the in-memory web api
//import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
//import { InMemoryDataService } from './in-memory-data.service';
import { DemoDbService } from './demo-db.service';
#NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
BrowserModule,
//FormsModule,
FormsModule,
HttpModule,
...sharedConfig.imports
],
providers: [DemoDbService,//dcowan: Dovico Web API
{ provide: 'ORIGIN_URL', useValue: location.origin }
]
})
export class AppModule {
}
app.module.server.ts:
import { NgModule } from '#angular/core';
import { ServerModule } from '#angular/platform-server';
import { sharedConfig } from './app.module.shared';
import { FormsModule } from '#angular/forms';
#NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
FormsModule,
ServerModule,
...sharedConfig.imports
]
})
export class AppModule {
}
I am experiencing the same. Temporarily, I am breaking up 2 way binding into attribute and event binding.
<input [value]="x" (input)="x=$event.target.value">
<h1>{{x}}</h1>
I have this error too. Try to import your FormsModule in the app.module.shared instead of app.module.server and app.module.client
I fixed it like this using (keyup) and [ngModel]
(keyup)="onKey($event)"
[ngModel]="model.input"
in keyup we update model.input
public onKey(event: any) {
this.model.input = event.target.value;
}
If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
this code with property name:
<input name="nome" [(ngModel)]="nome" />
this code without property name:
<input [(ngModel)]="nome" [ngModelOptions]="{standalone: true}" />
In setuping angularfire2 documentation when I import AngularFireDatabaseModule,ngularFireAuthModule in ng module there is this bug :
cannot compile tns_modules/angularfire2/database.js.
What is the problem?
app.module.ts :
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppComponent } from "./app.component";
#NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [NativeScriptModule,
AngularFireDatabaseModule,
AngularFireAuthModule,
],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}
#Gandom as far as I saw the angularfire2 is not compatible with NativeScript as it depends on som browser specific modules. To use Firebase in NativeScript I would recommend using nativescript-plugin-firebase
The following code works:
/*app.module.ts*/
import { NgModule } from '#angular/core';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { LetterRecall } from './letterRecall/letterRecall.component';
#NgModule({
imports: [BrowserModule, HttpModule],
declarations: [AppComponent, LetterRecall],
bootstrap: [AppComponent],
})
export class AppModule {}
/*app.component.ts*/
import {Component} from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent { }
/*app.component.html*/
<h3>Title</h3>
<letter-recall></letter-recall>
Following the Angular Routing Tutorial here: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
I modified my code to:
/*index.html*/
<head>
<base href="/">
/*app.module.ts*/
import { NgModule } from '#angular/core';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { LetterRecall } from './letterRecall/letterRecall.component';
#NgModule({
imports: [BrowserModule,
HttpModule,
RouterModule.forRoot([
{ path: 'letters', component: LetterRecall }
])],
declarations: [AppComponent, LetterRecall],
bootstrap: [AppComponent],
})
export class AppModule {}
/*app.component.ts*/
import {Component} from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent { }
/*app.component.html*/
<h3>Title</h3>
<a routerLink="/letters">Letters</a>
<router-outlet></router-outlet>
At this point I get the following error:
"Unhandled Promise rejection: Template parse errors: 'router-outlet'
is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module. ....."
I am using the following versions:
"#angular/common": "2.4.0",
"#angular/compiler": "2.4.0",
"#angular/core": "2.4.0",
"#angular/forms": "2.4.0",
"#angular/http": "2.4.0",
"#angular/platform-browser": "2.4.0",
"#angular/platform-browser-dynamic": "2.4.0",
"#angular/router": "3.4.0"
All of the other answers on SO indicate I need to import RouterModule but as you can see above, I am doing this as prescribed in the tutorial.
Any suggestions on where I can look for the source of this error? I started off using John Papa's First Look tutorial on PluralSight but it looks like that code is a little old now. That's when I stripped all of that out and went bare-bones through the tutorial and I get this error... I am not sure where to turn next.
Like Erion said: In my case I did (added) two things in app.component.spec.ts:
import { RouterTestingModule } from '#angular/router/testing';
...
TestBed.configureTestingModule({
imports: [ RouterTestingModule ],
declarations: [
AppComponent
],
}).compileComponents();
Probably I'm late here, but since I got the exaclty same issue and found an answer here.
Are you using angular-cli?
https://github.com/angular/angular-cli/pull/3252/files#diff-badc0de0550cb14f40374a6074eb2a8b
In my case I just had to import my new router module in the app.component.spec.ts
The js import and NgModule import.
Then restart the test server.
The angular router directive is part of part of lib: #angular/router and it acts a placeholder which is filled up by angular state.
Here I am dividing two file separately i.e. app.module.ts and app.router.ts
Here app.router.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { MainComponent } from './components/main/main.component';
import { AppComponent } from './app.component';
const appRoutes: Routes = [
{ path: 'main', component: MainComponent },
{ path: '', redirectTo: '/main', pathMatch: 'full' }
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRouter { }
Here app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRouter } from './app.router';
import { AppComponent } from './app.component';
import { MainComponent } from './components/main/main.component';
#NgModule({
declarations: [
AppComponent,
MainComponent
],
imports: [
BrowserModule,
AppRouter
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now you can use <router-outlet></router-outlet> in your app.component.ts file and won't show any error