Angular Highcharts dynamic import produces no additional chunk

Issue

Im trying to lazy load Highcharts library with dynamic import in Angular CLI project. In another cases, it’s working perfectly fine and creates separate chunk. But in this scenario, while library is still included in main chunk. No additional chunk is created. Any idea what’s wrong?

Basic code example (working, but no additional js chunk):

import(/* webpackChunkName: "highcharts" */ 'highcharts/').then(
    (module) => {
        console.log(module.default):
    }
)

tc config

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2017",
        "module": "es2020",
        "lib": [
            "es2018",
            "dom"
        ],
        "paths": {
            "@app/*": [
                "src/app/*"
            ],
            "@environments/*": [
                "src/environments/*"
            ]
        }
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
    }
}

ng version

Angular CLI: 12.2.2
Node: 14.17.6
Package Manager: npm 6.14.15
OS: darwin x64

Angular: 12.2.2
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.2
@angular-devkit/build-angular   12.2.2
@angular-devkit/core            12.2.2
@angular-devkit/schematics      12.2.2
@schematics/angular             12.2.2
rxjs                            6.6.7
typescript                      4.3.5

Solution

I found the issue here: So to dynamic import we need to use custom build library without hardcoded imports inside (solution here).

Answered By – Denis Tatina

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0