This question is locked. New answers and comments are not allowed.
Hi
After a lot of efforts I finally managed to get my project to build with webpack in both android and IOS - npm run build-ios-bundle and npm run build-android-bundle both work and I am able to build the project successfully.
However when i try to run the project in IOS i get the following error:
Also the styles and the custom fonts that I have used to create the project are not applied and the styling breaks completely.
Please let me know what I can do or if you need more information.
Project uses the latest tns version 3.2.0.
Thanks
After a lot of efforts I finally managed to get my project to build with webpack in both android and IOS - npm run build-ios-bundle and npm run build-android-bundle both work and I am able to build the project successfully.
However when i try to run the project in IOS i get the following error:
Failed to create file at path '/var/containers/Bundle/Application/0B693BA3-00EC-4C21-90CF-14E92AA0D68C/questNewS.app/app/phone.css'Also the styles and the custom fonts that I have used to create the project are not applied and the styling breaks completely.
Please let me know what I can do or if you need more information.
Project uses the latest tns version 3.2.0.
Thanks
3 Answers, 1 is accepted
0
Anurag,
To reproduce the issue, I have created this test project using two custom fonts and a CSS file called phone.css located in the application root directory (app folder). However, with these settings the bundling is successful, and the projects run as expected (fonts and styles are applied).
Here are the steps -taken
- created fonts folder with the custom fonts
- created phone.css with the custom styles
- using the custom styles with relative path here and applying the styles here (note that you still need module.id to resolve the relative path in the component file)
- installing WebPack plugin
- bundling the app
The project is built and started on a device and the custom fonts and styles are applied as expected.
Please provide more information about how you are working with phone.css (the file in the error log).
If that file is created runtime make sure that you have included it in your webpack.config.js as described in this article section about adding extra assets. Another possible thing you might consider if the CSS file is created runtime is to use the documents folder instead of the currentApp folder on iOS as discussed here.
If none of the above suggestions are valid for your scenario, pelase send us more detailed information about your specific project settings (full error log, package.json and information about how phone.css is used in your project ). If sending the original project is not an option, perhaps you can try isolating the issue using your custom fonts and CSS files in a separate new test project.
Regards,
Nikolay Iliev
Progress Telerik
To reproduce the issue, I have created this test project using two custom fonts and a CSS file called phone.css located in the application root directory (app folder). However, with these settings the bundling is successful, and the projects run as expected (fonts and styles are applied).
Here are the steps -taken
- created fonts folder with the custom fonts
- created phone.css with the custom styles
- using the custom styles with relative path here and applying the styles here (note that you still need module.id to resolve the relative path in the component file)
- installing WebPack plugin
npm i nativescript-dev-webpack --save-devnpm installnpm run start-ios-bundleThe project is built and started on a device and the custom fonts and styles are applied as expected.
Please provide more information about how you are working with phone.css (the file in the error log).
If that file is created runtime make sure that you have included it in your webpack.config.js as described in this article section about adding extra assets. Another possible thing you might consider if the CSS file is created runtime is to use the documents folder instead of the currentApp folder on iOS as discussed here.
If none of the above suggestions are valid for your scenario, pelase send us more detailed information about your specific project settings (full error log, package.json and information about how phone.css is used in your project ). If sending the original project is not an option, perhaps you can try isolating the issue using your custom fonts and CSS files in a separate new test project.
Regards,
Nikolay Iliev
Progress Telerik
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
Anurag
Top achievements
Rank 1
Rank 1
answered on 05 Oct 2017, 07:37 AM
Thanks a lot Nikolay. Your detailed response helped - I was generating the css files at runtime and as suggested by you needed to add those extra assets as described in the article. Adding
{ from: "**/*.css" },to the Webpackcopy plugin got it working.
Happy to report a dramatic reduction (less than half)in the startup time for the app. Thanks for your awesome support. Now will try to get the android version working as well.
Regards
Anurag
0
Anurag,
Very glad to hear that the issue is now resolved!
Do let me know if you need further assistance on that or other matter.
Regards,
Nikolay Iliev
Progress Telerik
Very glad to hear that the issue is now resolved!
Do let me know if you need further assistance on that or other matter.
Regards,
Nikolay Iliev
Progress Telerik
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.