I am currently learning the ropes around Angular2 in Ionic2.
I am going through a tutorial that is a bit outdated, and since i'm not 100% familiar with Angular2 environments, I can't debug this error:
Uncaught (in promise): Error: No component factory found for ReposPage. Did you add it to #NgModule.entryComponents? Error: No component factory found for ReposPage. Did you add it to #NgModule.entryComponents? at noComponentFactoryError
These are the files I've changed from a clean ionic2 install:
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
import { UsersPage } from '../pages/users/users';
import { ReposPage } from '../pages/repos/repos';
import { OrganisationsPage } from '../pages/organisations/organisations';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage = HelloIonicPage;
pages: Array<{title: string, component: any}>;
constructor(
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen
) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Users', component: UsersPage },
{ title: 'Repos', component: ReposPage },
{ title: 'Organisations', component: OrganisationsPage },
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
I have also created 3 pages through the ionic g page command.
any help on this issue would be grateful.
You need to include ReposPage in ngModule in app.module.ts .
It should be present in both declarations and entryComponents array.
#NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage //here
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage //here
],
as the error message clearly saying, you need to add 'ReposPage' to the entryComponents array in app.modules.ts file. Also you would need to add it as a declaration.
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage
]
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage
]
Related
I am facing the problem in angular 4.4 , In my app, I have hierarchical view. In which I have created a
:= module 1 -> module 2 -> my component.
I have declared everything correctly. , But still I'm getting error.
Declared component.
Imported it into other module.
selector name is same.
Exported component in module 2.
Imported module 2 in module 1.
What could be the catch?
Component Code:
Admin -> Configuration -> mycomponent
//My component
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '#angular/core';
#Component({
selector: 'test-mycomponent',
templateUrl: './mycomponent.component.html',
styleUrls: ['./mycomponent.component.scss']
})
export class MyComponentComponent implements OnInit {
#ViewChild('myComponentTable')
constructor() {
}
ngOnInit() {
//init functionality
}
}
// configure module code
import { NgModule,Component } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { MyComponentComponent } from './mycomponent/mycomponent.component';
#NgModule({
imports: [
CommonModule,
WidgetsModule,
FormsModule,
NgbModule
],
declarations: [
MyComponent
],
providers: [
],
exports: [
MyComponent
]
})
export class ConfigurationModule { }
//Main module admin
import { NgModule, Component } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ConfigurationModule } from './configuration/configuration.module';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { MyComponentComponent } from './configuration/mycomponent/mycomponent.component';
import { FormsModule } from '#angular/forms';
#NgModule({
imports: [
CommonModule,
NgbModule,
FormsModule,
ConfigurationModule
],
declarations: [
],
exports: [
]
})
export class AdminModule { }
and I am calling that template in another file
//Test file html
<ng-template>
<test-mycomponent></test-mycomponent>
</ng-template>
You are not declaring the right component the name should be MyComponentComponent in the declerations and exports:
import { MyComponentComponent } from './mycomponent/mycomponent.component';
declarations: [
MyComponent //should be MyComponentComponent
],
providers: [
],
exports: [
MyComponent //should be MyComponentComponent
]
I have an Angular application that navigates to two routes:
http://localhost:8080/ /* Landing page */
http://localhost:8080/details/:id /* Result page */
Whenever I navigate to, for example, http://localhost:8080/details/4235. I'm met with the error: Cannot GET /details/4235
Here is how I setup my routes, in my:
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage, pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
Which I import into my:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms'; // <-- NgModel lives here
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { AppRoutingModule } from './app-routing.module';
#NgModule({
declarations: [
AppComponent,
LandingPage,
ResultPage
],
imports: [
BrowserModule,
FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
HttpModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm having trouble finding a working Angular 2 method of dealing with direct-linking to a url.
How can I setup direct linking in Angular 2, so that when I load, say, http://localhost:8080/details/4235 it loads my ResultPage component.
edit:
Loading http://localhost:8080/#/details/4235 , is valid, but it re-loads the LandingPage component. And I am trying to load the ResultPage component when there is an extended url.
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from
'./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
here you're loading the empty path first. Then the other paths will load. Update the empty path route. Keep it at last in the hierarchy.
Updated Code:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from '
./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{
path: 'details/:id', component: ResultPage
},
{ path: '', component: LandingPage } //<-- here
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
EDIT:
Also there might be problem that your browser doesn't support HTML5 pushState. I'm referring some SO links that might help out.
Configure history.pushState for Angular 2
enter link description here
Angular 2.0 router not working on reloading the browser
I found a project ng2-admin from https://github.com/akveo/ng2-admin , and this is online demo http://akveo.com/ng2-admin/
I am confused about PagesModule bootstrap process. Default AppModule bootstrap, how did it contine show /#/pages/dashboard content?
In app.module.ts:
import { NgModule, ApplicationRef } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { TranslateService } from '#ngx-translate/core';
/*
* Platform and Environment providers/directives/pipes
*/
import { routing } from './app.routing';
// App is our top level component
import { App } from './app.component';
import { AppState, InternalStateType } from './app.service';
import { GlobalState } from './global.state';
import { NgaModule } from './theme/nga.module';
import { PagesModule } from './pages/pages.module';
// Application wide providers
const APP_PROVIDERS = [
AppState,
GlobalState
];
export type StoreType = {
state: InternalStateType,
restoreInputValues: () => void,
disposeOldHosts: () => void
};
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
#NgModule({
bootstrap: [App],
declarations: [
App
],
imports: [ // import Angular's modules
BrowserModule,
HttpModule,
RouterModule,
FormsModule,
ReactiveFormsModule,
NgaModule.forRoot(),
NgbModule.forRoot(),
PagesModule,
routing
],
providers: [ // expose our Services and Providers into Angular's dependency injection
APP_PROVIDERS
]
})
export class AppModule {
constructor(public appState: AppState) {
}
}
I know this file is app entrance.
in app.routing.ts file:
import { Routes, RouterModule } from '#angular/router';
import { ModuleWithProviders } from '#angular/core';
export const routes: Routes = [
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages/dashboard' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });
It only tell browser redirec to "#pages/dashboard", but there is no related component here.
In app.component.ts, the template is:
template: `
<main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
<div class="additional-bg"></div>
<router-outlet></router-outlet>
</main>
`
There is no other custom tags except router-outlet.
I am confused how to make main AppModule work with PagesModule in application.
Thanks very much.
I am testing the Lazy Router version with Angular.
I implemented for every component with the following parts:
in componentone.component.ts
#Component({...})
export class ComponentOne ...
in componentone.module.ts
#NgModule({..., imports: [componentOneRoutes]})
export default class ComponentOneModule
in componentone.routes.ts
const routes = [ {path: '', component: ComponentOne} ]
export default RouterModule.forChild(routes);
In my appcomponent.ts
#Component({})
export class AppComponent {
// for displaying the content in url in the app.component.html
navs = [ {url: '', content: 'Component 1'},... ]
}
In app.routes.ts
const routes = [ {path: "", loadChildren:
"app/componentone/componentone.module"} ]
export default RouterModule.forRoot(routes);
Then in app.module.ts import the app.routes.ts
#NgModule({imports:[appRoutes,...]})
I receive the following Error:
ERROR in Cannot use "in" operator to search for "providers" in null.
My providers section is empty because i have no services only the routing part in the import array.
I am using angular 4 and angular-cli 1.0.0
The loadChildren syntax is not correct. It needs the name of the Angular module. Something like this:
loadChildren: 'app/products/product.module#ProductModule'
Expanding on the above so it is crystal clear to everyone (as this is what worked for me):
Change all your default exports, for example:
1) In exporting class:
export default class GridModule { };
2) The class that imports the module:
import GridModule from './gridModule'
Change these default exports to exports, for example:
1) In exporting class:
export class GridModule { };
2) The class that imports the module:
import { GridModule } from './gridModule'
A possible reason for this is described here: https://github.com/angular/angular-cli/issues/3826
First, remove the default annotation from your code (componens and others places).
Second, where are the definitions of componentOneRoutes and appRoutes?
The below setup and files gives me the same error no matter what I change to match any of the solutions currently offered.
Current Setup
#angular/cli: 1.1.0
node: 6.9.1
os: darwin x64
#angular/animations: 4.1.3
#angular/common: 4.1.3
#angular/compiler: 4.1.3
#angular/core: 4.1.3
#angular/forms: 4.1.3
#angular/http: 4.1.3
#angular/material: 2.0.0-beta.3
#angular/platform-browser: 4.1.3
#angular/platform-browser-dynamic: 4.1.3
#angular/router: 4.1.3
#angular/cli: 1.1.0
#angular/compiler-cli: 4.1.3
Account Module - To be lazy Loaded
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ACCOUNT_COMPONENTS } from './components/index';
import { ACCOUNT_CONTAINER } from './containers/index';
import { routes } from './account.routes';
#NgModule({
imports: [
routes,
CommonModule,
],
exports: [
...ACCOUNT_CONTAINER,
...ACCOUNT_COMPONENTS
],
declarations: [
...ACCOUNT_CONTAINER,
...ACCOUNT_COMPONENTS
],
providers: [],
})
export class AccountModule { }
Account Routing
import { Route, RouterModule } from '#angular/router';
import { AccountComponent } from './containers/account/account.component';
const accountRoutes: Route[] = [
{ path: '',
component: AccountComponent
}
];
export const routes = RouterModule.forChild(accountRoutes);
Main Routing File
import { AccountComponent } from './account/containers/account/account.component';
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const appRoutes: Routes = [
{
path: '',
children: [
{
path: '',
loadChildren: 'app/home/home.module#HomeModule',
},
{
path: 'accounts',
loadChildren: 'app/account/account.module#AccountModule',
},
]
},
{ path: '404-page', loadChildren: 'app/404-page/404- page.module#PageNotFoundModule' },
{ path: '**', redirectTo: '404-page' }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);
APP Module
import { LayoutModule } from './layout/layout.module';
import { RunbookEffects } from './core/effects/runbook.effects';
import { AppComponent } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { Angular2TokenService } from 'angular2-token';
import { EffectsModule } from '#ngrx/effects';
import { StoreDevtoolsModule } from '#ngrx/store-devtools';
import { MaterialModule } from '#angular/material';
import { BrowserAnimationsModule } from '#angular/platform- browser/animations';
import { routes } from './app.routes';
import { APP_SERVICES } from './core/services';
import { reducer } from './core/store/reducers';
import { StoreModule } from '#ngrx/store';
import { UserEffects } from './core/effects/user.effects';
import { AccountEffects } from './core/effects/account.effects';
import { ProjectEffects } from './core/effects/project.effects';
#NgModule({
declarations: [
AppComponent
],
imports: [
routes,
MaterialModule,
LayoutModule,
BrowserAnimationsModule,
BrowserModule,
FormsModule,
HttpModule,
StoreModule.provideStore(reducer),
StoreDevtoolsModule.instrumentOnlyWithExtension({
maxAge: 5
}),
EffectsModule.run(UserEffects),
EffectsModule.run(AccountEffects),
EffectsModule.run(ProjectEffects),
EffectsModule.run(RunbookEffects)
],
providers: [
Angular2TokenService,
APP_SERVICES
],
exports: [
],
bootstrap: [AppComponent]
})
I am trying to find out the reason for the following error.
app/src/app.module.ts(13,33): error TS2307: Cannot find module 'src/components/test/test.module
I am using Angular2 RC5 and created a feature module and imported it in app.module.ts file. I am using lazy loading of the module with the router.
app.module.ts looks like this
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing } from './app.routes';
/* App Root */
import { AppComponent } from './app.component';
/* Feature module */
import { TestModule } from 'src/components/test/test.module';
#NgModule({
imports: [ BrowserModule, routing ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: []
})
export class AppModule { }
test.module.ts looks like this
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TestComponent } from './test.component';
import { routing } from './test.routes';
#NgModule({
imports: [ CommonModule, routing ],
declarations: [ TestComponent ],
providers: []
})
export default class TestModule { }
app.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
export const routes: Routes = [
{
path: '',
redirectTo: '/test',
pathMatch: 'full'
},
{
path: 'test',
loadChildren: 'src/components/test/test.module'
}
];
export const routing = RouterModule.forRoot(routes);
test.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
import { TestComponent } from './test.component';
const routes: Routes = [
{ path: '',
component: TestComponent }
];
export const routing = RouterModule.forChild(routes);
Above error appears when I try to compile test.module.ts file with default keyword. If I remove it, error disappears. but of course, in that case, I won't be able to use lazy loading for feature module.
Does anyone come across this?
I see multiple errors in your code.
You are importing wrong module in your AppModule.
Your export class name of test.module.ts is TestModule, but you are importing DashboardModule in your AppModule.
Instead of:
import { DashboardModule } from 'src/components/test/test.module';
You should import:
import { TestModule } from 'src/components/test/test.module';
And, of course, you need to add TestModule to your AppModule imports.