Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida sobre Angular 2

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

4 respostas

Quando criei o curso do Angular, eu segui o tutorial passo a passo do site do Angular, inclusive no vídeo eu mostro (eles já mudaram no site). Não usei o quickstart porque outros alunos tiverem problemas com ele. Contudo, Angular 2 hoje faz uso do Angular CLI. Quando criei o treinamento ele era beta e totalmente bugado por isso não abordei no curso, citando-o apenas no final do segundo módulo.

Hoje, o Angular CLI esta no release candidate e ganhou estabilidade. Sendo assim, se for criar um novo projeto do zero, hoje, use o Angular CLI. No final do segundo módulo ensino a utilizá-lo em um exercício complementar.

As coisas voam, mal lancei o curso de Angular 2 e no final de março tem previsão do Angular 4. Com todas essas mudanças radiciais, acredito que ele esteja longe de ser um framework maduro. É por isso que eu tenho utilizado outros framework de SPA em meus projetos.,

Agora, sobre o problema que você esta tendo. O módulo principal deve ter todos os módulos que sua aplicação usa. Ele é o ponto no qual você indica o que estará disponível para sua aplicação como um todo.

Então, resumindo. Quer criar um projeto do zero, vai de Angular CLI. Sobre o problema que você esta tendo. Você não pode tirar FORMSMODULE do UPLOADMODULE, porque essa é uma dependência de uma módulo.

Imagina assim. Se você der esse uploadmodule para alguém, esse alguém tem tudo aquilo que precisa para fazê-lo funcionar? É por isso que se o uploadmodule depende do formmodule ele precisa ter isso declaro, mesmo que você tenha outro módulo que dependa do formodulo, importar formoudle nesse módulo não o tornará disponível para o outro módulo.

Pegou a ideia da independência dos módulos? O que fazemos, é combinar módulos entre si para criar aplicações. Isso ajuda inclusive no teste da aplicação.

Consegui ajudar, meu aluno?

Peguei a ideia sim, mas o que eu não entendi é que no projeto Alurapic você declarou formsmodule apenas no modulo principal, isso ja era o suficiente para funcionar...

solução!

Vou te explicar. Os componentes que fazem uso de formsmodule são componentes que fazem parte do módulo principal da aplicação, no caso, os cadastros. Como eles são componentes (veja, componentes, não módulos) eles enxergam o formsmodule importado no módulo principal. Já os outros módulos, que foram importados em principal, não tem acesso ao formmodule.

Ficou mais claro agora?

Ah sim entendi, perfeito! muito obrigado :D

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software