角度：无法获取/
我正在尝试打开、构建和运行其他人的 Angular 4 项目，但是当我以自己的方式运行时，我无法查看该项目。我不知道出了什么问题或我现在应该做什么。我已经准备好使用 NPM 和 NodeJS
我采取的步骤是：
打开项目
npm 安装
服务
该项目以正确的方式编译。 （我有一个自己的 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 正在运行一些东西......此外，此人的另一个项目的行为方式相同.
https://i.stack.imgur.com/PKZlU.png
有人知道发生了什么吗？
编辑
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。
http://localhost:4200/# ？
, { useHash: true }，它的行为是否会有所不同？
我解决此错误的方法是查找并修复控制台报告的错误。
在命令行/终端中运行 ng build，它应该会显示一个有用的错误，例如此处的红色示例：Property 'name' does not exist on type 'object'。
https://i.stack.imgur.com/Q51YX.png
对我来说，路径也有问题，但我在根文件夹中有百分号。
在我用空格替换 %20 后，它开始工作:)
问题是我在文件夹 /project/src/app 中运行了命令。导航回项目文件夹，然后转到 /project 并从那里运行 ng serve 解决了我的问题。
我遇到了由构建错误引起的相同错误。我在我的应用程序目录中运行了 ng build，它帮助我纠正了我的错误
我在使用 Angular 9 时遇到了同样的问题。
就我而言，我将 angular.json 文件从
"aot": true
至
"aot": false
这个对我有用。
检查是否在 index.html 中设置了基数
<head>
<base href="/">
...
</head>
我正在使用 export class TestCalendar implements OnInit{} 但我没有编写函数
ngOnInit() {
/* Display initial */
}
.运行命令 ng serve 后，我发现我没有使用 ngOnInit(){} 。一旦我实施，它就开始正常工作。希望它可以帮助某人。
我在使用 Angular 6+ 应用程序和 ASP.NET Core 2.0 时遇到了同样的问题
我之前刚刚尝试将 Angular 应用程序从 CSS 更改为 SCSS。
我的解决方案是转到 src/angularApp 文件夹并运行 ng serve。这帮助我意识到我错过了将 src/styles.css 文件更改为 src/styles.scss
当我们在我们的项目中键入“ng serve”时，刚刚弄清楚了原因..
例如 C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>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 字符。
我指的是我的供应商之一，它有两种不同的外壳。其中一个是错误的，但只有 webpack 编译器在抱怨。我不得不进入 ClientApp 文件夹并使用 ng build 或 ng serve 来查看错误。 （带有 Angular 5 的 ASP.NET Core SPA）
检查 baseHref 设置为“/”（ angular.cli ）
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"baseHref": "/"
如果它不起作用，请检查 index.html 中的基本 href 是否设置为“/”
对我来说，问题在于 @Component Selector 路径指向错误的路径。改完之后问题就解决了。
@Component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html',
providers: [ToolbarService, GroupService, FilterService, PageService, ExcelExportService, PdfExportService]
})
显然，由于多种原因会发生此错误。对于那些在搜索“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" 并重建来修复它.
如果您更改了任何名称或文件组件，请检查它是否是正确的名称
@NgModule({
declarations: [
NewNameComponent
],
imports: [
CommonModule,
],
exports:[
NewNameComponent
]
})
export class YourModule { }
一般是版本问题。 Node.js v8 无法使用 angular-cli 6.0 或更高版本进行编译。 angularcli v6 及更高版本适用于最新的节点版本。请确保您的节点版本是 v8，那么您需要安装 angular-cli 到 1.7.4。在 cmd 中输入 ng -v 命令并检查 cli 和 node 版本。
请参阅此答案 here。您需要将 Node 未使用的所有路由重定向到 Angular：
app.get('*', function(req, res) {
res.sendfile('./server/views/index.html')
})
通过选择在输出窗口中显示 ASP.NET Core Web 服务器输出的选项，您可以在停止调试后查看错误。就我而言，我指向的是不同的 templateUrl。
首先，从您的项目中删除现有文件 package.lock.json 和 node_modules。然后，第一步是编写 npm cache clean --force。其次，在终端上也写这个命令 npm i 。这个过程解决了我的错误。 :D
许多答案并没有真正意义，但仍然有赞成票，这让我很好奇为什么这在某些情况下仍然有效。
在 angular.json
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"deployUrl": "/",
"baseHref": "/",
为我工作。
对我来说，问题是我将项目文件夹保存在 C:\Users\... 下，这确实是个问题。在我将它保存在 C:\ 然后 npm install 和 ng serve --open 它工作得很好！
在我的 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/",
碰到同样的问题，我试过这个：-ng build
它奏效了！
另一个问题可能是您正在导入组件而不是它的模块。
imports: [
YourComponent, // <-- Should be YourComponentModule
]
我遇到的奇怪的事情是，我可以在应用程序运行时对 Visual Studio 2019 中的组件进行更改并查看我的更改，但是当我重新启动应用程序时，我得到了无法获取/错误。我没有运行 IIS Express，而是选择使用 Angular JS 运行应用程序，构建窗口显示 app.component.ts 中存在错误。原来是文件末尾的一个额外的 }。不知道它是如何到达那里的，但是当我删除它时，该应用程序运行良好。
对我来说，问题是我的本地 CLI 与我的全局 CLI 版本不同 - 通过运行以下命令对其进行更新可以解决问题：
npm install --save-dev @angular/cli@latest
删除节点模块文件夹对我有用。
删除节点模块文件夹
运行 npm 安装。
重新运行应用程序，它应该可以工作。
关注公众号
不定期副业成功案例分享
ng serve也可以运行构建/编译。两个命令都出现了相同的消息。