Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
20
respostas

AppRoutingModule não reconhecido - Erro no Browser

<app.module.ts>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';


import { PhotosModule } from './photos/photos.module';
import { AppRoutingModule } from './app.routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PhotosModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ao final dos passos executados no item 6 da aula 4 do curso 'Angular parte 1: Fundamentos', o projeto compila normalmente, mas o seguinte erro esta sendo exibido no browser(inspeção): "Uncaught Error: Unexpected value 'AppRoutingModule' imported by the module 'AppModule'. Please add a @NgModule annotation." O código esta idêntico ao do curso. O que há de errado? Obrigado.

20 respostas

Boa tarde.

Como está escrito seu arquivo app.routing.module.ts ?

import { NgModule } from '../../node_modules/@angular/core';
import {Routes, RouterModule} from '@angular/router';

import { PhotoListComponent } from './photos/photo-list/photo-list.component';
import { PhotoFormComponent } from './photos/photo-form/photo-form.component';

export const routes: Routes = [
    {path: 'user/flavio', component: PhotoListComponent},
    {path: 'p/add', component:PhotoFormComponent}
];

NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {}

Os arquivos estão salvos? Na dúvida, feche seu Angular CLI e executa novamente.

No aguardo.

Arquivos salvos, angular CLI reiniciado, mas o erro persiste.

Segue a versão do angular CLI utilizado.

Angular CLI: 6.0.8
Node: 8.11.3
OS: win32 x64
Angular: 6.0.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.8.3

Seu import esta assim:

import { NgModule } from '../../node_modules/@angular/core';

No curso eu faço assim:

import { NgModule } from '@angular/core';

Se o seu Visual Studio insistir em importar do jeito anterior, dê uma olhada nessa resposta aqui:

https://cursos.alura.com.br/forum/topico-o-visual-studio-esta-importando-assim-os-componentes-do-angular-65201

Pode ficar tranquilo que mais de 500 alunos já passaram dessa parte sem problema, vamos descobrir.

obs: só para situar, você postou no curso de Angular 2 e não no de Angular fundamentos. Isso pode confundir quem quer lhe ajudar (talvez tenha sido por engano).

Outra coisa para verificar é se você salvou o arquivo nos lugares corretos e se não tem dois arquivos de mesmo nome, um sem conteúdo e outro com conteúdo. Já vi isso acontecer com alunos aqui. Só verificar.

Professor, Ja verifiquei os arquivos e suas localizações e esta tudo correto. Sobre o curso referenciado, tem como transferir este tópico para o curso correto (Angular Fundamentos)? Ou terei que criar o mesmo topico lá no curso correto?

Pode deixar do jeito que está pois estou acompanhando.

Você fez o ajuste deste post ?

https://cursos.alura.com.br/forum/topico-o-visual-studio-esta-importando-assim-os-componentes-do-angular-65201

Tem que ajustar o import depois.

Cole o log completo que aparece no terminal do Angular CLI.

Há um pulo de linha entre o Decorator Component e nome da classe. Remove esse espaço pra gente?

Professor, acho que o link informado para o post que você queria recomendar esta errado. (http://forum.cidadaniaportuguesa.com/discussion/11944/cartao-cidadao-urgente-em-lisboa-1-dia). Qual seria o ajuste a ser feito? Você pode, por favor mandar novamente?

Esse aqui

https://cursos.alura.com.br/forum/topico-o-visual-studio-esta-importando-assim-os-componentes-do-angular-65201

Você verificou o pulo de linha?

NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
// Remove esse pulo de linha aqui
export class AppRoutingModule {}

Estou aguardando o log completo do Angular CLI que aparece no prompt/terminal mesmo que seja grande.

Estou curioso porque nunca vi esse erro acontecer.

Pulo de linha removido e ajuste feito no visual studio, conforme orientado no post, mas o erro persiste. Segue o log do Angular CLI.

PS C:\Desenvolvimento\Angular 2\alurapic> ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-07-26T16:15:18.854Z
Hash: 6750abd558d5e4b663cd
Time: 15342ms
chunk {main} main.js, main.js.map (main) 26.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 159 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.38 MB [initial] [rendered]
i 「wdm」: Compiled successfully.

Sugiro começar do zero essa parte ou compartilhar o projeto no github. Só pode ser um problema nos arquivos. Se em algum momento você criou arquivo em minúsculo e depois mudou pode ter ficado um arquivo velho no seu projeto. Estou confiando que a estrutura está certa, mas o melhor eu ver com meus próprios olhos.

Cole o log completo do navegador. Precisamos resolver isso rápido, pois hoje mesmo 25 pessoas já terminaram o curso sem problema algum.

Seu arquivo tem NgModule, chuto que existem dois. Um com e um sem e você importou o que não tem. Mas só eu olhando sua estrutura.

Segue o log completo do navegador:

compiler.js:215 Uncaught Error: Unexpected value 'AppRoutingModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:215)
    at compiler.js:10458
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10433)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:22545)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22526)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:22486)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:4288)
    at Object../src/main.ts (main.ts:12)

O erro diz que o arquivo que você importou não tem NgModule, mas tem então chuto que vc tem mais de um arquivo e importou um que não tem. Só olhando seu projeto no Git.

Professor, segue o link do projeto la no Git: https://github.com/sinaidej/alurapic. No aguardo.

solução!

O problema é erro de digitação. Você fez:

NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {}

NgModule é um decorator! Ele precisa iniciar com @. Você disse que o código esta idêntico ao curso e confiei nisso, mas não estava, porque em nenhum momento eu faço NgModule, eu faço @NgModule.

Só corrigir e continuar com o projeto.

Ok professor! Obrigado pela sua atenção e me desculpe a falta de atenção de atenção de minha parte.