Error in angular 2 module not found: cant resolve '.app

Question

File structure as follows

 

->src

->app

->appcomponent.css

->appcomponent.html

->appcomponent.spec.ts

->appcomponent.ts

 

i written the below code in visual studio code

 

App.component.ts code as follows

 

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

@Component({

selector: 'my-app',

templateUrl: 'app/app.component.html'

})

export class AppComponent {

appTitle: string = 'Welcome';

appStatus: boolean = true;

}

 

app.component.html code as follows

 

<div *ngIf = "appStatus">{{appTitle}} Tutorialspoint

 

when i run in browser error as follows

 

ERROR in ./src/app/app.componenet.ts

 

Module not found: Error cant resolve '.app/app.component.html' in 'C:\users\1900055\tour\src\app

 

resolve './app/app.component.html' in 'C:\users\1900055\tour\src\app'

using description file: C:\users\1900055\package.json <relative path: ./src/app>

 

Field browser does not contain a valid false configuration.

 

what is the mistake in above code.

 

please help me

Answer 1

sir can show the root folder name 

and then subfolders  

Answer 2

sir change from '.app/app.component.html'

 

to

 

'component.html'

 

This may work

Answer 3

Replace Your main.ts with following code...

 

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Still not working then please check by changin <base href=""> of index.html
 

Answer 4

App.module.ts code as follows

 

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

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

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

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

 

Main.ts code as follows

 

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

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule)

.catch(err => console.log(err));

 

i send the code of main.ts and app.module.ts.

Answer 5

Code is correct, there is no any mistake. please show your main.ts, appModule.ts and