Bazel Angular example dev serve doesn't work on windows #1604

alan-agius4 · 2020-02-05T10:27:09Z

🐞 bug report

Is this a regression?

Yes

Description

https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular doesn't work on Windows

Run ng serve, not that ng serve --prod has different kind of errors due to https://bazelbuild.slack.com/archives/GMADCN4ES/p1580896704106300

🔬 Minimal Reproduction

Run ng serve in https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular using Windows as OS.

🔥 Exception or Error

In browser console



l108498/:1 Refused to apply style from 'http://l108498:5432/bazel-out/x64_windows-fastbuild/bin/src/styles.css?v=1580898021431' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
l108498/:1 Refused to apply style from 'http://l108498:5432/external/npm/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css?v=1580898021431' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
zone.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
ts_scripts.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
l108498/:1 Refused to apply style from 'http://l108498:5432/bazel-out/x64_windows-fastbuild/bin/src/styles.css?v=1580898021431' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
l108498/:1 Refused to apply style from 'http://l108498:5432/external/npm/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css?v=1580898021431' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

🌍 Your Environment

Operating System: Windows
Output of bazel version:

  
Build label: 2.0.0
Build target: bazel-out/x64_windows-opt/bin/src/main/java/com/google/devtools/build/lib/bazel/BazelServer_deploy.jar
Build time: Thu Dec 19 12:31:16 2019 (1576758676)
Build timestamp: 1576758676
Build timestamp as int: 1576758676

Anything else relevant?

It seems that most of the regressions comes from html-insert-assets package were with 0.4.0 most of the above errors have been introduced. However with 0.2.0 there is still the below error;

2l108498/:12 GET http://l108498:5432/_C:/Program%20Files/Git/ts_scripts.js?v=1580897804942 net::ERR_ABORTED 404 (Not Found)

The paths for ts_scripts seems to be none-the-less wrong

html-insert-assets 0.2.0

<!DOCTYPE html><html><head>
    <title>Angular Bazel Example</title>
    <base href="/example">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="/styles.css?v=1580897804942"><link rel="stylesheet" href="/npm/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css?v=1580897804942"></head>
  <body>
    <!-- The Angular application will be bootstrapped into this element. -->
    <app-component></app-component>    
  

<script src="/npm/node_modules/zone.js/dist/zone.min.js?v=1580897804942"></script><script src="/_C:/Program Files/Git/ts_scripts.js?v=1580897804942"></script></body></html>

html-insert-assets 0.4.0

<!DOCTYPE html><html><head>
    <title>Angular Bazel Example</title>
    <base href="/example">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="./bazel-out\x64_windows-fastbuild\bin\src\styles.css?v=1580894103844"><link rel="stylesheet" href="./external\npm\node_modules\@angular\material\prebuilt-themes\deeppurple-amber.css?v=1580894103844"></head>
  <body>
    <!-- The Angular application will be bootstrapped into this element. -->
    <app-component></app-component>    
  

<script src="./external\npm\node_modules\zone.js\dist\zone.min.js?v=1580894103844"></script><script src="./_C:\Program Files\Git\ts_scripts.js?v=1580894103844"></script></body></html>

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2020-02-05T10:27:33Z

//cc @gregmagolan as I mentioned this offline yesterday.

See: bazel-contrib/rules_nodejs#1604

alan-agius4 · 2020-02-05T11:08:03Z

Okay, so most errors excluded 2l108498/:12 GET http://l108498:5432/_C:/Program%20Files/Git/ts_scripts.js?v=1580897804942 net::ERR_ABORTED 404 (Not Found) should be fixed by jbedard/html-insert-assets#6

See: bazel-contrib/rules_nodejs#1604

alan-agius4 · 2020-02-05T12:09:20Z

Seems like there is something wrong when resolving paths; (Notice the last item)

[  'C:\\users\\alag\\_bazel_alag\\rj2iva3m\\external\\build_bazel_rules_nodejs\\internal\\node\\_node_bin\\node',
  'C:\\users\\alag\\_bazel_alag\\rj2iva3m\\execroot\\examples_angular\\node_modules\\html-insert-assets\\src\\main.js',
  '--html=src/example/index.html',
  '--out=bazel-out/x64_windows-fastbuild/bin/src/index.html',
  '--roots=.',
  'bazel-out/x64_windows-fastbuild/bin/src',
  '--assets',
  'bazel-out/x64_windows-fastbuild/bin/src/styles.css',
  'external/npm/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css',
  'external/npm/node_modules/zone.js/dist/zone.min.js',
  '_C:/Program Files/Git/ts_scripts.js'
]

In Windows `_/ts_scripts.js` will be expanded to `C:/Program Files/Git/ts_scripts.js`. ``` [ 'C:\\users\\alag\\_bazel_alag\\rj2iva3m\\external\\build_bazel_rules_nodejs\\internal\\node\\_node_bin\\node', 'C:\\users\\alag\\_bazel_alag\\rj2iva3m\\execroot\\examples_angular\\node_modules\\html-insert-assets\\src\\main.js', '--html=src/example/index.html', '--out=bazel-out/x64_windows-fastbuild/bin/src/index.html', '--roots=.', 'bazel-out/x64_windows-fastbuild/bin/src', '--assets', 'bazel-out/x64_windows-fastbuild/bin/src/styles.css', 'external/npm/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css', 'external/npm/node_modules/zone.js/dist/zone.min.js', './_C:/Program Files/Git/ts_scripts.js' ] ``` This seems like some character escaping issue but in general escaping is hell and this is a more straightforward fix. Partially addresses: #1604

See: bazel-contrib/rules_nodejs#1604

`html-insert-assets` version `0.5.0` in includes the following fix: jbedard/html-insert-assets#6 which is needed for better Windows support. Closes bazel-contrib#1604

In Windows `_/ts_scripts.js` will be expanded to `C:/Program Files/Git/ts_scripts.js`. ``` [ 'C:\\users\\alag\\_bazel_alag\\rj2iva3m\\external\\build_bazel_rules_nodejs\\internal\\node\\_node_bin\\node', 'C:\\users\\alag\\_bazel_alag\\rj2iva3m\\execroot\\examples_angular\\node_modules\\html-insert-assets\\src\\main.js', '--html=src/example/index.html', '--out=bazel-out/x64_windows-fastbuild/bin/src/index.html', '--roots=.', 'bazel-out/x64_windows-fastbuild/bin/src', '--assets', 'bazel-out/x64_windows-fastbuild/bin/src/styles.css', 'external/npm/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css', 'external/npm/node_modules/zone.js/dist/zone.min.js', './_C:/Program Files/Git/ts_scripts.js' ] ``` This seems like some character escaping issue but in general escaping is hell and this is a more straightforward fix. Partially addresses: #1604

`html-insert-assets` version `0.5.0` in includes the following fix: jbedard/html-insert-assets#6 which is needed for better Windows support. Closes bazel-contrib#1604

`html-insert-assets` version `0.5.0` in includes the following fix: jbedard/html-insert-assets#6 which is needed for better Windows support. Closes #1604

ubergeoff · 2021-03-09T10:05:24Z

Still seems broken on windows..?

Current version is using:

"html-insert-assets": "^0.6.0",

Everything (ibazel) seems to "serve" fine... but navigating to the provided URL "http://DESKTOP-4ID5F8I:5432/" - in my case is "blank"...

alan-agius4 · 2021-03-09T10:24:03Z

@ubergeoff, unfortunately I no longer have a Windows machine to check why this has regressed. Maybe someone else on the team can take a look

//cc @alexeagle.

ubergeoff · 2021-04-01T20:18:20Z

Anyone else - able to get this Angular example to run on Windows..?

alan-agius4 added a commit to alan-agius4/html-insert-assets that referenced this issue Feb 5, 2020

fix: support Windows paths

cc00501

See: bazel-contrib/rules_nodejs#1604

alan-agius4 mentioned this issue Feb 5, 2020

fix: support Windows paths jbedard/html-insert-assets#6

Merged

alan-agius4 added a commit to alan-agius4/html-insert-assets that referenced this issue Feb 5, 2020

fix: support Windows paths

b838d12

See: bazel-contrib/rules_nodejs#1604

alan-agius4 mentioned this issue Feb 5, 2020

fix: angular example ts_scripts path in Windows #1605

Merged

alan-agius4 changed the title ~~Bazel Angular example doesn't work on windows~~ Bazel Angular example dev serve doesn't work on windows Feb 5, 2020

alan-agius4 added examples labels Feb 5, 2020

alan-agius4 self-assigned this Feb 5, 2020

jbedard pushed a commit to jbedard/html-insert-assets that referenced this issue Feb 5, 2020

fix: support Windows paths (#6)

1791efe

See: bazel-contrib/rules_nodejs#1604

jbedard pushed a commit to jbedard/html-insert-assets that referenced this issue Feb 5, 2020

fix(*): support Windows paths (#6)

ecf283c

See: bazel-contrib/rules_nodejs#1604

alan-agius4 mentioned this issue Feb 5, 2020

fix: html script injection is broken on windows #1610

Merged

alexeagle closed this as completed in #1610 Feb 5, 2020

alexeagle pushed a commit that referenced this issue Feb 5, 2020

fix: html script injection is broken on windows

7f7a45b

`html-insert-assets` version `0.5.0` in includes the following fix: jbedard/html-insert-assets#6 which is needed for better Windows support. Closes #1604

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bazel Angular example dev serve doesn't work on windows #1604

Bazel Angular example dev serve doesn't work on windows #1604

alan-agius4 commented Feb 5, 2020

alan-agius4 commented Feb 5, 2020

alan-agius4 commented Feb 5, 2020

alan-agius4 commented Feb 5, 2020

ubergeoff commented Mar 9, 2021 •

edited

Loading

alan-agius4 commented Mar 9, 2021

ubergeoff commented Apr 1, 2021

Bazel Angular example dev serve doesn't work on windows #1604

Bazel Angular example dev serve doesn't work on windows #1604

Comments

alan-agius4 commented Feb 5, 2020

🐞 bug report

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

alan-agius4 commented Feb 5, 2020

alan-agius4 commented Feb 5, 2020

alan-agius4 commented Feb 5, 2020

ubergeoff commented Mar 9, 2021 • edited Loading

alan-agius4 commented Mar 9, 2021

ubergeoff commented Apr 1, 2021

ubergeoff commented Mar 9, 2021 •

edited

Loading