Angular: не удается получить/

Я пытаюсь открыть, собрать и запустить другой проект Angular 4, но у меня не получается просмотреть проект, когда я запускаю его по-своему. Я не вижу, что идет не так или что я должен делать сейчас. У меня уже было все для использования NPM и NodeJS

Я предпринял следующие шаги:

  • Откройте проект
  • установка npm
  • нг служить

Проект компилируется правильно. (У меня есть собственное приложение Angular, и я знаю, как оно выглядит). Консоль показывает:

'** NG Live Development Server прослушивает localhost: 4200, откройте ваш браузер на http://localhost: 4200 **'.

Затем, когда я открыл веб-браузер, я перешел на localhost: 4200, и была показана веб-страница со следующим текстом:

'Не может получить /'

А на консоли был следующий текст:

'ПОЛУЧИТЕ http://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 },
];

Также открытие веб-страницы, как; localhost: 4200/дерево не работает. Когда я позволяю angular перестать обслуживать веб-страницу, на веб-странице отображается: "этот сайт недоступен". Поэтому я думаю, что на 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. (Вы должны быть внутри проекта angular-cli, чтобы использовать команду build после переустановки angular-cli)

Затем я запустил npm install -g @angular/[email protected] и смог снова использовать ng serve.

НАБЛЮДЕНИЕ 2:

После создания приложения с помощью: 'ng build...' в папке 'dist' нет index.html... Когда я настраиваю веб-сайт в Интернете, вместо красивого веб-сайта появляется просто структура папок. Я думаю, что потому что нет index.html.

Ответ 1

Проблема заключалась в том, что я запускал команды в папке /project/src/app. Перемещение обратно в папку проекта, чтобы /project и запуск ng serve оттуда решили мою проблему.

Ответ 2

Я решил эту ошибку, найдя и исправив ошибку, о которой сообщила консоль.

Запустите ng build в командной строке/терминале, и он должен отобразить полезную ошибку, такую как пример красного цвета здесь: Свойство 'name' не существует для типа 'object'.

Console example

Ответ 3

Для меня это также проблема с путём, но у меня был знак процента в корневой папке.

После того как я заменил %20 пробелом, он начал работать:)

Ответ 4

У меня была ошибка, вызванная ошибками сборки. Я запустил ng build в каталоге моего приложения, которое помогло мне исправить мои ошибки

Ответ 5

Я использовал export class TestCalendar implements OnInit{}, но я не записывал функцию

 ngOnInit() {
    /* Display initial */
  }

. После запуска команды ng serve я узнал, что я не использовал ngOnInit(){}. Как только я его осуществил, он начал работать нормально. Надеюсь, это поможет кому-то.

Ответ 6

Проверьте, установлена ​​ли база index.html

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

Ответ 7

У меня была та же проблема с приложением Angular 6+ и ASP.NET Core 2.0

Я только что пытался изменить приложение Angular от CSS до SCSS.

Мое решение состояло в том, чтобы перейти в папку src/angularApp и запустить ng serve. Это помогло мне понять, что я пропустил изменения src/styles.css файл src/styles.scss

Ответ 8

Я имел в виду одного из моих провайдеров с двумя разными корпусами. Один из них был неправильным, но жаловал только компилятор webpack. Мне пришлось войти в папку ClientApp и использовать ng build или ng для просмотра ошибок. (ASP.NET Core SPA с угловым 5)

Ответ 9

Как правило, это проблема управления версиями. Node.js v8 не может быть скомпилирован с angular-cli 6.0 или новее. Angularcli v6 и выше будет работать для последних версий узлов. Пожалуйста, убедитесь, что версия вашего узла v8, тогда вам нужно установить angular-cli до 1.7.4. введите команду ng -v в cmd и проверьте версии cli и node.

Ответ 10

Просто выяснили причину, когда мы набираем "ng serve" ВНУТРИ НАШЕГО ПРОЕКТА..
например C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve

не удалось разрешить модуль C:\Users\EdgeTech1\Desktop\C
результаты: failed compiled

первопричина:
Имя моей папки было C# Project..

Примечание: я попытался удалить # в своем имени C# Project вместо этого я переименовал C# Project в CSharp и снова попытался открыть приглашение cmd, набрав то же самое..

например:

C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve

и мой проект успешно скомпилирован.. так что максимально избегайте символов ASCII в именах файлов проектов.

Ответ 11

Смотрите этот ответ здесь. Вам нужно перенаправить все маршруты, которые Node не использует, в Angular:

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

Ответ 12

Проверьте, установлен ли baseHref на "/" (angular.cli)

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

если это не сработало, проверьте, установлен ли ваш базовый href в index.html на "/"

Ответ 13

Для меня проблема заключалась в том, что мой локальный CLI не был той же версией, что и мой глобальный CLI - его обновление с помощью следующей команды решило проблему:

npm install --save-dev @angular/[email protected]