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"
Related
Trying to use clarity within a routed component, seeing the error below.
Flow: AppModule > AppComponent > AppRouting > HomeComponent
clr-datagrid succeeds on the AppComponent html, but within the routed HomeComponent fails.
ERROR in src/app/components/home.component.html:4:13 - error NG8001: 'clr-datagrid' is not a known element:
1. If 'clr-datagrid' is an Angular component, then verify that it is part of this module.
2. If 'clr-datagrid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
4 <clr-datagrid>
home.component.html:
<div class="main-container">
<div class="content-container">
<div class="content-area">
<clr-datagrid>
</clr-datagrid>
</div>
</div>
</div>
AppRoutingModule:
import { NgModule } from '#angular/core';
import { Routes, RouterModule, PreloadAllModules } from '#angular/router';
import { HomeComponent } from './components/home.component'
const routes: Routes = [{path: "", component: HomeComponent }];
#NgModule({
imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
exports: [RouterModule],
})
export class AppRoutingModule { }
AppComponent:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent { }
AppModule:
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { HttpClientModule } from "#angular/common/http";
import { ClarityModule } from '#clr/angular';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
ClarityModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Fix was in AppModule
#NgModule({
declarations: [
AppComponent, HomeComponent
Trying to use angular4 for asp.net core project.
Using this repo https://github.com/cadabloom/AspNetCoreAngular for angular tempating.
Don't know what causes it and is there a way to get more detail about this error types?
Getting this error.
vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:83954 Unhandled Promise rejection: No provider for ApplicationRef! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for ApplicationRef!
at injectionError (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:12189)
at noProviderError (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:12227)
at ReflectiveInjector_._throwOrNull (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:13728)
at ReflectiveInjector_._getByKeyDefault (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:13767)
at ReflectiveInjector_._getByKey (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:13699)
at ReflectiveInjector_.get (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:13568)
at AppModuleInjector.createInternal (module.ngfactory.js? [sm]:1)
at AppModuleInjector.NgModuleInjector.create (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:14495)
at NgModuleFactory.create (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:14468)
at vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:15709 Error: No provider for ApplicationRef!
at injectionError (http://localhost:5000/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:12189:86)
at noProviderError (http://localhost:5000/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:12227:12)
at ReflectiveInjector_._throwOrNull (http://localhost:5000/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:13728:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:5000/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:13767:25)
at ReflectiveInjector_._getByKey (http://localhost:5000/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:13699:25)
at ReflectiveInjector_.get (http://localhost:5000/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:13568:21)
at AppModuleInjector.createInternal (ng:///AppModule/module.ngfactory.js:122:51)
at AppModuleInjector.NgModuleInjector.create (http://localhost:5000/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:14495:76)
at NgModuleFactory.create (http://localhost:5000/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:14468:18)
at http://localhost:5000/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:15709:61
home.components.ts
import { Component, NgModule} from '#angular/core';
import { PromoSliderComponent } from './promoslider.component';
#Component({
selector: 'home',
templateUrl: '/home.component.html'
})
#NgModule({
declarations: [],
providers: [],
bootstrap: [],
imports: [PromoSliderComponent],
schemas: []
})
export class HomeComponent {
}
promoslidercomponent.ts
import { Component } from '#angular/core';
#Component({
selector: 'promo-slider',
templateUrl: './promoslider.component.html'
})
export class PromoSliderComponent {
}
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 { FooterComponent } from './components/footer/footer.component';
import { HomeComponent } from './components/home/home.component';
import { PromoSliderComponent } from './components/home/promoslider.component';
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
FooterComponent,
PromoSliderComponent,
HomeComponent
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: '**', redirectTo: 'home' }
])
],
};
addp.module.client.ts
import { NgModule } from '#angular/core';
//import { BrowserModule } from '#angular/platform-browser';
//import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { sharedConfig } from './app.module.shared';
//import { RouterModule } from '#angular/router';
#NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
HttpModule,
...sharedConfig.imports,
],
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin }
]
})
export class AppModule {
}
question 2:using angular in asp.net core project obligate me to use component instead of partials. is there a way to use partials with angular? i dont want to get all data from services or do i have to?
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}" />
We are tried login with google authentication using (Firebase/ionic2/angularjs2).Our code
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
user: Observable<firebase.User>;
constructor(public navCtrl: NavController,public afAuth: AngularFireAuth) {
this.user = afAuth.authState;
}
login() {
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}
logout() {
this.afAuth.auth.signOut();
}
}
but we are getting error :
Error: Uncaught (in promise): Error: No provider for AngularFireAuth!
Error: No provider for AngularFireAuth!
Please guide to us what working in our code .
A clarification of what #rmalviya suggested, I assume you are currently on Ionic version 3.x.x, for this version you have two ways of importing a native plugin and adding the respective providers for the plugin.
1) You could add the provider in your current page typescript file. like so:
import { AngularFireAuth } from 'angularfire2/auth';
...
#Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [AngularFireAuth]
})
2) Second method you could import it in your app.modules.ts and add the plugin into the providers
import { AngularFireAuth } from 'angularfire2/auth';
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AngularFireAuth
]
resolve here https://github.com/iglewski/Annotator/issues/3
app.component.spec.ts :
import { FirebaseApp, FirebaseAppConfig, AngularFireModule } from 'angularfire2';
import { AngularFireAuth, AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { firebaseConfig } from './app.module';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
imports: [
AngularFireModule.initializeApp(firebaseConfig), //ajout
AngularFireAuthModule, //ajout
AngularFireDatabaseModule //ajout
],
}).compileComponents();
}));
If you're using the IonicPageModule system, then you'll need to import AngularFireAuth in your app.module.ts AND in your page.module.ts in the providers array.
app.module.ts:
#NgModule({
...
providers: [AngularFireAuth]
...
page.module.ts:
#NgModule({
declarations: [
SignupPage,
],
imports: [
IonicPageModule.forChild(SignupPage)
],
exports: [
SignupPage
],
providers: [
AngularFireAuth
]
})
I was facing the same issue but I managed to solved this by adding the following lines into my core modules.
CoreModule contains code that will be used to instantiate your app and load some core functionality.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
/* 3e. Import the angularfire2 thingy. */
**import {AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFireAuthModule } from 'angularfire2/auth';**
import { AuthModule } from '../auth/auth.module';
import { AuthService } from '../core/auth.service';
#NgModule({
declarations: [],
imports: [
CommonModule,
/* To allow the db to talk to the form. */
**AuthModule,
AngularFireAuthModule,
AngularFireStorageModule,
AngularFirestoreModule,**
],
exports: [],
providers: [
AuthService,
]
})
export class CoreModule { }
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