property - ngmodel angular 5

El módulo Angular2 no tiene miembro exportado

Question

Para un sitio web con autenticación en Angular2, quiero usar un componente del submódulo de autenticación en el componente principal de la aplicación. Sin embargo, sigo recibiendo el siguiente error:

app/app.component.ts(3,10): error TS2305: Module ''"<dir>/app/auth/auth.module"'' has no exported member ''SigninComponent''.

incluso después de exportar SigninComponent.

La estructura de la carpeta del proyecto es como se muestra a continuación:

app / auth / auth.module.ts:

import { NgModule } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';
import { FormsModule } from ''@angular/forms'';
import { RegisterComponent } from ''./components/register.component'';
import { SigninComponent } from ''./components/signin.component'';
import { HomeComponent } from ''./components/home.component'';
import { AuthService } from ''./services/auth.service'';
import { AuthHttp } from ''./services/auth-http'';
@NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
RegisterComponent,
SigninComponent,
HomeComponent
],
providers: [
AuthService,
AuthHttp
],
exports: [
RegisterComponent,
SigninComponent,
HomeComponent
]
})
export class AuthModule {}

app / auth / components / signin.component.ts:

import { Component } from ''@angular/core'';
import { Router } from ''@angular/router'';
import { AuthService } from ''../services/auth.service'';
@Component({
selector: ''signin'',
templateUrl: ''app/auth/signin.html''
})
export class SigninComponent {
...
}

app / app.component.ts:

import { Component, OnInit } from ''@angular/core'';
import { Router, RouterOutlet } from ''@angular/router'';
import { SigninComponent, RegisterComponent } from ''./auth/auth.module'';
import { AuthHttp } from ''./auth/services/auth-http'';
import { AuthService } from ''./auth/services/auth.service'';
@Component({
selector: ''myapp'',
templateUrl: ''app/app.html''
})
export class AppComponent implements OnInit {
...
}

app / app.module.ts:

import { NgModule } from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';
import { FormsModule } from ''@angular/forms'';
import { HttpModule } from ''@angular/http'';
import { RouterModule } from ''@angular/router'';
import { AppRoutingModule } from ''./app-routing.module'';
import { AuthModule } from ''./auth/auth.module'';
import { AppComponent } from ''./app.component'';
import { AuthService } from ''./auth/services/auth.service'';
import { AuthHttp } from ''./auth/services/auth-http'';
@NgModule({
declarations: [
AppComponent,
AuthService,
AuthHttp
],
bootstrap: [ AppComponent ],
imports : [
BrowserModule,
FormsModule,
HttpModule,
AuthModule,
AppRoutingModule
],
providers: [
AuthService,
AuthHttp
]
})
export class AppModule {
}

Answer 1

Estaba enfrentando el mismo problema y acabo de comenzar la aplicación con un nuevo puerto y todo se ve bien.

ng serve --port 4201

Answer 2

Este error también puede ocurrir si el nombre de su interfaz es diferente al archivo en el que se encuentra. Lea acerca de los módulos ES6 para obtener más detalles. Si el SignInComponent era una interfaz, como en mi caso, entonces

SignInComponent

debe estar en un archivo llamado SignInComponent.ts .

Answer 3

No necesitas la línea:

import { SigninComponent, RegisterComponent } from ''./auth/auth.module'';

en su app.component.ts como ya incluyó el AuthModule en su app.module.ts . AutModule importación de AutModule es suficiente para usar su componente en la aplicación.

El error que recibe es un error de TypeScript, no Angular, y es correcto al indicar que no hay un miembro exportado, ya que busca una sintaxis EC6 válida para la exportación, no la exportación de módulos angulares. Esta línea por lo tanto trabajaría en su app.component.ts :

import { SigninComponent } from ''./auth/components/signin.component'';

Answer 4

Para mí, este problema se produce cuando tengo varias declaraciones de export en un solo archivo .ts ...

Answer 5

También algunos de los casos comunes:

tal vez usted exporta la clase con el prefijo "predeterminado" como tal

export default class Module {}

solo quítalo

export class Module {}

esto es resolver el problema para mí

Answer 6

Tengo un problema similar. El error que cometí fue que no agregué servicio en la matriz de proveedores en app.module.ts. Espero que esto ayude, gracias.

Answer 7

Trabajando con atom (1.21.1 ia32) ... obtuve el mismo error, aunque agregué una referencia a mi canalización en app.module.ts y en las declaraciones dentro de app.module.ts

la solución fue reiniciar mi instancia de nodo ... detener el sitio web y luego volver a hacer ng serve ... ir a localhost: 4200 funcionó como un encanto después de este reinicio

Answer 8

Tuve el nombre del componente incorrecto (distingue entre mayúsculas y minúsculas) en app.rounting.ts o app.module.ts.