tenho 2 problemas
Primeiro: Criei um projeto do angular do zero, consultei a documentação e me mandaram pegar um projeto inicial do github. Dai eu baixei, dei o comando pra excluir tudo o que não era necessário, seguindo os passos da documentação e blz. Veio tudo meio que pronto, pra vc começar a programar... agora vem a dúvida: Qual foi a maneira que vc seguiu para criar o seu projeto Alurapic e criar o curso de angular 2? pois havia muitos arquivos diferentes, muitas configurações diferentes.
segunda duvida: depois de ter feito isso e prosseguir com meu projeto, venho encarando um problema muito chato. não basta importar no modulo pincipal, tem que importar no módulo filho também... se não importar no modulo filho não funciona.. olha só como está meu código:
app.module.ts:
import 'rxjs/add/operator/map';
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {routing} from './app.routes';
import {HomeComponent} from './home/home.component';
import {ProductManagerComponent} from './productManager/product-manager.component';
import {HttpModule} from '@angular/http';
import {UploadModule} from './upload/upload.module';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [BrowserModule,
FormsModule,
ReactiveFormsModule,
routing,
HttpModule,
UploadModule,
],
declarations: [AppComponent,
HomeComponent,
ProductManagerComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
import {Component} from '@angular/core';
import {Http, Headers} from '@angular/http';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
@Component({
moduleId: module.id,
selector: 'upload',
templateUrl: './upload.component.html'
})
export class UploadComponent {
name: string = '';
url: string = '';
http: Http;
dropdownOptions: Array<string>;
myForm: FormGroup;
constructor(http: Http, fb: FormBuilder) {
this.http = http;
this.dropdownOptions = ['Atualizar preço dos produtos',
'Atualizar uma Logo'];
this.myForm = fb.group({
name:['', Validators.required]
})
}
upload(event: any): void {
let fileList: FileList = event.target.files;
if (fileList.length > 0) {
let file: File = fileList[0];
let formData: FormData = new FormData();
formData.append('uploadFile', file);
let headers = new Headers();
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
this.http.post(this.url, formData, headers)
.map(res => res.json())
.subscribe(
data => console.log('success'),
error => console.log(error)
)
}
}
}
até ai tudo bem, mas agora vou retirar o FORMSMODULE do upload.module.ts
esse é o erro que acontece no console no browser:
Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("<div>
<h1>{{name}}</h1>
<select [ERROR ->][(ngModel)]="name" class="form-control">
<option *ngFor="let option of dropdownOptions" [attr.va"): UploadComponent@2:10 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'select'. (…, _nativeError: ZoneAwareError, __zone_symbol__stack: "Error: Template parse errors:↵Can't bind to 'ngMod…st:8080/node_modules/zone.js/dist/zone.js:529:35)", __zone_symbol__message: "Template parse errors:↵Can't bind to 'ngModel' sin…dropdownOptions" [attr.va"): UploadComponent@2:10"} Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("<div>
<h1>{{name}}</h1>
<select [ERROR ->][(ngModel)]="name" class="form-control">
<option *ngFor="let option of dropdownOptions" [attr.va"): UploadComponent@2:10
at SyntaxError.ZoneAwareError (http://localhost:8080/node_modules/zone.js/dist/zone.js:958:33)
at SyntaxError.BaseError [as constructor] (http://localhost:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:1592:20)
at new SyntaxError (http://localhost:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20)
at TemplateParser.parse (http://localhost:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:11444:23)
at JitCompiler._compileTemplate (http://localhost:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:27557:72)
at eval (http://localhost:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:27440:66)
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:27440:23)
at createResult (http://localhost:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:27322:23)
at ZoneDelegate.invoke (http://localhost:8080/node_modules/zone.js/dist/zone.js:330:26)
at Zone.run (http://localhost:8080/node_modules/zone.js/dist/zone.js:126:43)
at http://localhost:8080/node_modules/zone.js/dist/zone.js:679:57
at ZoneDelegate.invokeTask (http://localhost:8080/node_modules/zone.js/dist/zone.js:363:31)
at Zone.runTask (http://localhost:8080/node_modules/zone.js/dist/zone.js:166:47)
at drainMicroTaskQueue (http://localhost:8080/node_modules/zone.js/dist/zone.js:529:35)
consoleError @ zone.js:516
_loop_1 @ zone.js:545
drainMicroTaskQueue @ zone.js:549
ZoneTask.invoke @ zone.js:420
zone.js:518 ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a…, rejection: SyntaxError, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}
a mesma coisa acontece se eu tirar o COMMONSMODULE, mas dá erro no ngFor