Port to ng 17

[thomaspeugeot]

Situation:

• port of an existing ng project works but a new projects does not work.

Analysis:

ng generate library testspecific --defaults=true --skip-install=true --no-standalone

instead of

          "builder": "@angular-devkit/build-angular:browser",
          "configurations": {
            "development": {
              "buildOptimizer": false,
              "extractLicenses": false,
              "namedChunks": true,
              "optimization": false,
              "sourceMap": true,
              "vendorChunk": true
            },

it is

          "builder": "@angular-devkit/build-angular:application",
          "configurations": {
            "development": {
              "extractLicenses": false,
              "optimization": false,
              "sourceMap": true
            },

and this make a problem within the tsconfig.json, it cannot import the proper material modules

       Failed to find file "/Users/thomaspeugeot/go/src/github.com/fullstack-lang/gong/test/ng/node_modules/@angular/platform-browser/animations/index.mjs"
        Failed to find file "/Users/thomaspeugeot/go/src/github.com/fullstack-lang/gong/test/ng/node_modules/@angular/platform-browser/animations/index.js"
        Failed to find file "/Users/thomaspeugeot/go/src/github.com/fullstack-lang/gong/test/ng/node_modules/@angular/platform-browser/animations/index.ts"
        Failed to find file "/Users/thomaspeugeot/go/src/github.com/fullstack-lang/gong/test/ng/node_modules/@angular/platform-browser/animations/index.tsx"

those files are in esm2022 directory where those files are located. In orther words, we meet Import Path Issues when builder is configured with application instead of browser

why ?

more precisely, when application is set, the builder search for esm2022 index while when browser, it does search correctly in fesm2022

chat gpt says

TypeScript Configuration: Your TypeScript configuration (in tsconfig.json) might need adjustments to correctly handle ES modules. In particular, the module and moduleResolution settings in compilerOptions play a crucial role in how modules are interpreted and resolved.

resolution, have ng generate library have "browser" configuration instead of "application"

[thomaspeugeot]

notice that the problem is only for the compilation of the application, not of the libraries. therefore, this is the ng new that is concerned, not ng generate.

thomaspeugeot@MacBook-Pro-de-Thomas test % ng new --help
ng new [name]

Creates a new Angular workspace.

Arguments:
  name  The name of the new workspace and initial project.                                                                         [string]

Options:
      --help                Shows a help message for this command in the console.                                                 [boolean]
      --interactive         Enable interactive input prompts.                                                     [boolean] [default: true]
      --dry-run             Run through and reports activity without writing out results.                        [boolean] [default: false]
      --defaults            Disable interactive input prompts for options with a default.                        [boolean] [default: false]
      --force               Force overwriting of existing files.                                                 [boolean] [default: false]
  -c, --collection          A collection of schematics to use in generating the initial application.                               [string]
      --commit              Initial git repository commit information.                                            [boolean] [default: true]
      --create-application  Create a new initial application project in the 'src' folder of the new workspace. When false, creates an empty
                            workspace with no initial application. You can then use the generate application command so that all
                            applications are created in the projects folder.                                      [boolean] [default: true]
      --directory           The directory name to create the workspace in.                                                         [string]
  -s, --inline-style        Include styles inline in the component TS file. By default, an external styles file is created and referenced
                            in the component TypeScript file.                                                                     [boolean]
  -t, --inline-template     Include template inline in the component TS file. By default, an external template file is created and
                            referenced in the component TypeScript file.                                                          [boolean]
      --minimal             Create a workspace without any testing frameworks. (Use for learning purposes only.) [boolean] [default: false]
      --new-project-root    The path where new projects will be created, relative to the new workspace root. [string] [default: "projects"]
      --package-manager     The package manager used to install dependencies.             [string] [choices: "npm", "yarn", "pnpm", "cnpm"]
  -p, --prefix              The prefix to apply to generated selectors for the initial project.                   [string] [default: "app"]
      --routing             Enable routing in the initial project.                                                                [boolean]
  -g, --skip-git            Do not initialize a git repository.                                                  [boolean] [default: false]
      --skip-install        Do not install dependency packages.                                                  [boolean] [default: false]
  -S, --skip-tests          Do not generate "spec.ts" test files for the new project.                            [boolean] [default: false]
      --ssr                 Creates an application with Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) enabled.
                                                                                                                                  [boolean]
      --standalone          Creates an application based upon the standalone API, without NgModules.              [boolean] [default: true]
      --strict              Creates a workspace with stricter type checking and stricter bundle budgets settings. This setting helps
                            improve maintainability and catch bugs ahead of time. For more information, see
                            https://angular.io/guide/strict-mode                                                  [boolean] [default: true]
      --style               The file extension or preprocessor to use for style files.    [string] [choices: "css", "scss", "sass", "less"]
      --view-encapsulation  The view encapsulation strategy to use in the initial project.
                                                                                        [string] [choices: "Emulated", "None", "ShadowDom"]

[thomaspeugeot]

An experiment ng17 can import a standalone component from outside that import a library

[thomaspeugeot]

bad direction yet.