Question

我开始了Angular QuickStart tutorial，但在第一部分被卡住了。

我做了什么

我按照指南进行操作，直到ng serve --open一切都很顺利，而此命令在发出其他一些错误消息后发出了错误webpack: Failed to compile，并且浏览器刚打开显示：Cannot GET / < / p>

完整错误日志：

C:\Users\ppete\Documents\DEV\!Angular\test1>ng serve --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 10% building modules 6/9 modules 3 active ...1\node_modules\webpack\hot\emitter.jswebpack: wait until bundle finished: /                                    Hash: 5e52a4b2b9800e47679f
Time: 5094ms
chunk    {0} main.bundle.js, main.bundle.js.map (main) 40 bytes {3} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 28 bytes {4} [initial] [rendered]
chunk    {2} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 28 bytes {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 302 kB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
Module not found: Error: Can't resolve 'C:\Users\ppete\Documents\DEV\' in 'C:\Users\ppete\Documents\DEV\!Angular\test1\node_modules\@angular\cli\models\webpack-configs'
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in multi ./src/polyfills.ts
Module not found: Error: Can't resolve 'C:\Users\ppete\Documents\DEV\' in 'C:\Users\ppete\Documents\DEV\!Angular\test1\node_modules\@angular\cli\models\webpack-configs'
 @ multi ./src/polyfills.ts

ERROR in multi ./src/styles.css
Module not found: Error: Can't resolve 'C:\Users\ppete\Documents\DEV\' in 'C:\Users\ppete\Documents\DEV\!Angular\test1\node_modules\@angular\cli\models\webpack-configs'
 @ multi ./src/styles.css

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'C:\Users\ppete\Documents\DEV\' in 'C:\Users\ppete\Documents\DEV\!Angular  \test1\node_modules\@angular\cli\models\webpack-configs':
  Error: Can't resolve 'C:\Users\ppete\Documents\DEV\' in 'C:\Users\ppete\Documents\DEV\!Angular\test1\node_modules\@ang  ular\cli\models\webpack-configs'

  - compiler.js:76
    [test1]/[html-webpack-plugin]/lib/compiler.js:76:16

  - Compiler.js:291 Compiler.<anonymous>
    [test1]/[webpack]/lib/Compiler.js:291:10

  - Compiler.js:494
    [test1]/[webpack]/lib/Compiler.js:494:13

  - Tapable.js:138 next
    [test1]/[tapable]/lib/Tapable.js:138:11

  - CachePlugin.js:62 Compiler.<anonymous>
    [test1]/[webpack]/lib/CachePlugin.js:62:5

  - Tapable.js:142 Compiler.applyPluginsAsyncSeries
    [test1]/[tapable]/lib/Tapable.js:142:13

  - Compiler.js:491
    [test1]/[webpack]/lib/Compiler.js:491:10

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [test1]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:645 self.applyPluginsAsync.err
    [test1]/[webpack]/lib/Compilation.js:645:19

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [test1]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:636 self.applyPluginsAsync.err
    [test1]/[webpack]/lib/Compilation.js:636:11

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [test1]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:631 self.applyPluginsAsync.err
    [test1]/[webpack]/lib/Compilation.js:631:10

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [test1]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:627 sealPart2
    [test1]/[webpack]/lib/Compilation.js:627:9

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [test1]/[tapable]/lib/Tapable.js:131:46


webpack: Failed to compile.

版本

@angular/cli: 1.1.2
node: 8.1.2
os: win32 x64
@angular/animations: 4.2.3
@angular/common: 4.2.3
@angular/compiler: 4.2.3
@angular/core: 4.2.3
@angular/forms: 4.2.3
@angular/http: 4.2.3
@angular/platform-browser: 4.2.3
@angular/platform-browser-dynamic: 4.2.3
@angular/router: 4.2.3
@angular/cli: 1.1.2
@angular/compiler-cli: 4.2.3
@angular/language-service: 4.2.3

Answer 1

这是bug，由名称以项目路径中的感叹号开头的文件夹引起：

C:\Users\ppete\Documents\DEV\!Angular\test1

请注意中间的 !Angular 文件夹。

从文件夹C:\Users\ppete\Documents\DEV\Angular\test1运行相同的内容（注意：那里没有“！”）会导致正确的操作：

C:\Users\ppete\Documents\DEV\Angular\test1>ng serve --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 10% building modules 6/9 modules 3 active ...ode_modules\style-loader\addStyles.jswebpack: wait until bundle finished: /             Hash: 207adb8e1440eb67702b
Time: 13703ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.34 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.18 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

<强> TL; DR 关于这个问题的一些解释：

Angular CLI使用webpack
Webpack使用AMD, Asynchronous Module Definition API来处理Loaders
详细说明模块ID时，AMD specification包含此部分：

如果在AMD实现中支持Loader插件，那么“！”用于将加载程序插件的模块ID与插件的资源ID分开。由于插件资源ID可以是非常自由的形式，因此应该允许大多数字符用于插件资源ID。

所有错误都是由 wrong design decision 引起的。

Answer 2

我也同样面临一个问题。我按照以下步骤操作。

注释错误行
运行<style name="DiffColis"> <conditionalStyle> <conditionExpression><![CDATA[new Long($F{qteStock}-$F{differenceColis}).compareTo(new Long(0))>0]]></conditionExpression> <style/> </conditionalStyle> </style>-这次webpack运行成功
未注释的前一行
Webpack运行成功

Angular：ng serve给出“webpack：编译失败”

我做了什么

完整错误日志：

版本

2 个答案: