angular/cli 1.0.1 local JSON files

[brife]

Bug Report or Feature Request (mark with an x)

- [ X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.1
node: 6.10.0
os: darwin x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0
@angular/compiler: 4.1.0

Repro steps.

Up until @angular/cli 1.0.1, I was able to serve up test data from a local JSON file just by supplying the relative patch to the http component. For example, this.http.get(''/src/app/testdata/sopData.json'').map(...), would happily serve up the JSON from the root of the ng4 project. After upgrading to 1.0.1 this no longer works. I get a 404 on the http://localhost:4200/src/app/testdata/sopData.json request.

If I down grade to 1.0.0 it serves up the fine without error. I never really understood how not specifying a server translated to a straight file operation but I did take advantage of it. The fact that it doesn't work anymore doesn't feel like a bug, it feels more like a loophole that's been closed.

The log given by the failure.

GET http://localhost:4200/src/app/testdata/sopData.json 404 (Not Found)
scheduleTask
ZoneDelegate.scheduleTask
onScheduleTask
ZoneDelegate.scheduleTask
Zone.scheduleTask
Zone.scheduleMacroTask
(anonymous function)
send
(anonymous function)
Observable._trySubscribe
Observable.subscribe
MapOperator.call
Observable.subscribe
webpackJsonp.51.BaseSopPanelComponent.fetchData
webpackJsonp.51.BaseSopPanelComponent.ngOnInit
checkAndUpdateDirectiveInline
checkAndUpdateNodeInline
checkAndUpdateNode
debugCheckAndUpdateNode
debugCheckDirectivesFn
(anonymous function)
debugUpdateDirectives
checkAndUpdateView
callViewAction
execComponentViewsAction

Desired functionality.

Mention any other details that might be useful.

[avraampiperidis]

same here, getting 404 for local css files.
GET http://192.168.0.8:4200/assets/css/index.css [HTTP/1.1 404 Not Found 3ms]
Also.
The resource from “http://192.168.0.8:4200/assets/css/index.css” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

[filipesilva]

As far as I can tell, that's a 404, which means that the file just isn't there in builds. If you do ng build, is the file you're looking for there?

I'll have a look myself if you put up a simple repo showing this problem. I know that it seems an easy enough thing to reproduce, but there's a lot of different ways of doing it.

[rj93]

I'm also getting this error:

GET http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 1ms]
The resource from “http://localhost:4200/styles.css” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).[Learn More]

But when I change the style.css file, it is reflected in the browser.

Also getting the errors for zone.js, systemjs, and core-js

[Zvenigora]

From my understanding ng serve command works properly in version v1.0.0. However in case of version v1.0.1 and 1.0.2 the server returns 404. Please note that ng build works in all versions and the issue is related to the development server. Probably we already had the similar one (#5064). I prepared a sample repository having a component with an image and one JSON file. Please get the repo from https://github.com/Zvenigora/angular-cli-100-6158. I hope it helps.

[clydin]

@Zvenigora ng serve was actually working improperly prior to 1.0.1 and your example illustrates why. Your application will work via ng serve but fail after a build and deployment. Your assets are not properly defined in .angular-cli.json (or present in the preconfigured assets directory) so will not be copied to the output and will therefore be missing from the built output.

ng serve now more properly reflects the behavior of a deployment of the output of ng build. This also affected ng e2e which by default uses the ng serve functionality underneath; resulting in e2e tests passing when the app would actually fail when deployed.

[clydin]

@rj93 systemjs hasn't been used by the CLI for a very long time. Please ensure you are using the latest version and if your problem persists, please open a separate issue.

[filipesilva]

@Zvenigora as per what @clydin said, you need to add data to the assets array if you want it to be served. It was a bug that the bare content of your src/ dir were all being served in 1.0.0.

@brife your problem seems to be the same as @Zvenigora.

[brife]

Thank you, I assumed as much and have started developing with a proper node based http server that serves the test data during development

…

On Wed, May 10, 2017 at 6:55 AM, Filipe Silva ***@***.***> wrote: @Zvenigora <https://github.com/Zvenigora> as per what @clydin <https://github.com/clydin> said, you need to add data to the assets array if you want it to be served. It was a bug that the bare content of your src/ dir were all being served in 1.0.0. @brife <https://github.com/brife> your problem seems to be the same as @Zvenigora <https://github.com/Zvenigora>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6158 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGnMvQfrODYvcCJtlFXU3Pr_Wgh8KQvSks5r4ZeygaJpZM4NOmuc> .

[Zvenigora]

@clydin as per your recommendation, I created a new branch assets in my sample repository, moved image and json-file into assets folder and updated assets array. Now it works. Thank you.

[nikhil5467]

Hi I am also getting the same error .I am not able to load images and fetch json data from the assets folder under src.
Help me on how I have to update the assets array.
It is showing like this.
"assets": [
"assets",
"favicon.ico"
],