Javascript 角度：无法获取 /

Angular: Cannot Get /

提问by Klyner

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

我正在尝试打开、构建和运行其他人的 Angular 4 项目，但是当我按照自己的方式运行时却无法查看该项目。我不知道出了什么问题，也不知道我现在应该做什么。我已经准备好使用 NPM 和 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:

该项目以正确的方式编译。（我有一个自己的 Angular 应用程序，我知道它的样子）控制台显示：

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

'** NG Live Development Server 正在侦听 localhost:4200，在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:

然后，当我打开 Web 浏览器时，我导航到 localhost:4200 并显示了一个包含以下文本的网页：

'Cannot GET /'

'不能获取 /'

And on the console was the following text:

控制台上有以下文字：

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

'GET http://localhost:4200/404（未找到）'

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:

该项目应该可以正常工作，但我无法导航到网页上的工作 URL。路由是以另一种方式设置的，因为我习惯这样做。在 app.module.ts 中实现了以下内容：

app.module.ts

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.

还打开一个网页，如；localhost:4200/tree 不起作用。当我让 angular 停止为网页提供服务时，网页显示：“无法访问此站点”。所以我认为在 localhost:4200 上运行了一些东西......此外，此人的另一个项目的行为方式相同.

Does anybody know what is going on?

有人知道发生了什么吗？

EDIT

编辑

app.module.ts

app.module.ts

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

Package.json

包.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-cliI 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)

跑了之后npm install -g angular-cli就跑不动了ng serve。（您必须在 angular-cli 项目中才能在重新安装 angular-cli 后使用 build 命令）

Then I ran npm install -g @angular/cli@latestand I was able to use ng serveagain.

然后我跑了npm install -g @angular/cli@latest，我可以ng serve再次使用。

OBSERVATION 2:

观察 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.

使用以下命令构建应用程序后：'ng build ...' 'dist' 文件夹中没有 index.html... 当我将网站设置为在线时，只有一个文件夹结构，而不是一个不错的网站。我认为那是因为没有 index.html。

采纳答案by Klyner

The problem was that I ran the commands within the folder /project/src/app. Navigating back to the project folder so to /projectand running ng servefrom there solved my problem.

问题是我在文件夹中运行了命令/project/src/app。导航回项目文件夹/project并ng serve从那里运行解决了我的问题。

回答by DineshNS

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

我解决此错误的方法是查找并修复控制台报告的错误。

Run ng buildin 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'.

ng build在您的命令行/终端中运行，它应该会显示一个有用的错误，例如此处的红色示例：Property 'name' does not exist on type 'object'。

回答by yezior

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 :)

在我用 space 替换 %20后，它开始工作了:)

回答by J.Kirk.

I had the same error caused by build errors. I ran ng build in the directory of my application which helped me correct my errors

我遇到了由构建错误引起的相同错误。我在我的应用程序目录中运行了 ng build，它帮助我纠正了错误

回答by MuhammadMohsan

I was using export class TestCalendar implements OnInit{}but i did not write the function

我正在使用export class TestCalendar implements OnInit{}但我没有写函数

 ngOnInit() {
    /* Display initial */
  }

. After running the command ng serve, i found out that i was not using ngOnInit(){}. Once i implemented, it started working fine. Hope it helps someone.

. 运行命令后ng serve，我发现我没有使用ngOnInit(){}. 一旦我实施，它开始工作正常。希望它可以帮助某人。

回答by Salih ?enol ?akarc?

Check if in index.htmlbase is set

检查是否index.html设置了基数

<head>
  <base href="/">
  ...
</head>

回答by MaylorTaylor

I had the same problem with an Angular 6+ app and ASP.NET Core 2.0

我在 Angular 6+ 应用程序和 ASP.NET Core 2.0 上遇到了同样的问题

I had just previously tried to change the Angular app from CSS to SCSS.

我之前刚刚尝试将 Angular 应用程序从 CSS 更改为 SCSS。

My solution was to go to the src/angularAppfolder and running ng serve. This helped me realize that I had missed changing the src/styles.cssfile to src/styles.scss

我的解决方案是转到src/angularApp文件夹并运行ng serve. 这帮助我意识到我错过了将src/styles.css文件更改为src/styles.scss

回答by Arianne Hernandez

Just figured out the reason when we type "ng serve" INSIDE OUR PROJECT..
for example C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve

当我们在我们的项目中输入“ng serve”时才弄清楚原因..
例如C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve

could not resolve module C:\Users\EdgeTech1\Desktop\C
results: failed compiled

无法解析模块C:\Users\EdgeTech1\Desktop\C
结果：failed compiled

root cause:
My folder name was C# Project..

根本原因：
我的文件夹名称是C# Project..

Note: I tried to remove the #in my Project Name, I rename C# Projectto CSharpinstead and I tried to open cmdprompt again, typed the same thing..

注：我试图删除#在我的项目名称，重新命名C# Project，以CSharp代替我试图打开cmd再次提示，输入了同样的事情..

for example:

例如：

C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve

and my project compiled successfully.. so as much as possible avoid ASCII characters in naming projects files.

并且我的项目编译成功..所以在命名项目文件时尽可能避免使用 ASCII 字符。

回答by DonMax

For me the issue was with @Component Selector path was pointing to wrong path. After changing it solved the issue.

对我来说，问题是 @Component Selector 路径指向错误的路径。改了之后问题就解决了。

@Component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html',
providers: [ToolbarService, GroupService, FilterService, PageService, ExcelExportService, PdfExportService]
})

回答by Perrier

I was referring to one of my provider with two different casing. One of them was wrong but only the webpack compiler was complaining. I had to step into the ClientApp folder and use ng build or ng serve to see the errors. (ASP.NET Core SPA with Angular 5)

我指的是我的一位供应商有两种不同的外壳。其中一个是错误的，但只有 webpack 编译器在抱怨。我不得不进入 ClientApp 文件夹并使用 ng build 或 ng serve 来查看错误。（带有 Angular 5 的 ASP.NET Core SPA）