Solucionado (ver solução)
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.