0

I am unable to mount the single-spa application after upgrading to the latest version of webpack 5 and angular 14.

I have been working towards upgrading our application from angular 8 to angular 14, webpack 4.x to webpack 5.x and single-spa-angular version 4.9.2 to single-spa-angular ^7.1.0. After completing all these and updating the recommended setup in the webpack. I am getting stuck with following error while mounting the application.

TypeError: this.input.charCodeAt is not a function
    at PlainCharacterCursor.charAt (compiler.mjs:13907:1)
    at PlainCharacterCursor.updatePeek (compiler.mjs:13926:1)
    at PlainCharacterCursor.init (compiler.mjs:13885:1)
    at new _Tokenizer (compiler.mjs:13156:1)
    at tokenize (compiler.mjs:13104:1)
    at HtmlParser.parse (compiler.mjs:14101:1)
    at HtmlParser.parse (compiler.mjs:14489:1)
    at parseTemplate (compiler.mjs:18632:1)
    at parseJitTemplate (compiler.mjs:19843:1)
    at CompilerFacadeImpl.compileComponent (compiler.mjs:19580:1)

I am using microfrontend wrapper as below

(function iife() {
    "use strict";
    angular.module("source.directives")
        .directive("mfeHapWrapper", function mfeAppWrapperDirective() {
            return {
                restrict: "E",
                templateUrl: "index.template.html"
            };
        });
}());

As per the html-loader i do not require to use require for importing the template as I am using html-loader version 4.2.0

This is my single-spa mount section and it is failing at app.mount

mount: async (spaProps: any) => {
  try {
    console.log("Mounting app");
    await app.mount(spaProps);
  } catch (e) {
    console.error(e);
  }
}

Initially I was getting error related to loading a template like something below.

Error: [$templateRequest:tpload] Failed to load template: index.template.html (HTTP status: undefined undefined)
https://errors.angularjs.xlts.dev/1.8.7/$templateRequest/tpload?p0=index.template.html&p1=undefined&p2=undefined
    at eval (angular.js:161:1)
    at handleError (angular.js:21629:1)
    at processQueue (angular.js:18135:1)
    at eval (angular.js:18183:1)
    at Scope.$digest (angular.js:19302:1)
    at Scope.$apply (angular.js:19690:1)
    at bootstrapApply (angular.js:1989:1)
    at Object.invoke (angular.js:5256:1)
    at doBootstrap (angular.js:1986:1)
    at Object.bootstrap (angular.js:2007:1) undefined

After updating the html-loader version to 4.2.0 from the package.json I was able to resole that template load issue, but now I stuck with the issue

TypeError: this.input.charCodeAt is not a function

My application is webpack and a grunt build system, and I am using both angular JS and angular together in my application and downgrading all our code into angular js. related package versions are:

"angular2-template-loader": "^0.6.2",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.1",
"@angular/core": "^14.3.0",
"angular": "npm:@xlts.dev/angular@1.8.7",
"angular-2-local-storage": "^3.0.2",
"npm": "^6.10.3",
"single-spa-angular": "^4.9.2",
"tslib": "^2.3.0",
"webpack-merge": "^4.1.1",
"zone.js": "~0.11.4"
"webpack": "^5.88.1",
"webpack-cli": "^5.1.1",

Please suggest

Tried updating html loader, single-spa-angular and webpack versions Refered these links https://stackoverflow.com/questions/39491341/uncaught-typeerror-this-input-charcodeat-is-not-a-function and checked the import of the template section

https://errors.angularjs.xlts.dev/1.8.7/$templateRequest/tpload?p0=index.template.html&p1=undefined&p2=undefined

Update:

It seems like, there is an issue with html-loader for my application. I do not have the right documentation to follow

I have also followed this documentation https://webpack.js.org/loaders/html-loader/ to load the HTML content.

This is my html loader webpack rules

{
  test: /\.html$/,
  loader: "html-loader",
}

Also, tried updating the html-loader as below as per webpack documentation

{
  test: /\.html$/,
  type: "asset/resource",
}

but no luck.

Gopet
  • 11
  • 2

0 Answers0