CODEWITHSUNDEEP
angulartypescriptwebpackwebpack-dev-servercustom-configuration
Arvel
Arvel

Reputation: 11

How to fix "ModuleParseError: Module parse failed: Unexpected token (1:4)" about custom config Webpack angular typescript?

This is console log :

 ModuleParseError: Module parse failed: Unexpected token (1:4)
  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 
  > 404 Not Found
      at handleParseError (D:\Documents\NodeJS\PROJECTNAME\node_modules\webpack\lib\NormalModule.js:982:19)
      at D:\Documents\NodeJS\PROJECTNAME\node_modules\webpack\lib\NormalModule.js:1101:5
      at processResult (D:\Documents\NodeJS\PROJECTNAME\node_modules\webpack\lib\NormalMod ule.js:806:11)
      at D:\Documents\NodeJS\PROJECTNAME\node_modules\webpack\lib\NormalModule.js:866:5
      at D:\Documents\NodeJS\PROJECTNAME\node_modules\loader-runner\lib\LoaderRunner.js:407:3
      at iterateNormalLoaders (D:\Documents\NodeJS\PROJECTNAME\node_modules\loader-runner\lib\LoaderRunner.js:233:10)
      at D:\Documents\NodeJS\PROJECTNAME\node_modules\loader-runner\lib\LoaderRunner.js:224:4
      at D:\Documents\NodeJS\PROJECTNAME\node_modules\webpack\lib\NormalModule.js:840:15
      at Array.eval (eval at create (D:\Documents\NodeJS\PROJECTNAME\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
      at runCallbacks (D:\Documents\NodeJS\PROJECTNAME\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:15)

This is my webpack.config.js :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    polyfills: "./src/polyfills.ts", // add this
    main: "./src/main.ts" //change this
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devtool: "source-map",
  devServer: {
    historyApiFallback: true,
    static: path.join(__dirname, "dist"),
    compress: true,
    open: true
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "build/[name].js",
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.html$/,
        loader: "html-loader",
        options: {
          esModule: false,
        },
      }, /*
      {
        test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader',
      },*/
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "raw-loader",
            options: {
              esModule: false,
            }
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      inject: "body",
      scriptLoading: "blocking"
    })
  ]
};

This is my angular.json :

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "PROJECTNAME": {
      "projectType": "application",

      "schematics": {
        "@schematics/angular:component": {
          "style": "css",
          "standalone": true
        },
        "@schematics/angular:application": {
          "strict": true
        },
        "@schematics/angular:directive": {
          "standalone": true
        },
        "@schematics/angular:pipe": {
          "standalone": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build-webpack": {
          "builder": "@angular-devkit/build-webpack:webpack",
          "options": {
            "webpackConfig": "./webpack.config.js"
          }
        },
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true
            },
            "outputPath": "./dist/PROJECTNAME",
            "index": "./src/index.html",
            "main": "./src/main.ts",
            "polyfills": "./src/polyfills.ts",
            "tsConfig": "./tsconfig.app.json",
            "inlineStyleLanguage": "css",
            "assets": ["./src/favicon.ico", "./src/assets"],
            "styles": ["./src/styles.css"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "1024kb",
                  "maximumError": "2mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kb",
                  "maximumError": "8kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "PROJECTNAME:build:production"
            },
            "development": {
              "browserTarget": "PROJECTNAME:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "PROJECTNAME:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "./src/test.ts",
            "polyfills": "./src/polyfills.ts",
            "tsConfig": "./tsconfig.spec.json",
            "karmaConfig": "./karma.conf.js",
            "inlineStyleLanguage": "css",
            "assets": ["./src/favicon.ico", "./src/assets"],
            "styles": ["./src/styles.css"],
            "scripts": []
          }
        }
      }
    }
  }
}

This is my package.json :

{
  "name": "PROJECTNAME",
  "version": "1.0.0",
  "description": "Minimal angular application build with webpack",
  "main": "webpack.config.js",
  "type": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/cdk": "^16.1.3",
    "@angular/common": "16.2.0",
    "@angular/compiler": "16.2.0",
    "@angular/core": "16.2.0",
    "@angular/forms": "16.2.0",
    "@angular/localize": "^16.2.0",
    "@angular/material": "^16.2.0",
    "@angular/platform-browser": "16.2.0",
    "@angular/platform-browser-dynamic": "16.2.0",
    "@angular/platform-server": "16.2.0",
    "@angular/router": "16.2.0",
    "@angular/service-worker": "16.2.0",
    "@fortawesome/fontawesome-free": "6.4.0",
    "@ng-bootstrap/ng-bootstrap": "^15.1.0",
    "@ngneat/transloco": "^5.0.6",
    "@ngneat/transloco-locale": "^5.1.1",
    "@ngneat/transloco-messageformat": "^5.0.0",
    "@nguniversal/express-engine": "16.1.1",
    "@popperjs/core": "^2.11.8",
    "@types/crypto-js": "^4.1.1",
    "body-parser": "^1.20.2",
    "bootstrap": "5.3.0",
    "cors": "^2.8.5",
    "crypto-js": "^4.1.1",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "jquery": "^3.7.0",
    "moment": "^2.29.4",
    "multer": "^1.4.5-lts.1",
    "mysql2": "^3.5.2",
    "ngx-toastr": "^17.0.2",
    "ngx-webcam": "^0.4.1",
    "popper.js": "^1.16.1",
    "rimraf": "^5.0.1",
    "rxjs": "7.8.1",
    "sequelize": "^6.32.1",
    "style-loader": "^3.3.3",
    "ts-md5": "^1.3.1",
    "tslib": "2.6.0",
    "zone.js": "0.13.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "16.1.5",
    "@angular-eslint/builder": "16.1.0",
    "@angular-eslint/eslint-plugin": "16.1.0",
    "@angular-eslint/eslint-plugin-template": "16.1.0",
    "@angular-eslint/schematics": "16.1.0",
    "@angular-eslint/template-parser": "16.1.0",
    "@angular/cli": "16.1.5",
    "@angular/compiler-cli": "16.2.0",
    "@ngtools/webpack": "^16.2.0",
    "@types/crypto-js": "^4.1.1",
    "@types/express": "4.17.17",
    "@types/jasmine": "^4.3.5",
    "@types/node": "20.4.2",
    "@typescript-eslint/eslint-plugin": "6.1.0",
    "@typescript-eslint/parser": "6.1.0",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.8.1",
    "eslint": "8.45.0",
    "file-loader": "^6.2.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.3",
    "jasmine-core": "5.0.1",
    "karma": "6.4.2",
    "karma-chrome-launcher": "3.2.0",
    "karma-coverage": "2.2.1",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "mini-css-extract-plugin": "^2.7.6",
    "moment-locales-webpack-plugin": "^1.2.0",
    "sass": "^1.66.1",
    "sass-loader": "^13.3.2",
    "ts-loader": "^9.4.4",
    "typescript": "^4.7.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.88.2",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.15.1"
  }
}

This is my maint.ts :

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

This is my app.config.ts :

import {ApplicationConfig, importProvidersFrom, isDevMode} from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideClientHydration } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import {BrowserAnimationsModule, provideAnimations} from '@angular/platform-browser/animations';
import { routes } from './app.routes';
import { TranslocoHttpLoader } from './core/transloco-loader';
import { provideTransloco } from "@ngneat/transloco";
import { provideTranslocoLocale } from "@ngneat/transloco-locale";
import { provideTranslocoMessageformat } from "@ngneat/transloco-messageformat";

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(HttpClientModule, BrowserAnimationsModule),
    provideTransloco({
      config: {
        availableLangs: [
          { id: "en", label: "English" },
          { id: "fr", label: "Français" },
          { id: "de", label: "Deutsch" },
          { id: "es", label: "Español" }
        ],
        defaultLang: 'fr',
        fallbackLang: "en",
        missingHandler: {
          useFallbackTranslation: false
        },
        reRenderOnLangChange: true,
        prodMode: !isDevMode(),
      },
      loader: TranslocoHttpLoader,
    }),
    provideTranslocoMessageformat(),
    provideTranslocoLocale({
      langToLocaleMapping: {
        en: "en-US",
        es: "es-ES"
      }
    }),
    provideAnimations(),
    provideRouter(routes),
    provideHttpClient(),
    provideClientHydration(),
  ],
};

I don't understand which loader and changes are required, what's exactly missing so i am in trouble.

You can resolve by another way my problem with share (link) a starter project with :

I looking for since one week, tutorials are very old or doesn't match with technical environment.

Until this problem, i resolve all problem with log, but current log is very implicit for me.

Thank you for your time !

Upvotes: 1

Views: 309

Answers (0)

Related Questions