角度: 无法获得/

我试图打开,建立和运行别人的角4项目,但我不能看到的项目,当我运行它我的方式。我不知道出了什么问题,也不知道现在该怎么办。我已经为使用 NPM 和 NodeJS 准备好了一切

我采取的步骤是:

  • 打开项目
  • Npm 安装
  • 发球

该项目以正确的方式编译。(我有一个自己的 Angular 应用程序,我知道这看起来像)控制台显示:

NG Live Development Server 正在监听 localhost: 4200,请在 http://localhost:4200上打开浏览器。

然后,当我打开一个网页浏览器,我导航到 localhost: 4200,一个网页显示如下文字:

“无法获得/”

控制台上有以下文字:

“获取 http://localhost:4200/404(未找到)”

这个项目应该工作良好,但我不能导航到一个工作的网址在网页上。路由是另一种设置方式,因为我习惯于这样做。在 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 不工作。当我让棱角停止服务的网页,网页显示: “这个网站不能达到”。所以我认为在 localhost 上运行了一些东西: 4200... ... 另外,这个人的另一个项目也是这样运行的。

enter image description here

有人知道这是怎么回事吗?

剪辑

应用程序模块

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了。(为了在重新安装 angle-cli 之后使用 build 命令,您必须在 angle-cli 项目中)

然后我运行 npm install -g @angular/cli@latest,我能够再次使用 ng serve

意见2:

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

177761 次浏览

Check if in index.html base is set

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

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

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

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

 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.

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)

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

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

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

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

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

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

Console example

For me the issue was that my local CLI was not the same version as my global CLI - updating it by running the following command solved the problem:

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

Generally it is a versioning issue. Node.js v8 cannot compile with angular-cli 6.0 or later. angularcli v6 and above will work for lastest node versions. Please make sure if your node version is v8, then you need to install angular-cli upto 1.7.4. enter ng -v command in cmd and check the cli and node versions.

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

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

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

Note: I tried to remove the # in my Project Name, I rename C# Project to CSharp instead and I tried to open cmd prompt again, typed the same thing..

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.

See this answer here. You need to redirect all routes that Node is not using to Angular:

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

Check baseHref is set to "/" ( angular.cli )

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

if it didn't work, check if your base href in your index.html is set to "/"

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

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

You can see the errors after stopping debbuging by choosing the option to display ASP.NET Core Web Server output in the output window. In my case I was pointing to a different templateUrl.

The weird thing that I was experiencing was that I could make changes to the components in Visual Studio 2019 while the app was running and see my changes but, when I restarted the app, I got the Cannot Get / error. Instead of running IIS Express, I chose to run the app using Angular JS and the build window showed me that there was an error in app.component.ts. It turned out to be an extra } at the end of the file. Not sure how it got there but, when I removed it, the app works fine.

This error can apparently happen for a number of reasons. Here is my experience for those who land here after searching for "Cannot GET /"

I experienced this error when I installed ng-bootstrap v6 into an Angular 8 project. I downgraded ng-bootstrap to v5 and it seems to be okay now, since ng-bootstrap v6 is only compatible with Angular 9.

This happened while working in Visual Studio 2019 with the Angular .NET Core template. At the same time, the output panel of Visual Studio displayed this esoteric sounding error: "TS1086: An accessor cannot be declared in ambient context," which led me here, which, after a little reading, made me think it was a versioning issue. It appears that it was.

I fixed it by changing "@ng-bootstrap/ng-bootstrap": "^6.0.0"," to "@ng-bootstrap/ng-bootstrap": "^5.0.0" in the package.json file and rebuilding.

First, delete existing files package.lock.json and node_modules from your project. Then, the first step is to write npm cache clean --force. Second, also write this command npm i on the terminal. This process resolve my error. :D

I had the same problem with an Angular 9.

In my case, I changed the angular.json file from

"aot": true

To

"aot": false

It works for me.

Many answers dont really make sense but still have upvotes, makes me currious why that would still work in some cases.

In angular.json

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

worked for me.

Deleting node modules folder worked for me.

  • Delete the node modules folder
  • Run npm install.
  • Re-run the application and it should work.

For me the problem was that I had saved my project folder under C:\Users\... which indeed is a problem. After I saved it under C:\ then npm install and ng serve --open it worked just fine!

In my angular.json file the deployUrl was set to static/ang.

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

This was causing my application to get served from localhost:4200/static/ang

Removing deployUrl fixed it for me.

EDIT: I shifted deployUrl to under configurations since it was important when building for production. (Since my lazy loaded chunks were not getting served on the static url).

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

Bumped into same issue, I tried this: -ng build

And it worked!

if you changed any name or file component , check if it is the right name

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

Another problem may be that you're importing the component instead of it's module.

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


For me the problem was that the Angular project was not getting compiled when executing because of some undelared variable in the ts file which was binded to an html tag. You can use ng serve --verbose true to display the build log in terminal to check where the application is breaking.