title: Angular: Cannot Get /
body: <p>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</p>
  
  <p>The steps I took were:</p>
  
  <ul>
  <li>Open up the project</li>
  <li>npm install</li>
  <li>ng serve</li>
  </ul>
  
  <p>The project compiles the right way. (I have an own Angular app and I know how this looks like) The console is showing: </p>
  
  <blockquote>
    <p>'** NG Live Development Server is listening on localhost:4200, open your browser on <a href="http://localhost:4200" rel="noreferrer">http://localhost:4200</a> **'.</p>
  </blockquote>
  
  <p>Then, when I opened up a web browser, I navigated to localhost:4200 and a web page with the following text were shown: </p>
  
  <blockquote>
    <p>'Cannot GET /'</p>
  </blockquote>
  
  <p>And on the console was the following text:</p>
  
  <blockquote>
    <p>'GET <a href="http://localhost:4200/" rel="noreferrer">http://localhost:4200/</a> 404 (Not Found)'</p>
  </blockquote>
  
  <p>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:</p>
  
  <p>app.module.ts</p>
  
  <pre><code>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 },
  ];
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/PKZlU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PKZlU.png" alt="enter image description here"></a></p>
  
  <p>Does anybody know what is going on? </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>app.module.ts</p>
  
  <pre><code>RouterModule.forRoot(appRoutes, { useHash: true })
  </code></pre>
  
  <p>Package.json</p>
  
  <pre><code>{
  "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"
   }
  }
  </code></pre>
  
  <p>I also see an icon next to the tab name with the label: "Error".</p>
  
  <p><strong>OBSERVATION:</strong></p>
  
  <p>New observation:</p>
  
  <p>After I ran <code>npm install -g angular-cli</code> I wasn't able to run <code>ng serve</code>. (You have to be inside an angular-cli project in order to use the build command after reinstall of angular-cli)</p>
  
  <p>Then I ran <code>npm install -g @angular/cli@latest</code> and I was able to use <code>ng serve</code> again. </p>
  
  <p><strong>OBSERVATION 2:</strong></p>
  
  <p>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.</p>