Issue: Can't build/run a basic standalone Angular app SSR (or not)

[tom-laplace]

Command

build, serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I can't build/run a basic project using Angular 17. Even just after initialization.

Minimal Reproduction

• ng new crash-test --standalone --ssr OR ng new crash-test --standalone
• npm i
• npm run build OR npm run start

Exception or Error

src/app/app.component.ts:1:26:
      1 │ import { Component } from '@angular/core';
        ╵                           ~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@angular/core" here because it's not listed as a dependency of this package:

    ../../../../.pnp.cjs:38:33:
      38 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@angular/core" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@angular/common"

    src/app/app.component.ts:2:29:
      2 │ import { CommonModule } from '@angular/common';
        ╵                              ~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@angular/common" here because it's not listed as a dependency of this package:

    ../../../../.pnp.cjs:38:33:
      38 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@angular/common" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "@angular/router"

    src/app/app.component.ts:3:29:
      3 │ import { RouterOutlet } from '@angular/router';
        ╵                              ~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@angular/router" here because it's not listed as a dependency of this package:

    ../../../../.pnp.cjs:38:33:
      38 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@angular/router" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "@angular/router"

    src/app/app.config.ts:1:30:
      1 │ import { provideRouter } from '@angular/router';
        ╵                               ~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@angular/router" here because it's not listed as a dependency of this package:

    ../../../../.pnp.cjs:38:33:
      38 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@angular/router" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "@angular/common/http"

    src/app/app.config.ts:3:34:
      3 │ import { provideHttpClient } from '@angular/common/http';
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@angular/common" here because it's not listed as a dependency of this package:

    ../../../../.pnp.cjs:38:33:
      38 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@angular/common/http" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "@angular/platform-browser"

    src/main.ts:1:37:
      1 │ import { bootstrapApplication } from '@angular/platform-browser';
        ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@angular/platform-browser" here because it's not listed as a dependency of this package:

    ../../../../.pnp.cjs:38:33:
      38 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@angular/platform-browser" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "zone.js"

    angular:polyfills:angular:polyfills:1:7:
      1 │ import 'zone.js';
        ╵        ~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "zone.js" here because it's not listed as a dependency of this package:

    ../../../../.pnp.cjs:38:33:
      38 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "zone.js" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

Your Environment

Angular CLI: 17.0.0
Node: 20.9.0
Package Manager: npm 10.1.0
OS: linux x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1700.0
@angular-devkit/core         17.0.0
@angular-devkit/schematics   17.0.0
@angular/cli                 17.0.0
@schematics/angular          17.0.0

Anything else relevant?

No response

[alan-agius4]

I am a bit confused, are you using Yarn PNP or NPM? In the repro steps you mention npm i but the errors suggest that you are using Yarn PNP

[tom-laplace]

I am a bit confused, are you using Yarn PNP or NPM? In the repro steps you mention npm i but the errors suggest that you are using Yarn PNP

Yup that confuse me too as I’m using NPM and not Yarn

[alan-agius4]

@tom-laplace, I am unable to replicate this using the steps provided. Based on the error, It does look like you might have some Yarn PNP config up in the file system.

[tom-laplace]

@tom-laplace, I am unable to replicate this using the steps provided. Based on the error, It does look like you might have some Yarn PNP config up in the file system.

Just erased all the installation of Yarn on my machine, still don't work.

The strangiest is that I created a project yesterday, worked perfectly and I can still run it.

[Tony133]

Hi all,
Today while I was testing the new version of Angular v17.x I also encountered a similar problem (see screenshot):

checking the hidden files in the root in my computer I noticed that there was a pnp.cjs file which I believe is generated there when I installed packages globally, pnpm or libraries for the various projects I am working on, and deleting this file the angular application works correctly and no longer gives me any errors.

The angular application was created by cli, to create a new project.

If you need it, I'll attach the file I deleted, I'll rewrite it here, it's called pnp.cjs

Note: the pnp.cjs file is a hidden file , you should find it as .pnp.cjs

I hope I was helpful 🙂

[csisy]

Related issue but with a totally different error.

• Just updated the cli to 17
• Created a new application (non-SSR here)
• Tried to build it.

- Building...X [ERROR] File 'src\main.ts' is missing from the TypeScript compilation. [plugin angular-compiler]
  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

Application bundle generation failed. [2.280 seconds]

>npx ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 17.0.0
Node: 18.15.0
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 17.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0
@angular-devkit/build-angular   17.0.0
@angular-devkit/core            17.0.0
@angular-devkit/schematics      17.0.0
@angular/cli                    17.0.0
@schematics/angular             17.0.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

tsconfig.app.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

[csisy-bt4w]

It seems someone else opened a similar issue but it was closed for whatever reason: #26379

[alan-agius4]

Based on the comments above and the existence of a pnp.cjs file this is working as expected.

See: evanw/esbuild#3338 and evanw/esbuild#2495 (comment)

@csisy and @csisy-btw you issues are unrelated to this, so please open a new issue together with a minimal reproduction.

[Truenotierra73]

Hi all, Today while I was testing the new version of Angular v17.x I also encountered a similar problem (see screenshot):

checking the hidden files in the root in my computer I noticed that there was a `pnp.cjs` file which I believe is generated there when I installed packages globally, pnpm or libraries for the various projects I am working on, and deleting this file the angular application works correctly and no longer gives me any errors.

The angular application was created by cli, to create a new project.

If you need it, I'll attach the file I deleted, I'll rewrite it here, it's called pnp.cjs

I hope I was helpful 🙂

It's correct. By deleting this file, the project is compiled again.

[kennethkeim]

Should this be picking up .pnp.cjs in the root of my computer as well? I removed it there and it's working now.

[alan-agius4]

Should this be picking up .pnp.cjs in the root of my computer as well? I removed it there and it's working now.

Yes, please see the above linked esbuild issues.

[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.}