Javascript 角度：无法获得/_Javascript_Node.js_Angular_Typescript

Javascript 角度：无法获得/

javascript node.js angular typescript

Javascript 角度：无法获得/,javascript,node.js,angular,typescript,Javascript,Node.js,Angular,Typescript,我正在尝试打开、构建和运行其他人的Angular 4项目，但当我按自己的方式运行时，我无法查看该项目。我不知道哪里出了问题，也不知道我现在该怎么办。我已经准备好了使用NPM和NodeJS的一切我采取的步骤是：打开项目 npm安装 ng发球该项目以正确的方式编译。（我有一个自己的Angular应用程序，我知道它是什么样子）控制台显示： “**NG Live Development Server正在本地主机上侦听：4200，请在**上打开浏览器。” 然后，当我打开一个web浏览器时，我导航

我正在尝试打开、构建和运行其他人的Angular 4项目，但当我按自己的方式运行时，我无法查看该项目。我不知道哪里出了问题，也不知道我现在该怎么办。我已经准备好了使用NPM和NodeJS的一切

我采取的步骤是：

打开项目
npm安装
ng发球

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

“**NG Live Development Server正在本地主机上侦听：4200，请在**上打开浏览器。”

然后，当我打开一个web浏览器时，我导航到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 },
];

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

还打开一个网页像；localhost:4200/树不工作。当我让angular停止为网页提供服务时，网页显示：“无法访问此网站”。因此，我认为在localhost上正在运行某些东西：4200…此外，此人的另一个项目也有同样的行为

有人知道发生了什么事吗

编辑

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 },
];

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

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

我还看到选项卡名称旁边有一个图标，标签是：“Error”

观察：

新的观察结果：

运行

npm安装-g angular cli

后，我无法运行

ng serve

（重新安装angular cli后，您必须在angular cli项目中才能使用build命令）

然后我运行了

npm安装-g@angular/cli@latest

并且我能够再次使用

ng serve

观察结果2:

使用“ng build…”创建应用程序后，“dist”文件夹中没有index.html…当我将网站设置为联机时，只有一个文件夹结构，而不是一个好的网站。我想这是因为没有index.html。

检查是否设置了in

index.html

base

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

...

问题是我运行了文件夹

/project/src/app

中的命令。导航回项目文件夹，以

/project

并从那里运行

ng serve

解决了我的问题。

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

在我用空格替换%20后，它开始工作：）

我正在使用导出类TestCalendar实现OnInit{}，但我没有编写该函数

 ngOnInit() {
    /* Display initial */
  }

。在运行命令

ngserve

后，我发现我没有使用

ngOnInit（）{}

。一旦我实现，它就开始正常工作。希望它能帮助别人。

我指的是我的一个提供程序，它有两个不同的大小写。其中一个是错误的，但只有网页包编译器在抱怨。我必须进入ClientApp文件夹，使用ng build或ng serve来查看错误。（ASP.NET Core SPA with Angular 5）

我遇到了由生成错误引起的相同错误。我在应用程序目录中运行了ng build，这有助于我纠正错误

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

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

我的解决方案是转到

src/angularApp

文件夹并运行

ngserve

。这帮助我意识到我没有将

src/styles.css

文件更改为

src/styles.scss

，我解决此错误的方法是找到并修复控制台报告的错误
在命令行/终端中运行
ng build
，它将显示一个有用的错误，例如此处的红色示例：类型“object”上不存在属性“name”

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

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

通常这是一个版本控制问题。Node.js v8无法使用angular cli 6.0或更高版本进行编译。angularcli v6及更高版本将适用于最新的节点版本。请确保如果您的节点版本为v8，则需要安装angular cli至1.7.4。
在cmd中输入ng-v命令并检查cli和节点版本。
在项目中键入“ng serve”时，我们刚刚找到了原因。
例如
C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve
无法解析模块
C:\Users\EdgeTech1\Desktop\C

结果：
编译失败
根本原因：
我的文件夹名是
C#Project..
注意：我试图删除项目名称中的
#
，我将
C#Project
重命名为
CSharp
，并再次尝试打开
cmd
提示符，键入了相同的内容
例如：

C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve
并且我的项目已成功编译。因此，在命名项目文件时尽量避免使用ASCII字符。
请参阅此答案。您需要将节点未使用的所有路由重定向到：

app.get('*', function(req, res) { res.sendfile('./server/views/index.html') })
检查baseHref是否设置为“/”（angular.cli）

如果它不起作用，请检查index.html中的base href是否设置为“/”
对于我来说，问题在于@Component Selector path指向错误的路径。更改它后，问题得到了解决

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

通过选择在“输出”窗口中显示ASP.NET Core Web服务器输出的选项，可以在停止去bug后看到错误。
在我的例子中，我指向一个不同的templateUrl。
我所经历的奇怪的事情是，我可以在Visual Studio 2019中运行应用程序时更改组件并查看我的更改，但是，当我重新启动应用程序时，我得到了无法获取/e
"aot": false

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