ERROR in Module parse failed: Unexpected token (1:0)

[angeloborrelli]

Hello,
Sorry I'm new to Angular and I cannot understand why I get this error just after installing ng-cli-pug-loader in an empty brand new project.
I'm on windows 10 x64 running:
Angular CLI: 9.1.7
Node: 12.17.0
npm: 6.14.4
OS: win32 x64
Angular: 9.1.9
Just for reference I report complete stack from project creation to final error:

C:\Users\Angelo\GIT>ng new ngclipugloaderapp
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE ngclipugloaderapp/angular.json (3654 bytes)
CREATE ngclipugloaderapp/package.json (1250 bytes)
CREATE ngclipugloaderapp/README.md (1034 bytes)
CREATE ngclipugloaderapp/tsconfig.json (489 bytes)
CREATE ngclipugloaderapp/tslint.json (3125 bytes)
CREATE ngclipugloaderapp/.editorconfig (274 bytes)
CREATE ngclipugloaderapp/.gitignore (631 bytes)
CREATE ngclipugloaderapp/browserslist (429 bytes)
CREATE ngclipugloaderapp/karma.conf.js (1029 bytes)
CREATE ngclipugloaderapp/tsconfig.app.json (210 bytes)
CREATE ngclipugloaderapp/tsconfig.spec.json (270 bytes)
CREATE ngclipugloaderapp/src/favicon.ico (948 bytes)
CREATE ngclipugloaderapp/src/index.html (303 bytes)
CREATE ngclipugloaderapp/src/main.ts (372 bytes)
CREATE ngclipugloaderapp/src/polyfills.ts (2835 bytes)
CREATE ngclipugloaderapp/src/styles.css (80 bytes)
CREATE ngclipugloaderapp/src/test.ts (753 bytes)
CREATE ngclipugloaderapp/src/assets/.gitkeep (0 bytes)
CREATE ngclipugloaderapp/src/environments/environment.prod.ts (51 bytes)
CREATE ngclipugloaderapp/src/environments/environment.ts (662 bytes)
CREATE ngclipugloaderapp/src/app/app-routing.module.ts (246 bytes)
CREATE ngclipugloaderapp/src/app/app.module.ts (393 bytes)
CREATE ngclipugloaderapp/src/app/app.component.html (25757 bytes)
CREATE ngclipugloaderapp/src/app/app.component.spec.ts (1092 bytes)
CREATE ngclipugloaderapp/src/app/app.component.ts (221 bytes)
CREATE ngclipugloaderapp/src/app/app.component.css (0 bytes)
CREATE ngclipugloaderapp/e2e/protractor.conf.js (808 bytes)
CREATE ngclipugloaderapp/e2e/tsconfig.json (214 bytes)
CREATE ngclipugloaderapp/e2e/src/app.e2e-spec.ts (650 bytes)
CREATE ngclipugloaderapp/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in browserslist.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory
Successfully initialized git.

C:\Users\Angelo\GIT>cd ngclipugloaderapp

C:\Users\Angelo\GIT\ngclipugloaderapp>ng serve --open
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-05-28T14:38:45.236Z - Hash: d8d53cbff02599a4fcfe - Time: 11767ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

C:\Users\Angelo\GIT\ngclipugloaderapp>ng add ng-cli-pug-loader
Installing packages for tooling via npm.
Installed packages for tooling via npm.
CREATE ng-add-pug-loader.js (2150 bytes)
UPDATE package.json (1413 bytes)
UPDATE node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js (22546 bytes)
UPDATE node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js (4793 bytes)
/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-\ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-\ Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-\ Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-\ Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] | loadIdealTree:loadAllDepsIntoIdea\ Installing packages...[..................] / fetchMetadata: sill resolveWithNe| Installing packages...[ .................] \ fetchMetadata: sill resolveWithNe/ Installing packages...[ .................] | fetchMetadata: sill resolveWithNe- Installing packages...[ .................] | fetchMetadata: sill resolveWithNe\ Installing packages...[ .................] / fetchMetadata: sill resolveWithNe| Installing packages...[ .................] \ fetchMetadata: sill resolveWithNenpm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
/ Installing packages...[ .................] - fetchMetadata: sill resolveWithNe- Installing packages...[ .................] - fetchMetadata: sill resolveWithNe\ Installing packages...[ .................] | fetchMetadata: sill resolveWithNe| Installing packages...[ .................] / fetchMetadata: sill resolveWithNe/ Installing packages...[ .................] | loadDep:repeat-string: sill resol- Installing packages...[ ................] - fetchMetadata: sill resolveWithNe/ Installing packages...[ ...............] / loadDep:rxjs: sill resolveWithNew- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] - diffTrees: sill install generateA/ Installing packages...[ ...........] - diffTrees: sill install generateA\ Installing packages...[ ...........] | postinstall: sill install execute| Installing packages...[ ...........] - extract:pug: verb lock using C:\U/ Installing packages...[ ...........] - extract:pug: verb lock using C:\U- Installing packages...[ ...........] - extract:pug: verb lock using C:\U\ Installing packages...[ .........] | extract:regenerator-runtime: sill| Installing packages...[ ........] / extract:fsevents: sill extract pu/ Installing packages...[ .......] / extract:loader-utils: sill extrac- Installing packages...[ .......] / extract:loader-utils: sill extrac\ Installing packages...[ ......] - extract:acorn: sill extract acorn| Installing packages...[ ......] \ extract:acorn: sill extract acorn/ Installing packages...[ ......] | extract:clean-css: sill extract c- Installing packages...[ ......] / extract:babel-runtime: sill extra\ Installing packages...[ ......] / extract:babel-runtime: sill extra| Installing packages...[ ......] / extract:babel-runtime: sill extra/ Installing packages...[ ......] / extract:babel-runtime: sill extra- Installing packages...[ ......] / extract:babel-runtime: sill extra\ Installing packages...[ ......] / extract:babel-runtime: sill extra| Installing packages...[ ......] / extract:babel-runtime: sill extra/ Installing packages...[ ......] / extract:babel-runtime: sill extra- Installing packages...[ ......] \ finalize:clean-css: sill finalize\ Installing packages...[ ......] | finalize:fsevents: sill finalize | Installing packages...[ ......] \ refresh-package-json:pug: timing / Installing packages...[ ......] - refresh-package-json:pug: timing - Installing packages...[ ......] \ build:@types/babylon: sill linkSt\ Installing packages...[ ......] \ install:constantinople: info life

[email protected] postinstall C:\Users\Angelo\GIT\ngclipugloaderapp\node_modules\babel-runtime\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"

| Installing packages...[ ......] \ postinstall: info lifecycle pug@2\ Installing packages...[ ......] - postinstall: info lifecycle pug@2npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\ng-cli-pug-loader\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

• [email protected]
• [email protected]
• [email protected]
  added 55 packages from 130 contributors and audited 1514 packages in 18.12s
  \ Installing packages...
  50 packages are looking for funding
  run npm fund for details

found 0 vulnerabilities

√ Packages installed successfully.

C:\Users\Angelo\GIT\ngclipugloaderapp>ng serve --open

chunk {main} main.js, main.js.map (main) 2.01 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 683 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
Date: 2020-05-28T14:58:26.673Z - Hash: 9d620c3650df7ca0d530 - Time: 3934ms

ERROR in Module parse failed: Unexpected token (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

|
|
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

In browser I get an empty page reporting Error "Cannot GET /"
Any help will be appreciated.
Thank you

Angelo

[entith]

I got this as well on a clean Angular 9.1.11 project created with Angular CLI 9.1.8.

After a bit of digging, it seems the issue is caused by the directTemplateLoading setting being set to false.

To the best of my understanding, directTemplateLoading: true (the default) has Angular tell webpack to use the raw-loader for template files. Setting this setting to false bypasses that and template files will be loaded based on the configured webpack rules. This allows ng-cli-pug-loader to add in the specific pug loading rules.

As far as I can tell, the issue is that there is no provided rule for loading HTML files, so the webpack build fails.

I know I didn't have this issue with older versions of Angular (don't recall which off the top of my head, v6/v7 maybe), so I guess something changed with v9? Manually adding an HTML rule the same way ng-cli-pug-loader adds the pug rule doesn't quite seem like the correct fix.

(The above is based on my very limited understanding of webpack and the angular-cli build process, it could be very wrong)

---

@angeloborrelli The immediate workaround for me was to just replace all HTML templates with pug template.

This does mean that you can't use HTML templates at all, and I wouldn't be surprised if it broke 3rd party libraries that provided HTML-based components.

[gasfab999]

@angeloborrelli
I also came now across this bug after creating a new project with angular v 9.1.4 the sample application inside (with routing). I installed then this library (after doing npm install the problem started as in there the node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js gets changed with directTemplateLoading: false).
I changed then the app.component.html file to app.component.pug and changed as well the templateUrl in the app.component.ts. The problem still appeared.

However when I delete the whole placeholder content (beside <router-outlet></router-outlet>) in the view file app.component.pug it worked again. So it just seems that the default sample had some invalid characters for the pug-loader.

Can you confirm that this is as well the issue for you?

[hardeylim]

@gasfab999 did you get this to work?

I started a fresh project using Angular version 10.0.1 and I am experiencing same issue with above

ERROR in Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|

[aserra23]

@gasfab999 did you get this to work?

I started a fresh project using Angular version 10.0.1 and I am experiencing same issue with above

ERROR in Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|

Check this issue. It helped me out to get it running.
#34 (comment)

which then links to this following issue.
pugjs/pug-loader#120 (comment)

It's the escaping that the poster mentioned that was causing the problems for me.

I was doing an update from Angular 9 to Angular 10

[gasfab999]

@gasfab999 did you get this to work?

I started a fresh project using Angular version 10.0.1 and I am experiencing same issue with above

ERROR in Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|

@hardeylim as said, I just needed to remove the not needed stuff from the view of the app.component and it was building fine. It seems in those comments etc where some invalid characters the pug loader could not handle. So it is not an big issue at all.

[danguilherme]

This project is no longer maintained. Check out ngx-pug-builders to add support to pug files to your Angular project.