web-dev-qa-db-ja.com

角度：取得できません/

他の誰かのAngular 4プロジェクトを開いてビルドし、実行しようとしていますが、自分のやり方で実行するとプロジェクトを表示できません。何が悪いのか、今何をすべきなのかわかりません。私はすでにNPMとNodeJSを使用するためのすべてを準備しました

私が行った手順は次のとおりです。

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

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

'** NG Live Development Serverはlocalhost：4200でリッスンしており、ブラウザを http：// localhost：42 **'で開きます。

次に、Webブラウザーを開くと、localhost：4200に移動し、次のテキストを含むWebページが表示されました。

'取得することはできません /'

コンソールには次のテキストがありました。

'GET http：// localhost：4200 / 404（見つかりません）'

プロジェクトは正常に機能するはずですが、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 },
];

また、次のようなWebページを開きます。 localhost：4200/treeは機能しません。 angularがWebページの提供を停止すると、Webページに「このサイトにアクセスできません」と表示されます。したがって、localhost：4200で何かを実行していると思います...また、この人は同じように振る舞います。

enter image description here

誰が何が起こっているか知っていますか？

編集

app.module.ts

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

また、タブ名の横に「エラー」というラベルのアイコンが表示されます。

観察：

新しい観察：

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がありません... Webサイトをオンラインに設定すると、Nice Webサイトの代わりにフォルダー構造のみが存在します。 index.htmlがないためだと思います。

javascriptnode.jsangulartypescript
25
Klyner

問題は、フォルダー/project/src/app内でコマンドを実行したことです。プロジェクトフォルダーに戻って/projectに戻り、そこからng serveを実行すると、問題が解決しました。

10
Klyner

このエラーを解決する方法は、consoleが報告したエラーを見つけて修正することでした。

コマンドライン/ターミナルでng buildを実行すると、赤の例などの有用なエラーが表示されるはずです：プロパティ 'name'はタイプ 'object'に存在しません。

Console example

29
DineshNS

私にとってもパスの問題でしたが、ルートフォルダーにパーセント記号がありました。

％20をスペースに置き換えたの後、動作し始めました:)

17
yezior

ビルドエラーが原因で同じエラーが発生しました。アプリケーションのディレクトリでbuildを実行して、エラーを修正しました

8
J.Kirk.

export class TestCalendar implements OnInit{}を使用していましたが、関数を作成しませんでした

 ngOnInit() {
    /* Display initial */
  }

。コマンドng serveを実行した後、ngOnInit(){}を使用していないことがわかりました。実装すると、正常に動作し始めました。それが誰かを助けることを願っています。

3
MuhammadMohsan

index.html baseが設定されているかどうかを確認します

<head>
  <base href="/">
  ...
</head>
2
Salih Şenol Çakarcı

Angular 6+アプリとASP.NET Core 2.0でも同じ問題が発生しました

以前、AngularアプリをCSSからSCSSに変更しようとしました。

私の解決策は、src/angularAppフォルダーに移動してng serveを実行することでした。これにより、src/styles.cssファイルをsrc/styles.scssに変更するのを忘れていたことに気付きました。

2
MaylorTaylor

私は2つの異なるケーシングを持つプロバイダーの1つに言及していました。そのうちの1つは間違っていましたが、webpackコンパイラーだけが文句を言っていました。 ClientAppフォルダーに移動して、ng buildまたはng serveを使用してエラーを確認する必要がありました。 （Angular 5を含むASP.NET Core SPA）

1
Perrier

プロジェクト内で「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文字を使用しないでください。

0
Arianne Hernandez

この回答を参照してください here 。 Nodeが使用していないすべてのルートをAngularにリダイレクトする必要があります。

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

通常、これはバージョン管理の問題です。 Node.js v8は、angle-cli 6.0以降ではコンパイルできません。 angularcli v6以降は、最新バージョンのノードで機能します。ノードのバージョンがv8である場合は、1.7.4までのangle-cliをインストールする必要があります。 cmdにng -vコマンドを入力し、cliおよびノー​​ドのバージョンを確認します。

0
user11193342