CODEWITHSUNDEEP
angular
user10071706
user10071706

Reputation:

ERROR in src/app/app.module.ts(23,3): error TS1146: Declaration expected

I've been trying to resolve this error for days and I don't know what to do anymore. I'm new with Angular and I don't know how things work yet. I'm stuck and I don't understand how to fix it. I've already installed and uninstalled several times the modules on their latest version.

Error: 

Date: 2018-07-12T15:50:51.658Z - Hash: e52bb885c7cfcb67e69c - Time: 11159ms
3 unchanged chunks
chunk {main} main.js, main.js.map (main) 5.74 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.14 MB [initial] [rendered]

WARNING in ./src/main.ts
8:41-50 "export 'AppModule' was not found in './app/app.module'
i ｢wdm｣: Compiled with warnings.
i ｢wdm｣: Compiling...
 10% building modules 0/2 modules 2 active … lazy groupOptions: {} namespace objectERROR in src/app/app.module.ts(23,3): error TS1146:     Declaration expected.

Date: 2018-07-12T15:53:03.615Z - Hash: 8944712e4124fea4b527 - Time: 802ms
4 unchanged chunks
chunk {styles} styles.js, styles.js.map (styles) 74.6 kB [initial] [rendered]

WARNING in ./src/main.ts
8:41-50 "export 'AppModule' was not found in './app/app.module'
i ｢wdm｣: Compiled with warnings.
i ｢wdm｣: Compiling...

Date: 2018-07-12T15:57:27.693Z - Hash: 8944712e4124fea4b527 - Time: 421ms
5 unchanged chunks

WARNING in ./src/main.ts
8:41-50 "export 'AppModule' was not found in './app/app.module'
i ｢wdm｣: Compiled with warnings.
ERROR in src/app/app.module.ts(23,3): error TS1146: Declaration expected.

My index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
  <title>ConFusion</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

App.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar'; 
import { FlexLayoutModule } from '@angular/flex-layout';


import 'hammerjs';

@NgModule({

  imports: [ 


    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule

  ],

})

App.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

App.component.html

<!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary"> <span>Ristorante Con Fusion</span> </mat-toolbar>

Styles.scss

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

// some basic resets 

body { 
  padding: 0; 
  margin: 0; 
  font-family: Roboto, sans-serif; 

}

Upvotes: 0

Views: 2655

Answers (3)

user10071706
user10071706

Reputation:

I fixed the problem! I'll leave the steps below in case anyone has the same problem:

I deleted everything and re-installed Angular-cli globally:

npm install -g @angular/cli@latest

Created conFusion project:

ng new conFusion --style=scss

In the conFusion project I installed:

npm install @angular/material@latest --save
npm install @angular/cdk@latest --save
npm install --save @angular/animations@latest
npm install --save hammerjs@latest

In the 'head' of index.html I added: 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Then:

npm install --save @angular/flex-layout@latest

In app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar'; 
import { FlexLayoutModule } from '@angular/flex-layout';


import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent
  ],
   imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the app.component.html I replaced with:

<mat-toolbar color="primary"> <span>Ristorante Con Fusion</span> </mat-toolbar>

In styles.scss:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

// some basic resets 

body { 
 padding: 0; 
 margin: 0; 
 font-family: Roboto, sans-serif; 

}

With all that the app runs perfect!

Upvotes: 0

Karnan Muthukumar
Karnan Muthukumar

Reputation: 1863

you are missing to add this line. Then only error occured.

export class AppModule {}

You are not added this line in app.module.ts file. Also in your main.ts file you are try to use this AppModule in boostrapping. Then only it shows errors.Once you added this line the error will be solve.

I hope you understand what you did mistake. For more reference go angular.io official website to start learn angular

Upvotes: 0

David Anthony Acosta
David Anthony Acosta

Reputation: 4908

You need an export statement for your module:

export class AppModule {}

Upvotes: 1

Related Questions