Ionic 4: 无法获取/页面。

Question

为什么会出现这个错误？我在cmd中运行了以下命令：

ionic start pollito tabs

cd pollito
ionic server

CMD: [INFO] 浏览器窗口已打开，访问地址为 http://localhost:8100！

[ng] i ｢wdm｣: wait until bundle finished: / [ng] Date: 2019-05-04T05:20:49.125Z [ng] Hash: dc6d227d2df5e3578183 [ng] Time: 154003ms [ng] [ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/global.scss)[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js): [ng] Error: Cannot find module 'node-sass' [ng] Require stack: [ng] - C:\Angel\pollito\node_modules\sass-loader\lib\loader.js [ng] - C:\Angel\pollito\node_modules\loader-runner\lib\loadLoader.js [ng] - C:\Angel\pollito\node_modules\loader-runner\lib\LoaderRunner.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\NormalModule.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\NormalModuleFactory.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\Compiler.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\webpack.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\build-webpack\src\webpack\index.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\build-webpack\src\index.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\build-angular\src\dev-server\index.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\architect\src\architect-legacy.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\architect\src\index.js [ng] - C:\Angel\pollito\node_modules@angular\cli\models\architect-command.js [ng] - C:\Angel\pollito\node_modules@angular\cli\commands\build-impl.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\schematics\tools\export-ref.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\schematics\tools\index.js [ng] - C:\Angel\pollito\node_modules@angular\cli\utilities\json-schema.js [ng] - C:\Angel\pollito\node_modules@angular\cli\models\command-runner.js [ng] - C:\Angel\pollito\node_modules@angular\cli\lib\cli\index.js [ng] - C:\Angel\pollito\node_modules@angular\cli\lib\init.js [ng] - C:\Angel\pollito\node_modules@angular\cli\bin\ng [ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15) [ng] at Function.Module._load (internal/modules/cjs/loader.js:526:27) [ng] at Module.require (internal/modules/cjs/loader.js:666:19) [ng] at require (internal/modules/cjs/helpers.js:16:16) [ng] at Object.sassLoader (C:\Angel\pollito\node_modules\sass-loader\lib\loader.js:46:72) [ng] ERROR in ./src/theme/variables.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/theme/variables.scss) [ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js): [ng] Error: Cannot find module 'node-sass' [ng] Require stack: [ng] - C:\Angel\pollito\node_modules\sass-loader\lib\loader.js [ng] - C:\Angel\pollito\node_modules\loader-runner\lib\loadLoader.js [ng] - C:\Angel\pollito\node_modules\loader-runner\lib\LoaderRunner.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\NormalModule.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\NormalModuleFactory.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\Compiler.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\webpack.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\build-webpack\src\webpack\index.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\build-webpack\src\index.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\build-angular\src\dev-server\index.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\architect\src\architect-legacy.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\architect\src\index.js [ng] - C:\Angel\pollito\node_modules@angular\cli\models\architect-command.js [ng] - C:\Angel\pollito\node_modules@angular\cli\commands\build-impl.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\schematics\tools\export-ref.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\schematics\tools\index.js [ng] - C:\Angel\pollito\node_modules@angular\cli\utilities\json-schema.js [ng] - C:\Angel\pollito\node_modules@angular\cli\models\command-runner.js [ng] - C:\Angel\pollito\node_modules@angular\cli\lib\cli\index.js [ng] - C:\Angel\pollito\node_modules@angular\cli\lib\init.js [ng] - C:\Angel\pollito\node_modules@angular\cli\bin\ng [ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15) [ng] at Function.Module._load (internal/modules/cjs/loader.js:526:27) [ng] at Module.require (internal/modules/cjs/loader.js:666:19) [ng] at require (internal/modules/cjs/helpers.js:16:16) [ng] at Object.sassLoader (C:\Angel\pollito\node_modules\sass-loader\lib\loader.js:46:72) [ng] ERROR in ./src/app/tab1/tab1.page.scss [ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js): [ng] Error: Cannot find module 'node-sass' [ng] Require stack: [ng] - C:\Angel\pollito\node_modules\sass-loader\lib\loader.js [ng] - C:\Angel\pollito\node_modules\loader-runner\lib\loadLoader.js [ng] - C:\Angel\pollito\node_modules\loader-runner\lib\LoaderRunner.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\NormalModule.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\NormalModuleFactory.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\Compiler.js [ng] - C:\Angel\pollito\node_modules\webpack\lib\webpack.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\build-webpack\src\webpack\index.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\build-webpack\src\index.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\build-angular\src\dev-server\index.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\architect\src\architect-legacy.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\architect\src\index.js [ng] - C:\Angel\pollito\node_modules@angular\cli\models\architect-command.js [ng] - C:\Angel\pollito\node_modules@angular\cli\commands\build-impl.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\schematics\tools\export-ref.js [ng] - C:\Angel\pollito\node_modules@angular-devkit\schematics\tools\index.js [ng] - C:\Angel\pollito\node_modules@angular\cli\utilities\json-schema.js [ng] - C:\Angel\pollito\node_modules@angular\cli\models\command-runner.js [ng] - C:\Angel\pollito\node_modules@angular\cli\lib\cli\index.js [ng] - C:\Angel\pollito\node_modules@angular\cli\lib\init.js [ng] - C:\Angel\pollito\node_modules@angular\cli\bin\ng [ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15) [ng] at Function.Module._load (internal/modules/cjs/loader.js:526:27) [ng] at Module.require (internal/modules/cjs/loader.js:666:19) [ng] at require (internal/modules/cjs/helpers.js:16:16) [ng] at Object.sassLoader (C:\Angel\pollito\node_modules\sass-loader\lib\loader.js:46:72) [ng] chunk {common} common.js, common.js.map (common) 20.2 kB [rendered] [ng] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered] [ng] chunk {main} main.js, main.js.map (main) 32 kB [initial] [rendered] [ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered] [ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.9 kB [entry] [rendered] [ng] chunk {styles} styles.js, styles.js.map (styles) 22.5 kB [initial] [rendered] [ng] chunk {tab1-tab1-module} tab1-tab1-module.js, tab1-tab1-module.js.map (tab1-tab1-module) 7.87 kB [rendered] [ng] chunk {tab2-tab2-module} tab2-tab2-module.js, tab2-tab2-module.js.map (tab2-tab2-module) 4.52 kB [rendered] [ng] chunk {tab3-tab3-module} tab3-tab3-module.js, tab3-tab3-module.js.map (tab3-tab3-module) 4.52 kB [rendered] [ng] chunk {tabs-tabs-module} tabs-tabs-module.js, tabs-tabs-module.js.map (tabs-tabs-module) 7.55 kB [rendered] [ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.36 MB [initial] [rendered] [ng] i ｢wdm｣: Failed to compile.

浏览器：无法获取 /

- AngelAmayaE

---

听起来像是环境或依赖问题。我个人会进行干净的框架安装来解决这个问题。 - Sergey Rudenko

Answer 1

当你执行命令ionic serve时，项目可能无法完全构建。为了解决这个问题，你必须使用ionic build命令。 如果你的项目出现错误，在运行ionic serve时可能不会显示！项目会崩溃，并在浏览器上显示“无法获取”错误。

在我的情况下，我只需要执行ionic build来查看错误并修复它。然后它就能更好地工作了 ;)

- user14267037

---

不知道为什么你没有赞，但这是正确的答案。 - Matt Barr

是的，这很可能是最有可能的情况。 - arunwithasmile

Answer 2

当您第一次编译时，如果代码出现错误，将会出现此通知。它不会在浏览器中显示错误，而是会显示cannot GET /。

您应该检查浏览器控制台以查找错误，如果找不到，请检查运行ionic serve的命令提示符。您将获得更多有关错误的信息。

- Cedric Ipkiss

Answer 3

如果您的项目路径中有%20，请将其删除/替换为空格。这是我解决问题的方法。

- TJC

---

不知道它最初为什么会被踩，但在 macOS 上文件夹名称中加入空格而不是特殊字符编码解决了问题。感谢您的提示。 - LoLo

Answer 4

我之前也遇到了这个问题，以下的解决方案对我有用：

1. 移除 Android 平台：ionic cordova platform rm android
2. 删除 node_modules 文件夹
3. 删除 plugins 文件夹
4. 运行 npm install 命令
5. 重新添加 Android 平台：ionic cordova platform add android

再次编译你的应用程序。

- ShriHans

Answer 5

在Windows上，当我在应用程序中使用用户目录中的文档文件夹以及gitbash（mingw64）时，出现了这个错误。

• 将应用程序文件夹移至C驱动器根目录下的/Development/文件夹中
• 尝试在gitbash（mingw64）中重试相同的命令

我通过以上两种方法解决了问题。

看起来是Windows和其文件夹路径空格引起了这个问题，可能与gitbash结合使用有关。

- frankfurt-laravel

Answer 6

Remove Path from app-routing.module.ts .

{ 路径: 'modal', loadChildren: () => import('./modal/modal.module').then(m => m.ModalPageModule) }

- Chinmay Kulkarni