importmap with ssr

[its-dibo]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

when you add importmap in index.html, it can be work with ng serve without SSR, but with SSR it is totally ignored

index.html

  <script type="importmap">
    {
      imports:{
        "#mod":"/assets/module.js"
      }
    }
  </script>

neither Typescript (in build time) nor Nodejs (in runtime) can resolve this import path.
to fix the issue with Typescript we need to duplicate these importmaps in tsconfig

tsconfig.json

 "paths": {
      "#mod":["src/assets/module.js"]
    }

and to fix the issue with NodeJs, we may use imports[] in package.json

package.json

{
 imports:{
  "#mod": "./browser/assets/module.js"
}
}

also, we can mix this with a nodejs loader for importmap

the previous solution has many drawbacks:

• we need to duplicate our paths several times 9in index.html, tsconfig.json and package.json)
• we can't handle dynamic loading of importmap in package.json, which allows us to create importmap dynamically or use variables

index.html

<script type="module">
import {isCondition, value1, value1} from "./something.js"

let importMap = {
 "#mod": isCondition()?: value1: value2;
}
let script = document.createElement('script')
script.textContent = JSON.stringify(importMap)
document.head.appendChild(script)
</script>

package.json

{
 imports:{
   ????
 }
}

when we add this import to something like app.component.ts, is it compiled in a browser-like environment?

app.component.ts

import ... from "@angular/core"
import value from "#mod"

@Component({ ... })
export class AppComponent{}

Please provide a link to a minimal reproduction of the bug

https://github.com/its-dibo/issue-angular-ssr-importmap

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.6
Node: 20.10.0
Package Manager: yarn 1.22.22
OS: linux x64

Angular: 17.3.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.6
@angular-devkit/build-angular   17.3.6
@angular-devkit/core            17.3.6
@angular-devkit/schematics      17.3.6
@schematics/angular             17.3.6
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.4

[alan-agius4]

This is rather expected, the index.html obviously cannot be executed on the server since this is specifically designed for the browser. For it to work cross-platform this needs to be defined in the package.json where esbuild will bundle it and include it in the bundle.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}