Angular公式のチュートリアルどおりに、ng serveまで実行しました。
しかし「Module build failed」というエラーが発生してしまい、初っ端から実行することができませんでした。
今回はコチラを解決しました。
やったこと
ココのとおりに進めていく。
> ng new my-first-project ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? CSS
プロジェクトの作成が終わったら
> cd my-first-project > ng serve
あとは完了を待つだけ！……のはずだった……
ng serveで失敗する
発生したエラーがコチラ。
ERROR in C:/Users/lis/Documents/work/angular/my-first-project/src/main.ts
Module build failed (from C:/Users/lis/Documents/work/angular/my-first-project/node_modules/@ngtools/webpack/src/index.js):
Error: C:\Users\lis\Documents\work\angular\my-first-project\src\main.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (C:\Users\lis\Documents\work\angular\my-first-project\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:913:23)
at C:\Users\lis\Documents\work\angular\my-first-project\node_modules\@ngtools\webpack\src\loader.js:41:31
at processTicksAndRejections (internal/process/task_queues.js:94:5)
ERROR in C:/Users/lis/Documents/work/angular/my-first-project/src/polyfills.ts
Module build failed (from C:/Users/lis/Documents/work/angular/my-first-project/node_modules/@ngtools/webpack/src/index.js):
Error: C:\Users\lis\Documents\work\angular\my-first-project\src\polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (C:\Users\lis\Documents\work\angular\my-first-project\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:913:23)
at C:\Users\lis\Documents\work\angular\my-first-project\node_modules\@ngtools\webpack\src\loader.js:41:31
at processTicksAndRejections (internal/process/task_queues.js:94:5)
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.
main.tsやpolyfills.tsで、なんらかの「Module build failed」が発生しているようです……
ただ別PCで同じ流れをしたときは、コレは発生していませんでした。
しかも今回同様、テンプレートの作成直後で、異なる結果となったので超絶不可解な状態でした。
原因はシンボリックリンク
コチラのGitHubのイシューで解決しました。
原因はシンボリックリンクが悪さをしていました。
ぼくは色々あってフォルダ構成をこのようにしていました。
- 作業フォルダ: C:\work\angular
- リンク先 : C:\Users\lis\Documents\work\angular
階層が深いから、浅い階層にリンクを貼っていました。
そして普段「作業フォルダ」の方にアクセスして、なんやかんやしていました。
コレを「リンク先」の方でアクセスして、ng serveをしてみると……
> ng serve
10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 49.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.75 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.08 MB [initial] [rendered]
Date: 2020-01-16T07:29:43.024Z - Hash: 40a30b794c215fcd960c - Time: 13800ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Compiled successfully.
ちゃんと成功しました！
参考
コチラを参考にしました。ありがとうございました！
あとがき
ng serve「Module build failed」の解決方法についてでした！
初歩の初歩のこと、しかも別PCでは成功していることしかしていないのに、エラーが発生したので頭を抱えていました……
が調べてみたらなんとかなったので良かったです……
作業フォルダがシンボリックリンクされてるという状況が、そもそもレアケースかもしれませんが、同様のことが起きたらチェックしてみてください！
