Angular: Cannot Get /

Question

I am trying to open, build and run someone else's Angular 4 project but I am not able to view the project when I run it my way. I don't see what is going wrong or what I should do now. I already had everything in place to use NPM and NodeJS

The steps I took were:

• Open up the project
• npm install
• ng serve

The project compiles the right way. (I have an own Angular app and I know how this looks like) The console is showing:

'** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **'.

Then, when I opened up a web browser, I navigated to localhost:4200 and a web page with the following text were shown:

'Cannot GET /'

And on the console was the following text:

'GET http://localhost:4200/ 404 (Not Found)'

The project should work fine but I am not able to navigate to a working URL on the web page. Routing is set-up another way as I am used to doing this. In app.module.ts the following is implemented:

app.module.ts

const appRoutes: Routes = [ { path: '',   redirectTo: 'tree', pathMatch: 'full' }, { path: 'admin', component: AdminPanelComponent, canActivate: [AuthGuard], children: [{path:'', component: PanelComponent},{path: 'add', component:  AddTreeComponent}, {path:'manage-trees', component:ManageTreesComponent},  {path:'manage-users', component: ManageUsersComponent}, {path:'view-trees',  component: ViewTreeComponent}]}, {path:'tree', component: TreeComponent}, {path:'error', component: ErrorComponent}, {path:'unauthorized', component: UnauthorizedComponent}, {path:'login', component: LoginComponent}, {path:'entire-tree', component: EntireTreeComponent}, { path: '**', component: PageNotFoundComponent }, ]; 

Also opening up a web page like; localhost:4200/tree does not work. When I let angular stop serving the web page, the web page displays: "this site can't be reached'. So I think there is running something at localhost:4200... Also, another project of this person behaves the same way.

Does anybody know what is going on?

EDIT

app.module.ts

RouterModule.forRoot(appRoutes, { useHash: true }) 

Package.json

{ "name": "xxx", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "angular-oauth2-oidc": "^1.0.20", "angular-polyfills": "^1.0.1", "angular2-jwt": "^0.2.3", "angular2-spinner": "^1.0.10", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "ngx-bootstrap": "^1.8.0", "rxjs": "^5.1.0", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "1.2.4", "@angular/compiler-cli": "^4.0.0", "@angular/language-service": "^4.0.0", "@types/jasmine": "2.5.45", "@types/node": "~6.0.60", "codelyzer": "~3.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-coverage-istanbul-reporter": "^1.2.1", "protractor": "~5.1.2", "ts-node": "~3.0.4", "tslint": "~5.3.2", "typescript": "~2.3.3"  } } 

I also see an icon next to the tab name with the label: "Error".

OBSERVATION:

New observation:

After I ran npm install -g angular-cli I wasn't able to run ng serve. (You have to be inside an angular-cli project in order to use the build command after reinstall of angular-cli)

Then I ran npm install -g @angular/cli@latest and I was able to use ng serve again.

OBSERVATION 2:

After building the app with: 'ng build ...' there is no index.html in the 'dist' folder... When I set the website online, there is just a folder structure instead of a nice website. I think that's because there is no index.html.

Answer 1

The way I resolved this error was by finding and fixing the error that the console reported.

Run ng build in your command line/terminal, and it should display a useful error, such as the example in red here: Property 'name' does not exist on type 'object'.

Answer 2

For me it also was problem with path, but I had percentage sign in the root folder.

After I replaced %20 with space, it started to work :)