Meteor 1.10.1 breaks Angular integration when AOT is enabled

cosmin · April 14, 2020, 1:54pm

Hi there,

TLDR: Meteor 1.10.1 + Angular with AOT enabled breaks with method not found errors in angular-compilers library (part of angular-meteor project).

I’m having a lot of trouble trying to find a solution to allow me to update my project from meteor 1.8 to 1.10.1. The main issue is that the integration with Angular done through the angular-meteor library breaks the project - seems like this library is not maintained anymore (last update was in May 2019).

There are a couple of major issues with 1.10.1 + Angular:

If you do ‘meteor add angular-compilers’ you get this error related to node-sass:

gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit
[...]
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.7.2 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the node-sass@4.7.2 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I was able to solve this by installing mibto:angular-compilers instead of original angular-compilers. It updates some versions for angular-compilers dependencies. This works ok, provided you disable AOT by setting this environment variable AOT=0 (by default it’s set to 1).

Building with AOT enabled breaks with these errors:

with Angular 7/8 I get: compiler.ts:843:42: host.isSourceFile is not a function
with Angular 9 I get: angular-typescript-compiler/index.js:370:42: compiler.analyzeModulesAsync is not a function

This is the what I am struggling with because I really need to get AOT to work for performance reasons.

What makes this worse and urgent is that updating to 1.10.1 is mandatory for a lot of people because the latest version of Xcode doesn’t support the old version of Swift produced by Cordova 7 bundled with pre 1.10.1 version of meteor.

Any help figuring this out would be much appreciated!

benjaminlueken · April 17, 2020, 9:28am

Hi cosmin,

You might try to disable Ivy within the angular-typescript-compiler package:

--- a/packages/angular-typescript-compiler/index.js
+++ b/packages/angular-typescript-compiler/index.js
@@ -65,6 +65,7 @@ const ngcOptions = {
   traceResolution: false,
   skipTemplateCodegen: false,
   fullTemplateTypeCheck: true,
+       enableIvy: false,
   disableTypeScriptVersionCheck: true
 };

This should solve your problem. To change this it might be necessary to fork the package and copy it to your top level packages folder.

This issue is caused by a breaking change in Angular 9 which caused a wrong return for “createProgram”. It is not returning the compiler anymore, which is causing the issue.

Found here (Angular project)

simontbates · April 30, 2020, 11:46am

I am also trying to find a solution to this problem. I believe the problem is first introduced in the Meteor 1.8.2 update. I narrowed down the problem to the angular-meteor package and so I filed a bug with the angular-meteor package on GitHub as I found that the “Bare” example in that project breaks in Meteor 1.8.2 (with a minor tweak). See https://github.com/Urigo/angular-meteor/issues/1979.
I’m not sure whether the angular-meteor package is still being supported, which is a little concerning as I don’t know of another way to do AOT with Meteor and Angular. I really don’t want to go back to the loading of modules at runtime as it’s far too slow for larger projects. I would welcome any suggestions for how AOT can be done in a different way.

p3pp8 · May 6, 2020, 11:12am

Did you find any soluton to da problem? I’ve just put a local packages folder into my project root with source for angular-compilers and added to angular-typescript-compiler the enableIvy: false to ngcOptions.

Cheers

simontbates · June 15, 2020, 8:20am

@p3pp8 - did doing that fix the problem for you?

cosmin · September 7, 2020, 9:53am

Thanks @benjaminlueken and @p3pp8 . I’ve created a new version of angular-compilers in Atmosphere that has the “enableIvy: false” tweak. If it’s useful for anyone else, you can find the atmosphere package here, and the git repo here.

However, even with angular 9 or 10, now I get the other issue while processing with angular-compilers: [...]/packages/compiler/src/aot/compiler.ts:854:42: host.isSourceFile is not a function

Again, this only seems to be an issue when having AOT turned on. If I disable AOT (by setting the AOT env variable to 0), it works.

Any clue on how to fix this one? I haven’t been able to find anything online. If anyone familiar with angular-compilers could help, it would be much appreciated by quite a few people I think.

p3pp8 · September 7, 2020, 10:25am

Hello, i’ve made a custom version of angular-compilers module disabling ivy, removing the meteor typescript compiler and updating it with one made my own that uses latest Typescript release, then i’ve been able to compile my project using latest angular version with AOT enabled. The app now is very fast in rendering pages!

cosmin · September 7, 2020, 11:56am

@p3pp8 Nice!

Can you please share more detailed info on how to do it?

From what you’re saying there seem to be 2 parts to the solution:

Disable Ivy in angular-typescript-compiler package
Update the meteor-typescript dependency inside angular-typescript-compiler (this one)

I got #1 but having some difficulty with #2. Can you share what needs done to update meteor-typescript?

I’ve tried just updating the typescript dependency to the latest one 4.0.2 here in the meteor-typescript package. Build works, but then two tests fail when I run “npm run test”:

Failures:

  1) meteor-typescript ->  testing diagnostics and typings ->  should contain a semantic error when some module undefined
   Message:
     TypeError: Cannot read property 'code' of undefined
   Stacktrace:
     TypeError: Cannot read property 'code' of undefined
    at jasmine.Spec.<anonymous> (/Users/cosmin/Documents/meteor-typescript/tests/typings.spec.js:9:1580)

  2) meteor-typescript ->  testing diagnostics and typings ->  diagnostics re-evaluation works fine
   Message:
     TypeError: Cannot read property 'code' of undefined
   Stacktrace:
     TypeError: Cannot read property 'code' of undefined
    at jasmine.Spec.<anonymous> (/Users/cosmin/Documents/meteor-typescript/tests/typings.spec.js:9:2183)

Finished in 2.69 seconds
40 tests, 77 assertions, 2 failures, 0 skipped

p3pp8 · September 7, 2020, 1:09pm

Easy,

create a packages folder inside the root of your Meteor project
unpack angular-compilers inside
remove meteor-typescript dependency from package.js
create your own TS builder where u use the transpileModule function from latest Typescript version to transpile you scripts.
Update index.js plugin script inside angular-typescript-compiler to use you builder substituting the old TSBuild from meteor-typescript. Of course update compiler options in order to disable ivy
Enable AOT using environment variables

Of course you have to remove angular-compilers from your meteor project as the local one will be used. ie: meteor remove angular-compilers.

You than update all dependencies of angular-compilers plugins like the scss node-sass plugin or the latest ecmascript version, just edit their package.js but don’t touch the cheerio plugin from the html compiler that must be kept to 0.22.0 or your angular project will not execute.

I’m using Angular v9.2.4 with AOT enabled without any problem.

I had to update regex from index.js inside angular-typescript-compiler, quite honestly i don’t remember what i changed, i c&p my code below:

const TEMPLATE_URL_REGEX = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*([,}]))/gm;
const STYLES_URLS_REGEX = /styleUrls *:(\s*\[[^\]]*?\])/g;
const LOAD_CHILDREN_REGEX = /loadChildren[\s]*:[\s]*(['|"].*#{1}.*['|"])/gm;
const STRING_REGEX = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;

I hope u’ll be able to update your project!

cosmin · September 7, 2020, 2:26pm

Thanks @p3pp8. This is super helpful.

I’m still confused on this point though: create your own TS builder where u use the transpileModule function from latest Typescript version to transpile you scripts.

So you basically got rid of the meteor-typescript npm depdendency and built your own version of TSBuild() on top of the typescript package using the transpileModule() function. I don’t even know where to begin to do that, looks like it requires deep knowledge of the typescript compiler.

Would you be willing to share any code you used for doing this? Like say ‘angular-typescript-compiler/index.js’ and any other relevant files? Doesn’t have to be a git repo, even a gist would suffice.

PS: If I manage to get this working I’ll publish the necessary atmosphere + npm packages to get it working for other people struggling with this issue.

p3pp8 · September 7, 2020, 3:40pm

Can’t share my code as it’s on a copyright, but it’s easy to use typescript to transpile:

import ts from 'typescript';

// transpile ts to js as a string
const result = ts.transpileModule(source, { 
       compilerOptions: this.buildOptions.compilerOptions, 
       reportDiagnostics: true 
});

Where source is your typescript script as a string.
I created a simple memory cache to avoid to transpile several times scripts that are already transplied.
You can create a class named the same TSBuild as the orignal from meteor-typescript and add the emit method as well in order to receive the scripts, such as you have to change as less original code as you can from inside the index.js of angular-typescript-compilers.

cosmin · September 22, 2020, 6:59pm

Thanks for the help @p3pp8. I’ve managed to track down the host.isSourceFile is not a function problem. It was not an issue with the meteor typescript compiler but it was related to some changes made in the updated mibto:angular-compiler package I was using before. Have a look at the github issue here for more details.

So I applied the disable Ivy trick and managed to get it working with Meteor 1.11 and Angular 10 with AOT enabled.

If anyone else is struggling with this, feel free to try my solution. I’ve also created a new angular-compilers package to make it easy. Just replace angular-compilers with digicore:angular-compilers (version 0.4.2).

I’ve tried updating to latest typescript but ran into some other issues so I’m leaving it as is for now.

clmmm · November 4, 2020, 12:17am

Is this project dead ?

elmamc · November 5, 2020, 6:23pm

I’m thinking the same things.
I could only create a stable build with the latest Angular and Meteor update creating the client with AngularCLI and using the “meteor-client-bundler”.
Can someone please confirm that this is the only method to create an App with Angular-Meteor?

buymybm100 · November 6, 2020, 10:44am

Hi @cosmin, Thanks for creating the new package. Would you mind sharing your packages file and package.json please ?

I’m getting an “Unexpected string in JSON at position …” error. Not sure if it’s my code or config.

[client]: HTML Files Compilation: 6.676ms -
[client]: SCSS Files Compilation: 3.419ms
[client]: HTML Files Compilation: 1.487ms
[client]: SCSS Files Compilation: 1.535ms
[server]: HTML Files Compilation: 0.077ms /
(node:1507) Warning: Label ‘[client]: Collecting TypeScript source files’ already exists for console.time()
=> Errors prevented startup:

While processing files with digicore:angular-compilers (for target web.browser):
: Unexpected string in JSON at position 374
at JSON.parse ()
at packages/digicore:angular-typescript-compiler/index.js:156:25
at Array.forEach ()
at AngularTsCompiler.processFilesForTarget (packages/digicore:angular-typescript-compiler/index.js:149:16)

My packages file:
meteor-base@1.4.0 # Packages every Meteor app needs to have
mongo@1.10.0 # The database Meteor supports right now
jquery # Wrapper package for npm-installed jquery
reactive-var@1.0.11 # Reactive variable for tracker
tracker@1.2.0 # Meteor’s client-side reactive programming library
standard-minifier-css@1.6.1 # CSS minifier run for production mode
standard-minifier-js@2.6.0 # JS minifier run for production mode
es5-shim@4.8.0 # ECMAScript 5 compatibility for older browsers
digicore:angular-compilers

Meteor version
METEOR@1.11.1

package.json
{
“name”: “testmeteor”,
“private”: true,
“scripts”: {
“start”: “meteor run”,
“test”: “meteor test --once --driver-package meteortesting:mocha”
},
“dependencies”: {
“@angular/animations”: “10.2.1”,
“@angular/common”: “^10.2.2”,
“@angular/compiler”: “^10.2.2”,
“@angular/compiler-cli”: “^10.2.1”,
“@angular/core”: “^10.2.2”,
“@angular/localize”: “10.2.1”,
“@angular/cli”: “^10.2.0”,
“@angular/forms”: “10.2.1”,
“@angular/platform-browser”: “10.2.1”,
“@angular/platform-browser-dynamic”: “10.2.1”,
“@angular/router”: “10.2.1”,
“@apollo/client”: “^3.0.2”,
“@types/meteor”: “^1.4.64”,
“angular-meteor”: “^1.3.12”,
“apollo-angular”: “^2.0.4”,
“apollo-angular-link-http”: “^1.11.0”,
“apollo-cache-inmemory”: “^1.6.6”,
“apollo-client”: “^2.6.10”,
“apollo-link”: “^1.2.14”,
“apollo-link-ws”: “^1.0.20”,
“graphql”: “^14.7.0”,
“graphql-tag”: “^2.11.0”,
“meteor-node-stubs”: “^1.0.1”,
“react”: “^16.8.0”,
“rxjs”: “^6.6.0”,
“rxjs-compat”: “^6.6.0”,
“subscriptions-transport-ws”: “^0.9.0”,
“tslib”: “^2.0.0”,
“zone.js”: “~0.10.2”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “~0.1001.4”,
“@types/jasmine”: “~3.5.0”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “^12.11.1”,
“apollo”: “^2.16.3”,
“chai”: “^4.2.0”,
“codelyzer”: “^6.0.0”,
“jasmine-core”: “~3.6.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~5.0.0”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage-istanbul-reporter”: “~3.0.2”,
“karma-jasmine”: “~4.0.0”,
“karma-jasmine-html-reporter”: “^1.5.0”,
“ng-packagr”: “^10.0.0”,
“protractor”: “~7.0.0”,
“ts-node”: “~8.3.0”,
“tslint”: “~6.1.0”,
“typescript”: “^4.0.5”
}
}

Much appreciated,
Beemer

cosmin · November 6, 2020, 11:15am

Sure

meteor version: 1.11.1

package.json:

{
  "private": true,
  "scripts": {
    "start": "meteor run",
  },
  "dependencies": {
    "@angular/animations": "^10.1.0",
    "@angular/cdk": "^10.1.0",
    "@angular/common": "^10.1.0",
    "@angular/compiler": "^10.1.0",
    "@angular/core": "^10.1.0",
    "@angular/forms": "^10.1.0",
    "@angular/platform-browser": "^10.1.0",
    "@angular/platform-browser-dynamic": "^10.1.0",
    "@angular/router": "^10.1.0",
    "@babel/runtime": "7.11.2",
    "@ng-select/ng-select": "^3.7.3",
    "@ngx-share/core": "^7.1.4",
    "analytics-node": "^3.4.0-beta.1",
    "arc4": "^3.4.0",
    "autoprefixer": "^6.3.1",
    "aws-sdk": "^2.551.0",
    "bcrypt": "^3.0.8",
    "core-js": "2.5.7",
    "fast-xml-parser": "^3.12.16",
    "google-auth-library": "^4.2.5",
    "meteor-node-stubs": "0.4.1",
    "meteor-rxjs": "0.4.14",
    "moment": "^2.24.0",
    "mongo-dot-notation": "^2.0.0",
    "ng2-pdf-viewer": "^6.3.2",
    "ngrok": "^3.2.7",
    "ngx-custom-validators": "^7.0.0",
    "ngx-image-cropper": "^1.3.9",
    "ngx-perfect-scrollbar": "^7.2.1",
    "ngx-pinch-zoom": "^2.5.4",
    "ngx-toastr": "^10.0.4",
    "pdfkit": "^0.10.0",
    "postcss": "6.0.22",
    "postcss-easy-import": "1.0.1",
    "postcss-load-config": "1.2.0",
    "prerender-node": "^3.2.4",
    "qs": "^6.7.0",
    "rxjs": "6.3.3",
    "sharp": "^0.26.2",
    "string-similarity": "^4.0.1",
    "sync": "^0.2.5",
    "tslib": "^1.10.0",
    "underscore": "^1.9.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^10.1.0",
    "@types/chai": "4.1.7",
    "@types/meteor": "1.4.23",
    "@types/mocha": "5.2.5",
    "@types/pdfkit": "^0.10.3",
    "@types/sinon": "5.0.7",
    "chai": "4.2.0",
    "cypress": "^4.10.0",
    "mocha": "5.2.0",
    "puppeteer": "1.10.0",
    "sinon": "7.1.1",
    "typescript": "3.6.4"
  },
  "postcss": {
    "plugins": {
      "postcss-easy-import": {},
      "autoprefixer": {
        "browsers": [
          "last 2 versions"
        ]
      }
    }
  }
}

packages:

meteor-base@1.4.0             # Packages every Meteor app needs to have
mobile-experience@1.1.0       # Packages for a great mobile UX
mongo@1.10.0                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.2.0                 # Meteor's client-side reactive programming library

standard-minifier-js@2.6.0    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.14.3              # Enable ECMAScript2015+ syntax in app code
shell-server@0.5.0            # Server-side component of the `meteor shell` command

jquery
semantic:ui
less
accounts-base@1.7.0
accounts-password@1.6.2
accounts-facebook@1.3.2
meteorhacks:ssr
alanning:roles
http@1.4.2
cfs:http-methods
stb:impersonate
check@1.3.1
email@2.0.0
accounts-google@1.3.3
juliancwirko:postcss
digicore:angular-compilers@0.4.2

versions:

accounts-base@1.7.0
accounts-facebook@1.3.2
accounts-google@1.3.3
accounts-oauth@1.2.0
accounts-password@1.6.2
alanning:roles@1.2.19
allow-deny@1.1.0
autoupdate@1.6.0
babel-compiler@7.5.3
babel-runtime@1.5.0
base64@1.0.12
binary-heap@1.0.11
blaze@2.3.4
blaze-tools@1.0.10
boilerplate-generator@1.7.1
caching-compiler@1.2.2
caching-html-compiler@1.1.3
callback-hook@1.3.0
cfs:http-methods@0.0.32
check@1.3.1
ddp@1.4.0
ddp-client@2.3.3
ddp-common@1.4.0
ddp-rate-limiter@1.0.9
ddp-server@2.3.2
deps@1.0.12
diff-sequence@1.1.1
digicore:angular-compilers@0.4.2
digicore:angular-html-compiler@0.4.2
digicore:angular-scss-compiler@0.4.2
digicore:angular-typescript-compiler@0.4.2
dynamic-import@0.5.2
ecmascript@0.14.3
ecmascript-runtime@0.7.0
ecmascript-runtime-client@0.11.0
ecmascript-runtime-server@0.10.0
ejson@1.1.1
email@2.0.0
es5-shim@4.8.0
facebook-oauth@1.7.0
fetch@0.1.1
geojson-utils@1.0.10
google-oauth@1.3.0
gwendall:body-events@0.1.7
hot-code-push@1.0.4
html-tools@1.0.11
htmljs@1.0.11
http@1.4.2
id-map@1.1.0
inter-process-messaging@0.1.1
jquery@1.11.11
juliancwirko:postcss@2.0.3
launch-screen@1.2.0
less@2.8.0
livedata@1.0.18
localstorage@1.2.0
logging@1.1.20
meteor@1.9.3
meteor-base@1.4.0
meteorhacks:ssr@2.2.0
minifier-css@1.5.3
minifier-js@2.6.0
minimongo@1.6.0
mobile-experience@1.1.0
mobile-status-bar@1.1.0
modern-browsers@0.1.5
modules@0.15.0
modules-runtime@0.12.0
mongo@1.10.0
mongo-decimal@0.1.1
mongo-dev-server@1.1.0
mongo-id@1.0.7
npm-bcrypt@0.9.3
npm-mongo@3.8.1
oauth@1.3.0
oauth2@1.3.0
observe-sequence@1.0.16
ordered-dict@1.1.0
promise@0.11.2
random@1.2.0
rate-limit@1.0.9
reactive-var@1.0.11
reload@1.3.0
retry@1.1.0
routepolicy@1.1.0
semantic:ui@2.3.1
semantic:ui-data@2.3.1
service-configuration@1.0.11
sha@1.0.9
shell-server@0.5.0
socket-stream-client@0.3.1
spacebars@1.0.15
spacebars-compiler@1.1.3
srp@1.1.0
standard-minifier-js@2.6.0
stb:impersonate@0.1.2
templating@1.3.2
templating-compiler@1.3.3
templating-runtime@1.3.2
templating-tools@1.1.2
tmeasday:check-npm-versions@0.3.2
tracker@1.2.0
underscore@1.0.10
url@1.3.1
webapp@1.9.1
webapp-hashing@1.0.9

buymybm100 · November 6, 2020, 2:15pm

@elmamc, try starting from the ‘bare’ example from angular-meteor.

I got it to work with release 1.11.1 and the ‘packages’ and ‘package.json’ from @cosmin above.

packages
meteor-base@1.4.0 # Packages every Meteor app needs to have
mongo@1.10.0 # The database Meteor supports right now
reactive-var@1.0.11 # Reactive variable for tracker
tracker@1.2.0 # Meteor’s client-side reactive programming library

es5-shim@4.8.0 # ECMAScript 5 compatibility for older browsers
ecmascript@0.12.3 # Enable ECMAScript2015+ syntax in app code
shell-server@0.4.0 # Server-side component of the meteor shell command

digicore:angular-compilers@0.4.2
standard-minifier-css@1.5.2
standard-minifier-js@2.4.0

package.json
{
“private”: true,
“scripts”: {
“start”: “meteor run”,
“start:prod”: “AOT=1 ROLLUP=1 meteor --production”,
“test”: “TEST_BROWSER_DRIVER=puppeteer meteor test --driver-package=ardatan:mocha --raw-logs”,
“test:ci”: “TEST_BROWSER_DRIVER=puppeteer meteor test --driver-package=ardatan:mocha --once --raw-logs”
},
“dependencies”: {
“@angular/animations”: “^10.1.0”,
“@angular/cdk”: “^10.1.0”,
“@angular/common”: “^10.1.0”,
“@angular/compiler”: “^10.1.0”,
“@angular/core”: “^10.1.0”,
“@angular/forms”: “^10.1.0”,
“@angular/platform-browser”: “^10.1.0”,
“@angular/platform-browser-dynamic”: “^10.1.0”,
“@angular/router”: “^10.1.0”,
“@babel/runtime”: “7.11.2”,
“core-js”: “^2.5.7”,
“meteor-node-stubs”: “^0.4.1”,
“meteor-rxjs”: “^0.4.14”,
“rxjs”: “^6.5.5”,
“rxjs-compat”: “^6.5.5”,
“tslib”: “^1.10.0”,
“zone.js”: “^0.10.3”
},
“devDependencies”: {
“@angular/compiler-cli”: “^8.2.14”,
“@types/chai”: “^4.1.7”,
“@types/meteor”: “^1.4.23”,
“@types/mocha”: “^5.2.5”,
“@types/sinon”: “^5.0.7”,
“chai”: “^4.2.0”,
“mocha”: “^5.2.0”,
“puppeteer”: “^1.10.0”,
“sinon”: “^7.1.1”,
“typescript”: “^3.6.5”
}
}

tsconfig.json
{
“compilerOptions”: {
“allowSyntheticDefaultImports”: true,
“baseUrl”: “.”,
“declaration”: false,
“emitDecoratorMetadata”: true,
“importHelpers”: true,
“experimentalDecorators”: true,
“lib”: [
“dom”,
“es2015”
],
“module”: “commonjs”,
“moduleResolution”: “node”,
“sourceMap”: true,
“target”: “es2015”,
“skipLibCheck”: true,
“stripInternal”: true,
“noImplicitAny”: false,
“types”: [
“@types/meteor”,
“@types/node”,
“@types/mocha”,
“@types/chai”,
“@types/sinon”
]
},
“include”: [
“imports//*.ts",
"client//.ts",
"server/**/.ts”
],
“exclude”: [
“node_modules”
],
“compileOnSave”: false,
“atom”: {
“rewriteTsconfig”: false
}
}

Best wishes,
Beemer

elmamc · November 6, 2020, 3:14pm

That’s worked! Thanks a lot!

dr7 · November 19, 2020, 8:51pm

Hi,

I tried your angular-compilers package, but seems that Lazy module loading is not working.

First, I was using urigo’s package, I copied it into packages folder and modified versions to make it work with meteor 1.11.1. Lazy module loading weren’t working either, but I managed to fix it changing this method in ‘angular-typescript-compilers’ :

replaceDynamicLoadingCode(code) {

    return code.replace(LOAD_CHILDREN_REGEX,
      (match, url) => {
        url = url.split('\'').join('').split('"').join('').split(',').join('');
        const urlArr = url.split('#');
        let modulePath = urlArr[0].trim();
        let moduleName = urlArr[1].trim();
        if (this.isAot) {
          modulePath += '.ngfactory';
          moduleName += 'NgFactory';
        }
        return `loadChildren: () => module.dynamicImport('${modulePath}').then(allModule => allModule['${moduleName}'])`;
      });

}

With this:

replaceDynamicLoadingCode = function (code) {

    while (code.match(LOAD_CHILDREN_REGEX) && code.match(LOAD_CHILDREN_REGEX).length > 0) {

      code = code.replace(LOAD_CHILDREN_REGEX,
        (url, match) => {
          url = url.split('loadChildren:').join('').split(' ').join('').split('\'').join('').split('"').join('').split(',').join('');
          const urlArr = url.split('#');
          let modulePath = urlArr[0].trim();
          let moduleName = urlArr[1].trim();
          if (this.isAot) {
            modulePath += '.ngfactory';
            moduleName += 'NgFactory';
          }
          return `loadChildren: () => module.dynamicImport('${modulePath}').then(allModule => allModule['${moduleName}'])`;
        });

    }

    return code;
}

I don’t really know why but replace function with the regex wasn’t replacing all occurrences, and the params in the callback function were in the wrong order.

The way I am using LazyLoading is as follows (I am using Angular 7):

      {
        loadChildren: '../admin/admin.module#AdminModule',
        path: 'admin'
      },
      {
        loadChildren: '../user/user.module#UserModule',
        path: 'usr',
      },

Are you using Lazy Loading? Does it work for you?

I am very confused about the ‘replace’ function for strings, before (meteor 1.8) it was working fine.

Thanks!

dr7 · November 20, 2020, 10:12am

I solved it, just needed to put loadChildren in the last position:

      {
        path: 'admin',
        loadChildren: '../admin/admin.module#AdminModule',
      },
      {
        path: 'usr',
        loadChildren: '../user/user.module#UserModule',
      },