角度：无法获取/

【问题标题】：Angular: Cannot Get /角度：无法获取/
【发布时间】：2018-03-28 00:48:34
【问题描述】：

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

我采取的步骤是：

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

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

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

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

'无法获取 /'

控制台上显示以下文本：

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

该项目应该可以正常工作，但我无法导航到网页上的工作 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。

【问题讨论】：

  • 嘿，你能显示 package.json 文件吗？
  • 尝试导航http://localhost:4200/# ?
  • 好问题 AnteJablanAdamović。不幸的是，这给出了相同的结果。同：localhost:4200/#/tree
  • 没有完整的代码很难说，但它应该可以工作。
  • 如果你取下, { useHash: true }，它的行为会有什么不同

标签： javascript node.js angular typescript


【解决方案1】：

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

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

【讨论】：

  • ng serve 也可以运行构建/编译。两个命令都显示相同的消息。
【解决方案2】：

对我来说，路径也有问题，但我在根文件夹中有百分号。

在我将 %20 替换为空格后，它开始起作用了 :)

【讨论】：

  • 呃，这也是我的解决方法 - 作为参考，我在 Mac 上，它在 Windows 框中运行良好
  • 这是完美的，拯救了我的一天。基本上我从 azure devops 克隆了存储库，它在存储库名称中有空格。非常感谢。
  • 你说的是哪个文件？
  • 我正在写关于主文件夹名称的代码，例如我从 Azure Devops 克隆了项目“My Project”，它在我的磁盘上创建了文件夹“My%20Project”
  • 哇，谢谢你，我花了很多时间来调试它。正如您所说，修复方法是从父目录名称中删除特殊字符。
【解决方案3】：

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

【讨论】：

    【解决方案4】：

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

    【讨论】：

    • 能够诊断错误非常有帮助。谢谢
    【解决方案5】：

    我在使用 Angular 9 时遇到了同样的问题。

    就我而言，我将 angular.json 文件从

    "aot": true

    到

    "aot": false

    它对我有用。

    【讨论】：

      【解决方案6】：

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

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

      【讨论】：

      • 你能检查一下这个stackoverflow.com/questions/34800254/…
      • 谢谢，但我的项目文件夹没有空间。
      • 其他路线怎么样？他们是否按预期工作？
      • 不，没有。
      • 我有这个，但仍然得到错误
      【解决方案7】：

      我使用的是export class TestCalendar implements OnInit{}，但我没有编写函数

       ngOnInit() {
    /* Display initial */
  }

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

      【讨论】：

        【解决方案8】：

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

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

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

        【讨论】：

        • 我遇到了同样的情况，但我已经更改了文件名，这仍然在冲洗，我。我还可以在 Angular 应用程序的上下文中成功构建包。有什么是 dotnet 无法处理意外的文件重命名之类的吗？
        【解决方案9】：

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

        【讨论】：

          【解决方案10】：

          当我们在我们的项目中输入“ng serve”时，我们才知道原因..
          例如C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject&gt;ng serve

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

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

          注意：我尝试删除项目名称中的#，将C# Project 重命名为CSharp，然后尝试再次打开cmd 提示符，输入相同的内容..

          例如：

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

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

          【讨论】：

          • 这就是解决我的问题的方法。项目在两个单词之间有一个空格 ascii %20，这就是触发 CSP 错误的原因。很有趣。感谢您的帮助！
          【解决方案11】：

          检查baseHref是否设置为“/”（angular.cli）

              "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
                "baseHref": "/"

          如果不起作用，请检查 index.html 中的基本 href 是否设置为“/”

          【讨论】：

            【解决方案12】：

            对我来说，问题在于 @Component 选择器路径指向错误的路径。修改后问题解决了。

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

            【讨论】：

              【解决方案13】：

              这个错误的发生显然有多种原因。对于那些在搜索“Cannot GET /”后登陆这里的人来说，这是我的经验

              我在将 ng-bootstrap v6 安装到 Angular 8 项目中时遇到了这个错误。我将 ng-bootstrap 降级到 v5，现在似乎没问题，因为 ng-bootstrap v6 仅与 Angular 9 兼容。

              这发生在使用 Angular .NET Core 模板在 Visual Studio 2019 中工作时。同时，Visual Studio 的输出面板显示了这个听起来很深奥的错误：“TS1086：无法在环境上下文中声明访问器”，这导致我来到这里，经过一番阅读，让我认为这是一个版本问题.好像是的。

              我通过将 package.json 中的 "@ng-bootstrap/ng-bootstrap": "^6.0.0"," 更改为 "@ng-bootstrap/ng-bootstrap": "^5.0.0" 来修复它文件和重建。

              【讨论】：

                【解决方案14】：

                如果您更改了任何名称或文件组件，请检查它是否是正确的名称

                @NgModule({
  declarations: [
    NewNameComponent
  ],
  imports: [
    CommonModule,
  ],
  exports:[
    NewNameComponent
     ]
})
export class YourModule { }

                【讨论】：

                  【解决方案15】：

                  通常这是一个版本问题。 Node.js v8 无法使用 angular-cli 6.0 或更高版本进行编译。 angularcli v6 及更高版本适用于最新的节点版本。请确保您的节点版本是 v8，那么您需要安装 angular-cli 到 1.7.4。 在 cmd 中输入 ng -v 命令并检查 cli 和 node 版本。

                  【讨论】：

                    【解决方案16】：

                    看到这个答案here。您需要将 Node 未使用的所有路由重定向到 Angular：

                    app.get('*', function(req, res) {
  res.sendfile('./server/views/index.html')
})

                    【讨论】：

                      【解决方案17】：

                      通过选择在输出窗口中显示 ASP.NET Core Web 服务器输出的选项，您可以在停止调试后查看错误。 就我而言，我指向的是不同的 templateUrl。

                      【讨论】：

                      • 你的回答不够清楚。请详细说明以使其对社区更有用。
                      【解决方案18】：

                      首先，从您的项目中删除现有文件 package.lock.json 和 node_modules。 然后，第一步是编写npm cache clean --force。其次，在终端上也写这个命令npm i。这个过程解决了我的错误。 :D

                      【讨论】：

                        【解决方案19】：

                        许多答案并没有真正意义，但仍然有赞成票，这让我很好奇为什么在某些情况下这仍然有效。

                        在angular.json

                        "serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "deployUrl": "/",
    "baseHref": "/",

                        为我工作。

                        【讨论】：

                          【解决方案20】：

                          对我来说，问题是我将项目文件夹保存在 C:\Users\... 下，这确实是个问题。在我将它保存在 C:\ 下之后，npm install 和 ng serve --open 它工作得很好！

                          【讨论】：

                            【解决方案21】：

                            在我的 angular.json 文件中，deployUrl 设置为 static/ang。

                            "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "deployUrl": "/static/ang/",
             ....

                            这导致我的应用程序从 localhost:4200/static/ang 获得服务

                            删除 deployUrl 为我修复了它。

                            编辑： 我将 deployUrl 转移到 configurations 下，因为它在为生产构建时很重要。 （因为我的延迟加载块没有在静态 url 上得到服务）。

                            "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                 ....
                 ....
               },
               "configurations": {
                  "deployUrl": "/static/ang/",

                            【讨论】：

                              【解决方案22】：

                              碰到同样的问题，我试过这个： -ng 构建

                              它成功了！

                              【讨论】：

                                【解决方案23】：

                                我遇到的奇怪的事情是，我可以在应用程序运行时更改 Visual Studio 2019 中的组件并查看我的更改，但是当我重新启动应用程序时，我得到了无法获取/错误。我没有运行 IIS Express，而是选择使用 Angular JS 运行应用程序，构建窗口显示 app.component.ts 中存在错误。原来是文件末尾的一个额外的 }。不知道它是如何到达那里的，但是当我删除它时，该应用程序运行良好。

                                【讨论】：

                                • 如何回答原始问题？
                                • 作为 Angular 的新手，我也遇到了“无法获取 /”错误。它可能像语法错误一样简单。通过在 Visual Studio 中使用 Angular JS 而不是 IIS Express 运行代码，我能够发现错误在哪里。命令窗口准确地告诉我是哪个文件导致了问题。
                                • 谢谢，这确实对某人有帮助。
                                【解决方案24】：

                                对我来说，问题是我的本地 CLI 与我的全局 CLI 版本不同 - 通过运行以下命令对其进行更新解决了问题：

                                npm install --save-dev @angular/cli@latest

                                【讨论】：

                                  【解决方案25】：

                                  删除节点模块文件夹对我有用。

                                  • 删除节点模块文件夹
                                  • 运行npm install。
                                  • 重新运行应用程序，它应该可以工作了。

                                  【讨论】：

                                    猜你喜欢
                                    • 2019-05-18
                                    • 2019-01-07
                                    • 1970-01-01
                                    • 1970-01-01
                                    • 1970-01-01
                                    • 1970-01-01
                                    • 2022-01-06
                                    • 2018-11-20
                                    • 1970-01-01
                                    相关资源
                                    最近更新 更多
                                    热门标签
                                    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode