page change angular angular2-routing

change - page title angular 4



Valor inesperado ''indefinido'' declarado por el módulo ''AppModule'' (10)

¿Que esta mal aquí? Estoy tratando de hacerlo funcionar, pero aparece ese error en el encabezado. He incluido el <router-outlet></router-outlet> en app.component.html que se llama templateUrl por app.component.ts , todavía no app.component.ts suerte.

app.module.ts :

import { NgModule } from ''@angular/core''; import { BrowserModule } from ''@angular/platform-browser''; import { FormsModule } from ''@angular/forms''; import { RouterModule, Routes } from ''@angular/router''; import { AppComponent } from ''./app.component''; import { AppRoutingModule } from ''./app-routing.module''; import { TopnavComponent } from ''./components/navbars/topnav/topnav.component''; import { LeftnavComponent } from ''./components/navbars/leftnav/leftnav.component''; import { LeftnavsecondaryComponent } from ''./components/navbars/leftnav-secondary/leftnav-secondary.component''; import { WorldofwarcraftComponent } from ''./components/games/worldofwarcraft/worldofwarcraft.component''; @NgModule({ imports: [ BrowserModule, FormsModule, AppRoutingModule ], declarations: [ AppComponent, TopnavComponent, LeftnavComponent, LeftnavsecondaryComponent, WorldofwarcraftComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

app-routing.module.ts :

import { NgModule } from ''@angular/core''; import { RouterModule, Routes } from ''@angular/router''; import { WorldofwarcraftComponent } from ''./components/games/worldofwarcraft/worldofwarcraft.component''; const appRoutes: Routes = [ { path: ''worldofwacraft'', component: WorldofwarcraftComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) export class AppRoutingModule {}


En mi caso, el nombre de la clase era diferente y el nombre, es decir, entre {nombre} exportado en app.mdoule.ts era diferente

buena suerte


En mi caso, en app.module.ts (Ionic 3)

providers: [ , StatusBar , SplashScreen

Cambiado a:

providers: [ StatusBar , SplashScreen

Y funciona.


Este es un error muy molesto y difícil de entender. Hice una comparación de archivos usando Araxis Merge y encontré que todos los archivos de mis dos proyectos eran casi idénticos a primera vista. Sin embargo, después de una revisión adicional, noté una ligera diferencia en la estructura del archivo (que en realidad no estaba buscando al principio, sino que estaba buscando diferencias de configuración) de que mi segundo proyecto había generado un archivo js a partir de uno de los archivos ts.

Como puede ver en el lado izquierdo, hay un archivo js. El proyecto del lado derecho mostró mi componente constructor de nodos y se ejecutó sin error. El lado derecho fue lo que causó el problema.

Webpack había recogido ese archivo Javascript e intentó empaquetarlo. Obviamente, cuando Webpack encontró la versión ts, la transformó en un archivo js duplicado, creando así una confusa excepción en tiempo de ejecución.

t {__zone_symbol__error: Error: Unexpected value ''undefined'' declared by the module ''AppModule'' at t.m (http://localhost:……}

Como puede ver, este problema no tenía nada que ver con la configuración, ya que muchas publicaciones me habían hecho creer. Como se indicó anteriormente, su problema puede tener que ver con la configuración, pero en mi caso no fue así.


Esto es similar a la respuesta que sugiere volver a ejecutar ng serve , pero eso no era relevante para mi situación, ya que tengo la aplicación ejecutándose permanentemente en IIS. En mi caso, había ng build --watch con ng build --watch , pero detenerlo y volver a ejecutarlo solucionó el problema. Supongo que algo se compiló incorrectamente cuando era una compilación incremental, pero hacer la compilación completa solucionó el problema.


Esto también me sucedió a mí, en @Component escribí selector: all-employees y en el módulo app.module.ts fue <all- employees></all- employees>


Experimenté esto con Angular 2 y resulta que tiene algo que ver con las importaciones y las rutas relativas, si está exportando algo desde la misma ubicación

Por ejemplo, cuando use barriles, especifique explícitamente el ./

export * from ''./create-profile.component'';

en lugar de

export * from ''create-profile.component'';


Fue causado porque repetí la exportación en uno de mis archivos index.ts:


Me enfrenté al mismo error y descubrí la razón. La razón fueron dos comas, en cualquier matriz (por ejemplo: propiedades de imports ) como esta.

@NgModule({ imports: [ CommonModule, FormsModule,, ]})


Obtuve el mismo error, a veces ocurre este problema y solo necesita volver a ejecutar el servidor usando ng serve o cualquier CLI que use, como se menciona here


Prueba esto puede ayudarte:
Detenga e inicie el servicio ng-serve . Ahora la página podría navegar.