前言
ng2 (Angular 2) 是一款非常流行的前端框架，它提供了一套完整的解决方案，让开发者可以轻松构建大型、复杂的应用程序。而 webpack 和 babel 则是 ng2 开发中必不可少的工具，它们可以帮助我们管理依赖、打包代码、转译 ES6/7 等语法。但是，在使用这些工具的过程中，我们经常会遇到各种报错，这给开发带来了不小的困扰。本文将分享一些常见的报错和解决方法，希望能够帮助到大家。
报错一：Cannot read property 'loadChildren' of undefined
这个报错通常是由于路由配置出现问题导致的。具体来说，可能是路由配置中没有正确导入模块，或者是模块中没有正确导出。解决方法如下：
- 确认路由配置中是否正确导入了模块。
-- -------------------- ---- ------- -- -------------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ------------- ---------------------------------- -- -- ------------ -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
- 确认模块中是否正确导出了组件。
-- -------------------- ---- -------
-- ---------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- ------ - ---- ------------------
------ - -------------- - ---- --------------------
----- ------- ------ - -
- ----- --- ---------- -------------- --
--
-----------
------------- -----------------
-------- -
-------------
------------------------------
--
-------- ---------------
--
------ ----- ----------- - -报错二：ERROR in ./src/main.ts
这个报错通常是由于 webpack 配置出现问题导致的。具体来说，可能是 webpack 配置文件中没有正确配置 loader、plugin、entry 等选项，或者是依赖包版本不兼容。解决方法如下：
- 确认 webpack 配置文件中是否正确配置了 loader。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ ----------------
------- -
----- -------------------- --------
--------- ------------
--
------- -
------ -
-
----- --------
---- -
- ------- -------------- -- -- ------ ------------
- ------- ----------- --
--
--
--
--
-------- -
--- -------------------
--------- -------------------
---
--
--- 确认依赖包版本是否兼容。
-- -------------------- ---- -------
-- ------------
-
--------------- -
---------------- ---------
-------------- ---------
-------------------- ---------
--------------- ---------
------------ ---------
------------- ---------
---------- ---------
-------------- ---------
--------------------- --------
-
-报错三：ERROR in ./node_modules/@angular/core/fesm5/core.js
这个报错通常是由于 babel 配置出现问题导致的。具体来说，可能是 babel 配置文件中没有正确配置 plugin、preset 等选项，或者是依赖包版本不兼容。解决方法如下：
- 确认 babel 配置文件中是否正确配置了 plugin。
-- -------------------- ---- -------
-- --------
-
---------- -
-
--------------------
-
---------- -
----------- -
----- - ----------
--- -- ---
-
-
-
-
--
---------- -
------------------------------------------ -- ------ ---------------------------------------
----------------------------------
-
-- 确认依赖包版本是否兼容。
-- -------------------- ---- -------
-- ------------
-
--------------- -
---------------- ---------
-------------- ---------
------------------------------------------ ---------
-------------------- ---------
----------------- ---------
--------------- ---------
------------ ---------
------------- ---------
---------- ---------
-------------- ---------
--------------------- --------
-
-总结
以上就是 ng2 + webpack + babel 报错和解决方法的一些常见问题，希望能够帮助到大家。在使用这些工具的过程中，我们需要不断地学习和探索，才能更好地应对各种复杂的场景。同时，我们也要注意依赖包版本的兼容性，避免出现不必要的问题。最后，附上一个完整的示例代码，供大家参考。
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- ----------- ----------------
--
------ ----- ------------ -
---- - ----------
-
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- ----------------
---------- ---------------
--
------ ----- --------- - -
-- -------
------ - ---------------------- - ---- ------------------------------------
------ - --------- - ---- ---------------
----------------------------------------------------
-- ----------
--------- -----
------
------
----- ----------------
-------------------------------------
-------
------
---------------------
-------
-------
-- --------------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- ------------------------
----- ------- ------ - -
- ----- --- ---------- ------------- --
- ----- -------- ------------- ---------------------------------- --
--
-----------
-------- -------------------------------
-------- --------------
--
------ ----- ---------------- - -
-- -----------------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- ------------ -- ---- ------------
--
------ ----- ------------- - -
-- ------------------
------ - --------- - ---- ----------------
------------
--------- ------------
--------- ------------ -- ----- ------------
--
------ ----- -------------- - -
-- ---------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- ------ - ---- ------------------
------ - -------------- - ---- --------------------
----- ------- ------ - -
- ----- --- ---------- -------------- --
--
-----------
------------- -----------------
-------- -
-------------
------------------------------
--
-------- ---------------
--
------ ----- ----------- - -
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ ----------------
------- -
----- -------------------- --------
--------- ------------
--
------- -
------ -
-
----- --------
---- -
- ------- -------------- --
- ------- ----------- --
--
--
--
--
-------- -
--- -------------------
--------- -------------------
---
--
--
-- --------
-
---------- -
-
--------------------
-
---------- -
----------- -
----- - ----------
--- -- ---
-
-
-
-
--
---------- -
------------------------------------------
----------------------------------
-
-
-- ------------
-
--------------- -
---------------- ---------
-------------- ---------
------------------------------------------ ---------
-------------------- ---------
----------------- ---------
--------------- ---------
------------ ---------
------------- ---------
---------- ---------
-------------- ---------
--------------------- --------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bf1a18add4f0e0ff8a188c