1. ホーム
  2. javascript

[解決済み】Angular: を取得することはできません/。

2022-02-20 12:51:59

質問

他人のAngular 4プロジェクトを開いてビルドして実行しようとしているのですが、自分のやり方で実行するとプロジェクトが表示されないのです。何が間違っているのか、これからどうすればいいのかがわかりません。NPMとNodeJSを使用するために、すでにすべての準備が整っています。

私が行った手順は

  • プロジェクトを開く
  • npmインストール
  • ngサーブ

プロジェクトは正しい方法でコンパイルされます。(私は自分のAngularアプリを持っているので、これがどのように見えるか知っています。) コンソールが表示されています。

'** NG Live 開発サーバーは localhost:4200 でリスニングしています。 http://localhost:4200 **'.

そして、Webブラウザーを開き、localhost:4200に移動すると、次のような文面のWebページが表示されました。

<ブロッククオート

'Cannot GET /'

そして、コンソールには次のような文章が表示されました。

'GET http://localhost:4200/ 404 (Not Found)'

プロジェクトは問題なく動作するはずですが、Webページで動作する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で何か動いているのだと思います...。また、この方の別のプロジェクトも同じような挙動をしています。

どなたかご存知の方はいらっしゃいますか?

EDIT

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

また、タブ名の横に"Error"というラベルのついたアイコンが表示されますね。

観察。

新しい観測。

を実行した後 npm install -g angular-cli を実行することができませんでした。 ng serve . (angular-cliの再インストール後にビルドコマンドを使用するには、angular-cliプロジェクト内にいる必要があります)

そして npm install -g @angular/cli@latest を使用することができ、私は ng serve を再び使用することができます。

観察2。

でアプリをビルドした後。ng build ...」でアプリをビルドした後、「dist」フォルダにindex.htmlがない...。ウェブサイトをオンラインに設定すると、素敵なウェブサイトではなく、ただのフォルダ構造になっています。index.htmlがないからだと思うのですが。

解決方法は?

問題は、フォルダ内でコマンドを実行したことです /project/src/app . プロジェクトフォルダに戻ると /project を実行し ng serve を実行すると、私の問題は解決しました。