[解決済み】Angular: を取得することはできません/。
質問
他人の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
を実行すると、私の問題は解決しました。
関連
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み】Angular CLIが生成する「spec.ts」ファイルは何のためにあるのか?
-
[解決済み】angular-cliプロジェクトにbootstrapを追加する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】TypeError: $(...).DataTable は関数ではありません。
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]