角度：无法获取/

Question

我正在尝试打开、构建和运行其他人的 Angular 4 项目，但是当我以自己的方式运行时，我无法查看该项目。我不知道出了什么问题或我现在应该做什么。我已经准备好使用 NPM 和 NodeJS

我采取的步骤是：

• 打开项目
• npm 安装
• 服务

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

‘\\* NG Live Development Server 正在监听 localhost:4200，在 http://localhost:4200 上打开浏览器 *‘。

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

‘不能获取 /’

控制台上有以下文字：

‘GET http://localhost:⁴²⁰⁰⁄₄₀₄ （未找到）’

该项目应该可以正常工作，但我无法导航到网页上的工作 URL。路由设置是另一种方式，因为我习惯这样做。在 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 },
];

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

有人知道发生了什么吗？

编辑

app.module.ts

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

包.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"
 }
}

我还在标签名称旁边看到一个带有标签的图标：“错误”。

观察：

新观察：

在我运行后 npm install -g angular-cli 我无法运行 ng serve 。 （您必须在 angular-cli 项目中才能在重新安装 angular-cli 后使用 build 命令）

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

观察 2：

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

原文由 Klyner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Klyner 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

另一个问题可能是您正在导入组件而不是它的模块。

 imports: [
  YourComponent, // <-- Should be YourComponentModule
]

原文由 Raphaël Balet 发布，翻译遵循 CC BY-SA 4.0 许可协议