additional_root_paths in ts_devserver should contain workspace name

[SiddAjmera]

🐞 bug report

Affected Package

This issue is caused by package @angular/bazel

Is this a regression?

No

Description

Creating a regular Angular CLI Project with Routing Enabled and SCSS Selected for Styles doesn't serve up after adding @angular/bazel

🔬 Minimal Reproduction

1. npm i -g @angular/cli@next
2. ng new bazel-angular
3. ng add @angular/bazel@next
4. ng serve

🔥 Exception or Error

🌍 Your Environment

Angular Version:

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


Angular CLI: 9.0.0-rc.12
Node: 12.11.1
OS: win32 x64

Angular: 9.0.0-rc.14
... animations, bazel, common, compiler, compiler-cli, core
... forms, language-service, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.0-rc.12
@angular-devkit/core         9.0.0-rc.12
@angular-devkit/schematics   9.0.0-rc.12
@angular/cli                 9.0.0-rc.12
@bazel/bazel                 2.0.0
@bazel/bazel-win32_x64       2.0.0
@bazel/hide-bazel-files      1.2.4
@bazel/ibazel                v0.10.3
@bazel/karma                 1.2.2
@bazel/protractor            1.2.2
@bazel/rollup                1.2.2
@bazel/terser                1.2.2
@bazel/typescript            1.2.2
@schematics/angular          9.0.0-rc.12
@schematics/update           0.900.0-rc.12
rxjs                         6.5.4
typescript                   3.7.5

Anything else relevant?

This is probably related to #35114

I'm using a Windows Machine

[kyliau]

It looks like ng add is not honoring the @next version specifier.

In this case, after creating a new project by running ng new, the following command

$ yarn ng add @angular/bazel@next
yarn run v1.21.1
$ ng add @angular/bazel@next
Installing packages for tooling via yarn.
Installed packages for tooling via yarn.
CREATE e2e/protractor.on-prepare.js (1183 bytes)
CREATE src/initialize_testbed.ts (435 bytes)
CREATE src/main.dev.ts (150 bytes)
CREATE src/main.prod.ts (214 bytes)
CREATE src/rollup.config.js (254 bytes)
CREATE src/rxjs_shims.js (1262 bytes)
CREATE angular.json.bak (3757 bytes)
UPDATE package.json (1957 bytes)
UPDATE angular.json (2081 bytes)
✔ Packages installed successfully.
Done in 25.14s.

installed version 8 instead of version 9 rc.

This is verified by

$ yarn info @angular/bazel version
yarn info v1.21.1
8.2.14
Done in 0.18s.

@alan-agius4 do you know if ng add supports specifying the version via @next?

As a short term workaround, users could run

yarn add --dev @angular/bazel@next

before invoking ng add @angular/bazel.

[alan-agius4]

@kyliau yes, ng add does support tag specifier.

It Important to note is that if the package is already installed (any version) it will skip the installation.

[alan-agius4]

@kyliau I actually think the issue might be related to:

angular/packages/bazel/src/schematics/ng-add/index.ts

Line 40 in 1a23c79

['@angular/bazel', angularCore.version],

I’ll try to investigate this issue tomorrow.

[kyliau]

In this case, I don't think the package is already installed, because when ng add is invoked, it says

Installing packages for tooling via yarn.
Installed packages for tooling via yarn.

Is there a way to turn on verbose logging so we could see which packages are actually installed?

It's also worth mentioning that if @angular/bazel has the same version as @angular/core, then it should be v9 rc.

[kyliau]

@angular/bazel is actually installed twice.

1. First, it has to download via ng add to fetch the schematics. The version that the CLI downloads should be the one specified by @next.
2. Then, the schematics get executed and package.json is updated (among other operations). This adds @angular/bazel to package.json that has the same version as @angular/core.
3. Lastly, npm install installs @angular/bazel again since package.json has changed.

[alan-agius4]

You can set the following environment variable NG_DEBUG to true or 1 to enable verbose logging.

[kyliau]

Sorry, my bad! I was using yarn info to check the version. It should be yarn list 😓

[alan-agius4]

Sorry, my bad! I was using yarn info to check the version. It should be yarn list 😓

You can also use ng version😜

[kyliau]

Ok, I tried the exact setup (verified by comparing ng version), but was not able to reproduce the problem. Maybe this is a Windows issue, we'll need to investigate further.

[alan-agius4]

I had a bit of a look at this and I managed to replicate it on Windows. The problem seems to be the the ts_devserver is serving an different index file than the one generated by the asset_injected_index_html target.

The output of the above rule in _/index.html is the following;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>BazelAngular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="/global_stylesheet.css?v=1580888819374">
</head>

<body>
  <app-root></app-root>


  <script src="/npm/node_modules/zone.js/dist/zone.min.js?v=1580888819374"></script>
  <script src="/bundle.min.js?v=1580888819374"></script>
</body>

</html>

However the devserver is serving the below;

<!doctype html>
<html>
    <head>
        <title>ts_devserver (C:/../gi6irfiu/execroot/project/bazel-out/x64_windows-fastbuild/bin/src/devserver_launcher.MF)</title>
    </head>
    <body>
        <script src="/bundle.min.js"></script>
    </body>
</html>

[SiddAjmera]

@kyliau , thanks for the workaround.

I tried it out. But it didn't work either. :(

[alan-agius4]

Did you run ng serve --leaveBazelFilesOnDisk and amended the build file manually?

[SiddAjmera]

Sorry about that. I just had a look at alan-agius4@9071899

So accordingly, I manually updated the src/BUILD.bazel file where I replaced:
additional_root_paths = ["src/_"],
with:
additional_root_paths = ["project/src/_"],

in the devserver target, and it started to work just fine. :)

Thank you soo much.

Another thing that I noticed is, the devserver is up and running. But it doesn't detect any changes that I make to the source to update the App.

So I have to break the server every time I make a change and then run ng serve again to make the served app update. Not sure if this is a Windows-only issue.

But again, thanks a lot for the help. This worked :)

[alan-agius4]

So I have to break the server every time I make a change and then run ng serve again to make the served app update. Not sure if this is a Windows-only issue.

Yes it is a windows only issue and I have reported it here: bazelbuild/bazel-watcher#342

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