概要
Angularの勉強をするときに、参考書内で quickstart というサンプルソースを使う場面がありました。
参考書通りに進めていくと、最初のサンプルソースの起動からエラーが発生してしまうため、対策をこちらに残します。
該当の参考書は以下になります。
リンク
※2022年12月13日時点ではこれから説明する対処方法で改善されます。
エラー内容
対象プロジェクト：https://github.com/angular/quickstart
npm startコマンドを実行後、以下のエラーが発生する。
1 2 3 4 | node_modules/@types/cors/index.d.ts(43,52): error TS1005: ',' expected. node_modules/@types/cors/index.d.ts(49,44): error TS1005: ',' expected. node_modules/@types/cors/index.d.ts(49,47): error TS1005: ',' expected. node_modules/@types/node/index.d.ts(20,1): error TS1084: Invalid 'reference' directive syntax. |
原因
\quickstart\package.json で定義されているライブラリのバージョンが古いため、エラーとなっています。
バージョンを以下のように更新することで解決します。
修正後の\quickstart\package.jsonは以下になります。
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | { "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation, supplemented with testing support", "scripts": { "build": "tsc -p src/", "build:watch": "tsc -p src/ -w", "build:e2e": "tsc -p e2e/", "serve": "lite-server -c=bs-config.json", "serve:e2e": "lite-server -c=bs-config.e2e.json", "prestart": "npm run build", "start": "concurrently \"npm run build:watch\" \"npm run serve\"", "pree2e": "npm run build:e2e", "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", "preprotractor": "webdriver-manager update", "protractor": "protractor protractor.config.js", "pretest": "npm run build", "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", "pretest:once": "npm run build", "test:once": "karma start karma.conf.js --single-run", "lint": "tslint ./src/**/*.ts -t verbose" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/common": "~4.3.4", "@angular/compiler": "~4.3.4", "@angular/core": "~4.3.4", "@angular/forms": "~4.3.4", "@angular/http": "~4.3.4", "@angular/platform-browser": "~4.3.4", "@angular/platform-browser-dynamic": "~4.3.4", "@angular/router": "~4.3.4", "angular-in-memory-web-api": "~0.3.0", "systemjs": "0.19.40", "core-js": "^2.4.1", "rxjs": "5.5.12", "zone.js": "^0.8.4" }, "devDependencies": { "concurrently": "^3.2.0", "lite-server": "^2.2.2", "typescript": "~3.9.7", "canonical-path": "0.0.2", "tslint": "^3.15.1", "lodash": "^4.16.4", "jasmine-core": "~2.4.1", "karma": "^1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~4.0.14", "rimraf": "^2.5.4", "@types/node": "^12.19.12", "@types/jasmine": "2.5.36" }, "repository": {} } |
これで、再び起動コマンドを実行することで先ほどのエラーが解消し、ブラウザが立ち上がります。