lisz-works

技術と興味の集合体

ng serve「Module build failed」の解決方法

【スポンサーリンク】

Angular

Angular公式のチュートリアルどおりに、ng serveまで実行しました。

しかし「Module build failed」というエラーが発生してしまい、初っ端から実行することができませんでした。

今回はコチラを解決しました。

やったこと

ココのとおりに進めていく。

angular.jp

> 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のイシューで解決しました。

github.com

原因はシンボリックリンクが悪さをしていました。

ぼくは色々あってフォルダ構成をこのようにしていました。

  • 作業フォルダ: 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.

ちゃんと成功しました!

参考

コチラを参考にしました。ありがとうございました!

github.com

あとがき

ng serve「Module build failed」の解決方法についてでした!

初歩の初歩のこと、しかも別PCでは成功していることしかしていないのに、エラーが発生したので頭を抱えていました……

が調べてみたらなんとかなったので良かったです……

作業フォルダがシンボリックリンクされてるという状況が、そもそもレアケースかもしれませんが、同様のことが起きたらチェックしてみてください!