각도: 가져올 수 없음 /

programing

각도: 가져올 수 없음 /

telebox 2023. 8. 15. 11:01

각도: 가져올 수 없음 /

다른 사람의 Angular 4 프로젝트를 열고 빌드하고 실행하려고 하는데 내 방식대로 실행하면 프로젝트를 볼 수 없습니다.저는 지금 무엇이 잘못되고 있는지, 무엇을 해야 하는지 모르겠습니다.이미 NPM 및 NodeJS를 사용할 수 있는 모든 기능을 갖추고 있습니다.

제가 취한 조치는 다음과 같습니다.

프로젝트 열기
npm 설치
서브

프로젝트는 올바른 방법으로 컴파일합니다. (나는 Angular 앱을 가지고 있고 나는 이것이 어떻게 생겼는지 알고 있습니다.)콘솔에 다음이 표시됩니다.

NG Live Development Server가 localhost:4200에서 수신 중입니다. http://localhost:4200 **'에서 브라우저를 엽니다.

그런 다음 웹 브라우저를 열었을 때 localhost:4200으로 이동하면 다음과 같은 텍스트가 포함된 웹 페이지가 표시됩니다.

'얻을 수 없음 /'

그리고 콘솔에는 다음과 같은 텍스트가 있었습니다.

'GET http://localhost:4200/404(찾을 수 없음)'

프로젝트는 정상적으로 작동하지만 웹 페이지에서 작동하는 URL로 이동할 수 없습니다.라우팅은 제가 이 작업에 익숙하기 때문에 다른 방법으로 설정됩니다.app.module.ts에서는 다음이 구현됩니다.

app.s.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와 같은 웹 페이지를 열어도 작동하지 않습니다.각도가 웹 페이지 서비스를 중지하면 웹 페이지에 다음이 표시됩니다."이 사이트에 연결할 수 없습니다."로컬 호스트에서 실행 중인 것 같습니다. 4200...또한, 이 사람의 다른 프로젝트도 같은 방식으로 작동합니다.

무슨 일인지 아는 사람?

편집

app.s.ts.

RouterModule.forRoot(appRoutes, { useHash: true })

패키지.제이손

{
"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의 재설치 후 build 명령어를 사용할 수 있습니다

그때 나는 달렸습니다.npm install -g @angular/cli@latest그리고 나는 사용할 수 있었습니다.ng serve한 번. 다시시.

관찰 2:

'ng build...'로 앱을 구축한 후 'dist' 폴더에 index.html이 없습니다.제가 웹사이트를 온라인으로 설정하면 멋진 웹사이트 대신 폴더 구조만 있습니다.index.html이 없어서 그런 것 같습니다.

이 오류를 해결하는 방법은 콘솔에서 보고한 오류를 찾아 수정하는 것이었습니다.

려달을 합니다.ng build명령줄/단말기에 빨간색 예와 같은 유용한 오류가 표시됩니다. 속성 'name'이(가) 유형 'object'에 없습니다.

저도 경로에 문제가 있었지만 루트 폴더에 백분율 기호가 있었습니다.

%20을 공간으로 교체한 후 작동하기 시작했습니다 :)

는 제가 문는폴내명실령것입다니행 폴더 입니다./project/src/app하여 프로폴 이동여하시다/project 중인 닝러ng serve거기서 제 문제가 해결되었습니다.

저도 빌드 오류로 인해 동일한 오류가 발생했습니다.오류를 수정하는 데 도움이 되는 응용 프로그램 디렉터리에 빌드를 실행했습니다.

Angular 9에도 같은 문제가 있었습니다.

제 경우에는 angular.json 파일을 다음에서 변경했습니다.

"aot": true

로.

"aot": false

저한테는 효과가 있어요.

크체인에 합니다.index.html베이스가 설정됨

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

사용하고 있었습니다.export class TestCalendar implements OnInit{}.

 ngOnInit() {
    /* Display initial */
  }

후ng serve나는 내가 사용하지 않는다는 것을 알았습니다.ngOnInit(){}제가 구현한 후에는 잘 작동하기 시작했습니다.누군가에게 도움이 되길 바랍니다.

방금 우리가 프로젝트 내부에 "ng serve"를 입력했을 때 이유를 알아냈습니다.
를 들어, 들면를예C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve

모듈을 할 수 .C:\Users\EdgeTech1\Desktop\C
결과:failed compiled

근본 원인:
나의 폴더 이름은C# Project..

참고: 제거하려고 했습니다.#이름에서 을 프로이이름변경름서트에젝으로 변경합니다.C# ProjectCSharp대신에 저는 열려고 했습니다.cmd다시 프롬프트를 표시하고 동일한 내용을 입력합니다.

예:

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

그리고 나의 프로젝트는 성공적으로 컴파일되었습니다.프로젝트 파일 이름 지정 시 ASCII 문자를 최대한 사용하지 않도록 합니다.

Angular 6+ 앱과 ASP에서도 같은 문제가 있었습니다.NET Core 2.0

저는 이전에 Angular 앱을 CSS에서 SCSS로 변경하려고 했습니다.

제 해결책은 병원에 가는 것이었습니다.src/angularApp 및 중인 파일ng serve이것은 제가 변화를 놓쳤다는 것을 깨닫도록 도와주었습니다.src/styles.css을 로다철하에 합니다.src/styles.scss

저는 두 개의 케이스를 가진 제 공급자 중 한 명을 언급한 것입니다.그 중 하나는 틀렸는데 웹팩 컴파일러만 불평하고 있었습니다.오류를 확인하려면 ClientApp 폴더에 들어가 build or ng serve를 사용해야 했습니다. (ASP)NET Core SPA(앵글 5개 포함

baseHref가 "/"(angular.cli)로 설정되어 있는지 확인합니다.

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

작동하지 않으면 인덱스의 기본 href가 "/"로 설정되어 있는지 확인합니다.

@Component Selector 경로가 잘못된 경로를 가리킨 것이 문제였습니다.변경 후 문제가 해결되었습니다.

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

이 오류는 여러 가지 이유로 인해 발생할 수 있습니다.다음은 "Cannot GET /"을 검색한 후 여기에 도착한 사람들을 위한 제 경험입니다.

Angular 8 프로젝트에 ng-bootstrap v6를 설치했을 때 이 오류가 발생했습니다.ng-bootstrap을 v5로 다운그레이드했는데 ng-bootstrap v6는 Angular 9와만 호환되기 때문에 지금은 괜찮은 것 같습니다.

이것은 Angular와 함께 Visual Studio 2019에서 작업하는 동안 발생했습니다.NET Core 템플릿.동시에 Visual Studio의 출력 패널에는 "TS1086: 주변 환경에서는 접근자를 선언할 수 없습니다."라는 난해한 오류가 표시되었습니다. 이것은 저를 여기로 이끌었고, 약간의 독서 후, 저는 그것이 버전 문제라고 생각하게 했습니다.그랬던 것 같습니다.

패키지에서 "@ng-bootstrap/ng-bootstrap": "^6.0.0"을 "@ng-bootstrap/ng-bootstrap": "^5.0.0"으로 변경하여 수정했습니다.json 파일 및 재구성.

이름이나 파일 구성요소를 변경한 경우 올바른 이름인지 확인합니다.

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

일반적으로 버전 관리 문제입니다.node.js v8은 angular-cli 6.0 이상으로 컴파일할 수 없습니다. angularcli v6 이상은 마지막 노드 버전에서 작동합니다.노드 버전이 v8인지 확인한 다음 1.7.4까지 Angular-CLI를 설치해야 합니다. cmd에 ng -v 명령을 입력하고 CLI 및 노드 버전을 확인하십시오.

여기에서 이 답변을 참조하십시오.노드가 사용하지 않는 모든 경로를 Angular:로 리디렉션해야 합니다.

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

ASP 표시 옵션을 선택하여 디버깅을 중지한 후 오류를 확인할 수 있습니다.출력 창에 NET Core Web Server 출력이 표시됩니다.제 경우에는 다른 templateUrl을 가리키고 있었습니다.

먼저 기존 파일 package.lock.json 및 node_modules를 프로젝트에서 삭제합니다.그런 다음 첫 번째 단계는 npm cache clean --force를 쓰는 것입니다.둘째, 단말기에도 이 명령어 npmi를 작성합니다.이 프로세스를 통해 오류가 해결됩니다. :D

많은 대답들이 말이 안 되지만 여전히 찬성표를 가지고 있기 때문에, 왜 그것이 어떤 경우에는 여전히 효과가 있는지 궁금해집니다.

angular.json

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

저를 위해 일했습니다.

에게문프폴로 C: 아에저것다입니한장래에 했다는 것이었습니다.\사용자\...정말로 문제가 되는 것입니다.:\ 에 저장한 후에 C:\ 후저장한 에▁afternpm install그리고.ng serve --open그것은 아주 잘 작동했습니다!

angular.에 angular.json 파일이 .deployUrl로 설정되었습니다.static/ang.

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

이로 인해 애플리케이션이 다음에서 제공되었습니다.localhost:4200/static/ang

를 제거하기deployUrl저를 위해 그것을.

편집: deployUrl을 아래로 이동했습니다.configurations생산을 위해 건물을 지을 때 중요했기 때문에.(나의 게으른 로드 청크가 정적 URL에서 제공되지 않았기 때문입니다.)

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

같은 문제에 부딪혀서, 저는 이것을 시도했습니다: -ng build.

그리고 그게 효과가 있었어!

또 다른 문제는 구성 요소를 모듈 대신 가져오는 것일 수 있습니다.

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

저에게 문제는 실행 시 Angular 프로젝트가 컴파일되지 않는 이유가 ts 파일에 html 태그에 바인딩되어 있기 때문입니다.사용할 수 있습니다.ng serve --verbose true터미널에 빌드 로그인을 표시하여 응용 프로그램이 중단된 위치를 확인합니다.

Visual Studio 2019에서 앱을 실행하는 동안 구성 요소를 변경하여 변경 내용을 확인할 수 있었는데 앱을 다시 시작하면 Cannot Get/오류가 발생했습니다.IIS Express를 실행하는 대신 Angular JS를 사용하여 앱을 실행하기로 선택했고 빌드 창에 app.component.ts에 오류가 있음이 표시되었습니다.파일 끝에 추가 }이(가) 있는 것으로 나타났습니다.어떻게 도착했는지는 모르겠지만, 제가 그것을 제거했을 때, 그 앱은 정상적으로 작동합니다.

문제는 로컬 CLI가 글로벌 CLI와 버전이 다르다는 것입니다. 다음 명령을 실행하여 업데이트하면 문제가 해결되었습니다.

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

노드 모듈 폴더를 삭제하는 것이 효과가 있었습니다.

노드 모듈 폴더 삭제
달려.npm install.
응용 프로그램을 다시 실행하면 작동합니다.

언급URL : https://stackoverflow.com/questions/46771315/angular-cannot-get

'programing' 카테고리의 다른 글

Excel VBA - 코드에서 셀 값 읽기 (0)	2023.08.15
디버그할 때만 인쇄 문 사용 (0)	2023.08.15
입력을 클릭할 때와 부트스트랩 모달 창에서 제출 버튼을 누를 때 모두 양식 데이터 제출 (0)	2023.08.15
MariaDB(MySQL)는 왜 숫자 리터럴을 문자열로 취급합니까? (0)	2023.08.15
Ajax 클라이언트 측 프레임워크가 As를 로드하지 못했습니다.넷 4.0 (0)	2023.08.10

현재글각도: 가져올 수 없음 /

각종 프로그래밍 정보를 다루는 블로그입니다.

sql-server, C, JSON, Excel, Python, ASP.NET, Android, Oracle, Swift, mariadb, ajax, spring-boot, MySQL, bash, angular, jQuery, PowerShell, Wordpress, angularJS, Git,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

telebox

각도: 가져올 수 없음 /

각도: 가져올 수 없음 /

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

각도: 가져올 수 없음 /

각도: 가져올 수 없음 /

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바