Scully: cli: dist/static does not include assets if Angular project is output to dist/

[Splaktar]

🐞 Bug report

Description

In dist/static, I have the following

• index.html
• assets
  
  
  
  • scully-routes.json
  
  

My webmanifest.manifest, favicon.ico, sitemap.xml, robots.txt, etc aren't available on my static site. It seems like all of this stuff is configured in the angular.json and part of my build in dist/, so it seems like Scully should copy that over for the static site? Or is there some other step or approach that I'm missing?

🔬 Minimal Reproduction

1. Generate a new app with the CLI
2. Follow the Scully docs
3. Check to see if your favicon.ico loads on your static site and that it's in dist/static/favicon.ico

💻Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.6
Node: 12.13.0
OS: darwin x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.6
@angular-devkit/build-angular     0.900.0-rc.6
@angular-devkit/build-optimizer   0.900.0-rc.6
@angular-devkit/build-webpack     0.900.0-rc.6
@angular-devkit/core              9.0.0-rc.6
@angular-devkit/schematics        9.0.0-rc.6
@angular/cdk                      9.0.0-rc.5
@angular/fire                     5.2.3
@angular/material                 9.0.0-rc.5
@ngtools/webpack                  9.0.0-rc.6
@schematics/angular               9.0.0-rc.6
@schematics/update                0.900.0-rc.6
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

Scully Version:

    "@scullyio/init": "0.0.8",
    "@scullyio/ng-lib": "latest",
    "@scullyio/scully": "latest",

🔥 Exception or Error

GET http://localhost:5000/firebase-performance-es2015.js net::ERR_ABORTED 404 (Not Found)
(index):2790 GET http://localhost:5000/runtime-es2015.js net::ERR_ABORTED 404 (Not Found)
4(index):2790 GET http://localhost:5000/polyfills-es2015.js net::ERR_ABORTED 404 (Not Found)
16(index):2762 GET http://localhost:5000/assets/DevIntentLogo.png 404 (Not Found)
(index):2790 GET http://localhost:5000/assets/material-design-icons/MaterialIcons-Regular.woff2 net::ERR_ABORTED 404 (Not Found)
(index):2792 GET http://localhost:5000/assets/material-design-icons/MaterialIcons-Regular.woff net::ERR_ABORTED 404 (Not Found)
(index):1 GET http://localhost:5000/assets/material-design-icons/MaterialIcons-Regular.ttf net::ERR_ABORTED 404 (Not Found)
manifest.webmanifest:1 GET http://localhost:5000/manifest.webmanifest 404 (Not Found)
manifest.webmanifest:1 Manifest: Line: 1, column: 1, Syntax error.
favicon.ico:1 GET http://localhost:5000/favicon.ico 404 (Not Found)
favicon-32x32.png:1 GET http://localhost:5000/assets/favicon-32x32.png 404 (Not Found)
favicon-16x16.png:1 GET http://localhost:5000/assets/favicon-16x16.png 404 (Not Found)

[IxquitilisSaid]

Do you have a repo we can use for reproducing/debugging that?

[Splaktar]

Not at this time. I can try to set one up in the next few days. Are you seeing the assets being properly available in your app?

[jorgeucano]

@Splaktar thanks for found the issue! ... @SanderElias can you check this?

[SanderElias]

@Splaktar The first step we take in Scully, is to copy over all the files in the app's dist folder, including the assets that are there. I just double-checked, and it is doing that for me

@jorgeucano Can you check my commit a38f8107b393b797131c48f446ff545a05354031 and try it on your windows & mac? after running scully, the herodevs logo should be in static/assets/images?

[jorgeucano]

in mac i create 2 builds, one with image and other with txt and work

[jorgeucano]

I test the same in windows and work

@Splaktar can you test again with the lastest version?

[Splaktar]

Yeah, I tested after updating to 0.0.9 and I'm still seeing this issue. One difference that I notice is that you have the following output:

😄 new Angular build imported

But I don't:

scully

Cleaned up /Users/splaktar/Git/.../dist/static/ folder.
started servers in background
servers available
Finding all routes in application.
Pull in data to create additional routes.
Route list created in files:
      src/assets/scully-routes.json
      /Users/splaktar/Git/.../dist/static/assets/scully-routes.json
Route "" rendered into file: "/Users/splaktar/Git/.../dist/static/index.html"
Route list created in files:
      src/assets/scully-routes.json
      /Users/splaktar/Git/.../dist/static/assets/scully-routes.json

Generating took 6.11 seconds for 1 pages:
  That is 0.17 pages per second,
  or 6115 milliseconds for each page.

[Splaktar]

$ ls dist/static/assets
scully-routes.json

$ ls dist/assets
AngularJS_square_588x588.png            Maps_icon.png                           angular-cli.svg                         browserconfig.xml                       material-design-512x512.png             safari-pinned-tab.svg
Logo.png                       android-chrome-192x192.png              [email protected]                 favicon-16x16.png                       material-design-icons/                   scully-routes.json
site_preview.png              android-chrome-512x512.png              angular-logo.png                        favicon-32x32.png                       mstile-150x150.png                      typescript.svg
Firebase_128px-logo.png                 android-icon-128px.png                  angular-material.svg                    font-awesome/                            nodejs-icon-128.png
Google-Chrome-icon_256x256.png          angular-cdk.svg                         angular-nativescript-icon.png           google-cloud-logo-icon-128px.png        nx-logo-blue-gradient-128x128.png

[Splaktar]

I have been testing in another repo (https://github.com/Splaktar/test-blog) and I haven't been able to reproduce the issue so far.

The only difference is that my app puts its output in dist/ and in my new repo the output goes in dist/test-blog. So it looks like Scully may not be able to handle the older style Angular CLI project format.

[jorgeucano]

ok, that's really important!! thanks @Splaktar !!
@SanderElias Can scully check this?

[Splaktar]

OK, I changed my project to output to dist/web instead of dist/ in angular.json and I now get the 😄 new Angular build imported and my assets are all properly copied.

[Splaktar]

@SanderElias Scully should be able to check the architect->build->options->outputPath field in angular.json in order to find out where the application is output during the build.

[SanderElias]

Yes, it is already doing that. But somehow it's not always pulling in all
assets, while it pull sin the rest of the app. Looking into that

Op vr 20 dec. 2019 om 17:02 schreef Michael Prentice <
[email protected]>:

@SanderElias https://github.com/SanderElias Scully should be able to
check the build->options->outputPath field in angular.json in order to
find out where the application is output during the build.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/scullyio/scully/issues/56?email_source=notifications&email_token=AAJQ6OYKX2ZMSY57BREEMATQZTUADA5CNFSM4J452EY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHNJ4DI#issuecomment-567975437,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAJQ6O2NPFYPEYYNNGRVCJDQZTUADANCNFSM4J452EYQ
.

[ahmetuysal]

OK, I changed my project to output to dist/web instead of dist/ in angular.json and I now get the 😄 new Angular build imported and my assets are all properly copied.

I also have the same issue and this workaround worked.

[aaronfrost]

@SanderElias is going to fix this. @SanderElias do you have a timeline?

[SanderElias]

I looked into this.
What happens is a race condition if the CLI outputs to the dist root folder.
As Scully by default uses a subfolder of dist, most operating systems get confused.
There are 2 solutions.

1. make sure the CLI uses a subfolder in dist. (As discussed above)
2. move the Scully generated files outside of the dist
   I have a serious issue with option 2, as I don't want distribution artifacts to live outside of the dist folder.
   That leaves us with option 1. Which is what we already have.
   We will put some emphasis on this in the documentation. As there is nothing actionable on this, I'm closing this issue.

[Splaktar]

@Villanuevand Perhaps we should leave this open until the docs for it can be updated? I don't see this documented anywhere just yet.