Error: GET http://localhost:8100/build/css/app.ios.css

Ionic Framework ionic-v3
#1

Hi,

Anyone got that error after upgrading to 2.0.0-alpha.42 and ionic@beta?

Your system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic Version: 2.0.0-alpha.42
Ionic CLI Version: 2.0.0-beta.11
Ionic App Lib Version: 2.0.0-beta.5
OS:
Node Version: v4.1.2

I have the below when executing ionic serve:

GET http://localhost:8100/build/css/app.ios.css 
setupDom @ angular_js.ts:123
ionicProviders @ angular_js.ts:123
(anonymous function) @ angular_js.ts:123
DecorateConstructor @ angular_js.ts:123
decorate @ angular_js.ts:123
__decorate @ angular_js.ts:123
(anonymous function) @ angular_js.ts:123
(anonymous function) @ angular_js.ts:123
__webpack_require__ @ angular_js.ts:123
(anonymous function) @ angular_js.ts:123
__webpack_require__ @ angular_js.ts:123
(anonymous function) @ angular_js.ts:123
(anonymous function) @ angular_js.ts:123
#2

Forget to start gulp sass watch. Now, no more error, but white page. I will keep you posted

#3

The starters and conference app were updated back to using JS, can you compare against these to see what is different?

Also there are some steps to upgrading here:

https://github.com/driftyco/ionic2/blob/master/CHANGELOG.md#steps-to-upgrade-to-alpha42

#4

Hi @brandyshea,

Do you know why the master branch, the webpack.config.js has an alias for the ionic framework 'ionic': 'ionic-framework'and not the typescript branch?

Don’t big deal, but for a “junior” like me, I had to push my research to found out why my ionic/ionic was no more working. :smile:

Now, everything is on track with alpha 42! I need to adapt my code with new Angular and Ionic changes

Thanks

#5

We have to import it as ionic-framework for the typescript branch because of this issue:

#6

Does the “alias” thing that I did is still good?

In webpack.config.js

resolve: {
alias: {
  'ionic': 'ionic-framework',     <----- added to keep import {} 'ionic/ionic'
  'web-animations.min': 'ionic-framework/js/web-animations.min',
},
extensions: ["", ".js", ".ts"]
}
TS2307: Cannot find module 'ionic/ionic'
#7

That alias is for webpack, so it works when not doing typechecking: https://github.com/driftyco/ionic-conference-app/blob/master/webpack.config.js#L25. When not checking types, webpack resolves the file paths, gives them to awesome-typescript-loader, and then awesome-typescript-loader feeds the files to typescript one at a time, and all typescript has to do is transpile them and give them back (no path lookups from typescript necessary).

But when checking types, typescript has to look up the paths to the type definitions, and it only knows to look in exactly node_modules/name_of_package because aliasing isn’t supported yet (the issue that Brandy posted).

So that’s why the typescript branch has imports like ionic-framework/ionic and master has ionic/ionic with the alias in webpack.config.js. It’s only temporary until typescript 1.8 comes out with path mapping.