I used angular-cli#1.0.0-beta.10 before and now I updated to angular-cli#webpack beta.11. After a lot of custom changes I got it to work.
The only thing is that now I can not debug my angular app using webstorm and chrome debugger because I don't get any ts files using ng serve. With angular-cli#1.0.0-beta.10 it was very easy to debug my app using the Jetbrains Plugin.
How can I debug my angular app with Webstorm and the Chrome Debugger using ng serve?
How to debug with angular/cli
The new angular/cli version uses webpack which does not compile the ts files to an local directory like dist before (till beta 1.0.0-beta.10). Now it uses some memory like approach.
But you can find the ts Files in the Chrome Developer Tools in the "Sources" tab.
(new) Solution for angular/cli#1.0.0-beta.26 and newer
Notice: This solution was tested with version 1.0.0-beta.26 and 1.2.1
Notice: In this example I used port 5321 instead of 4200. Just use your port.
Debugging with Chrome Developer Tools
While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":
Debugging Angular 2 App with angular/cli using JetBrains IDE
Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following:
Set your Remote URL Path of your project directory to webpack://.
Set your Remote URL Path of your src directory to webpack://./src
(old) Solution for angular-cli#1.0.0-beta.10 - .14
Debugging with Chrome Developer Tools
While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":
Debugging Angular 2 App with angular-cli#webpack using JetBrains IDE
Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following: Set your Remote URL Path of your project directory to
webpack:////Users/...FULL_PATH.. //on Mac OSX
or
webpack:///C:/...FULL_PATH.. //example on Windows
Notice: on Windows you only need 3 slashes, on Mac you need 4 slashes
after "webpack:"
You can also check your Path by going to http://localhost:4200/main.map and search for any ".ts" File. You can easily copy the path of this file and paste it to your IDE Configuration Dialog.
EDIT: Perhaps you need to map the path adding "/src" to your src folder too. Thanks #born2net
Have Fun.
ok got it working,
you need to map both root and src.
see here:
hopefully it helps someone,
let me add that sometimes the debugger will miss your breakpoint so add alert('foo') or ;debugger code just before your breakpoint.
tx
will be adding and convering jspm projects to new cli
Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source# https://github.com/born2net/ng2Boilerplate
Regards,
Sean
2017 answer for:
angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64
If you are having problems with this, go to your Scripts tab in your debugger and try and align your URL mappings according to what you see.
None of the other answers helped me because my version of angular-cli mapped things a different way.
What finally helped me was to add an additional / (forward slash) after webpack:///, so that there are 4 instead of 3. By default there were 3 forward slashes
The remote URL points to the same parent directory as on the left except the webpack://// schema.
Also you don't need to enable the TS compiler as often suggested.
MacOS
Angular-CLI 2.4.1
WebStorm 2016.3
You can use Augury which is a dev tool extension for the web browsers in order to debug angular applications.
Here is the link you could install:
https://augury.angular.io/
This tool is very useful in viewing the hierarchy of your routing in your application, Module and Components hierarchy and the Dependency Injection overview on each component.
Here is an Inject Graph of my project which illustrate my above explanation:
Please note that the above solutions do NOT let you set breakpoints in the html files of angular components when using IntelliJ. You can only do this in Chrome. I don't understand why this is not possible in IntelliJ.
Related
I'm stumped. I cannot understand the getbootstrap.com Getting Started info. I'm running on Windows 7 Pro. I would like to use Pingendo - which I'm new to - to create my website.
I downloaded the distribution version bootstrap-3.3.7-dist.zip (pre-compiled) and unzipped it. Then I came to the MaxCDN code. Where do I put that code??
For the source code version, I see references to things I don't know about: Bower, npm, Composer, Grunt, Less, and SASS. All these appear to be Linux based tools - from the command lines shown. How does one accomplish the same thing under Windows without installing yet more tools? Do I even need to compile this code to use the greater features?
You can either add the downloaded bootstrap css and js files to your project and reference them or you can just use the cdn which is just the same files hosted on a server. You do now have to know about any of those to get started with Bootstrap. They are just additional ways to install it, and different preprocessors that you can leverage.
I'm new to using Aptana Studio 3 with dojo 1.10.4.
I'd like to have code completition, so I've installed the relative ruble from github (https://github.com/ben8p/dojo.ruble), by accessing the menù "command -> bundle development -> install bundle".
The download of the ruble was ok, but I don't still be able to have the code completition on js files.
Can anyone help me?
Very thanks.
Fabio.
I created this parser tool for dojo on version 1.7 back in the days;
https://github.com/mschr/dojos/blob/master/README
https://github.com/mschr/dojos/tree/master/util/docscripts
You may drop this file into your project and you will probably have most functionality as it is in the 1.1X today, or fixup the php generator to work with the current dojo.build docparser
https://raw.githubusercontent.com/mschr/dojos/master/util/docscripts/jsdoc/api.hdr.js
Apple's iOS 8 breaks certain tap functionality in versions of dojo prior to 1.9.4 (see Xpages mobile controls not working in iOS8
The current version of Dojo in Domino 9.0.1 FP2 is 1.9.2 but that does not fix the issue. You have to use at least 1.9.4.
I have downloaded 1.9.4 and placed it in the correct folder on our test server. But I cannot get things to work. I changed the folder name of dojo 1.9.4 to 1.4.0 as I only want to use this version for 2 dbs that are having the problem.
Question 1:
What line do I put in the xsp.properties file:
xsp.client.script.dojo.version = 1.4.0
xsp.client.script.dojo.path = / domjs / dojo-1.4.0
Question 2:
There are so many things to download when I go to the dojo download page. I downloaded the zip file and used that.
When I run code to test what version of dojo I have I get 1.9.4. But when I try to load my page, I get an error.
dojo._loaders: TypeError: dojo._loaders is undefined
Any help would be GREATLY appreciated.
You probably have the right dojo zip, this one: http://download.dojotoolkit.org/release-1.9.4/dojo-release-1.9.4.zip. As you say, unzip that to the dojo-1.9.4 folder in <server-install>\data\domino\js\, or name the folder 1.4.0 if you want to specify it for only a few apps.
You will indeed need to copy the IBM folder from the <server-install>\osgi\shared\eclipse\plugins\com.ibm.xsp.dojo_9.0.1.<date-stamp>\xsp.dojo.jar into your new 1.9.4 (or 1.4.0) dojo folder. Little chance of anything working without it. Copying the ibm folder from the 1.5.2 folder is a bad idea as that is old code, and you'd certainly have issues with it working with dojo 1.9.4. In Fix Pack 2, the ibm folder from the plugin was tested/designed to work with dojo 1.9.2 (the version in that jar), so it should play fairly nice with 1.9.4.
In your XPages app, in the xsp.properties, you should only need the line:
xsp.client.script.dojo.version = 1.9.4
Rebuild your app, restart the server etc, and you should be good to go.
DISCLAIMER: This is a work-around, not a supported solution by IBM. There may be unexpected issues using this approach. It's used at your own risk.
You commented already on that topic here so I think you tried this one? http://hasselba.ch/blog/?p=323
This is the SO thread: XPages mobile controls not working with iOS 8
If you follow JetBrains' Getting Started with Node.js in WebStorm instructions, node-express specific code is highlighted correctly. However if you create your own simple node-express project, e.g. using node-express' Guide, then express specific functions such as app.get() are underlined and marked with the following warning:
Unresolved function or method get()
This happens even if you enable the following libraries under Settings\JavaScript\Libraries:
Node.js Globals
Node.js v0.10.31 Core Modules
express-DefinitelyTyped (which you need to download)
How can I configure WebStorm to resolve node-express functions such as app.get()?
Instead of express definitelyTyped, use express types in your project:
npm install --save-dev #types/express
Alternatively, for yarn users:
yarn add --dev #types/express
This worked great for me.
TL;DR:
you go to Settings/Preferences --> Languages and Frameworks --> JavaScript --> Libraries, click the Download button on the right, then select "express" (or any other library you need) and click Download and Install.
Enabling express-DefinitelyTyped typescript library for Express project does work for me - app.get() is successfully resolved. Adding typescript stubs is the only possible workaround, as WebStorm can't understand the way express is defined - see https://youtrack.jetbrains.com/issue/WEB-6667#comment=27-470393
If adding typescript stubs doesn't work for you, please try invalidating caches. If this doesn't help, I'd suggest contacting jetbrains support, providing a sample project
I have a Worklight 6.0 project that uses the new Dojo 1.9 libs, I created an external dojo project, like the documentation suggested, then, in the main project properties, under "Dojo toolkit", it references this dojo19 project.
The project works on the local server, then I did "Run As" | "Build for Remote Server...", and entered the correct domain:port and context path, clicked Build, the *.wlapp files were updated. (I've also updated the settings for publicWorkLightHostname / publicWorkLightPort / publicWorkLightProtocol in the "Environment Entries for Web Modules" in the installed war to match the remote server names/port/protocol.)
But, after deploying both war and -all.wlapp file, accessing the app I get JS errors when it tries to refer to the dojo19 library:
The page at
https://<myIP>:9443/<myproject>/apps/services/www/ /mobilewebapp/default/IODMobile.html
ran insecure content from http://localhost:64441/dojo19/<myproject>/IODMobile/mobilewebapp/dojo/nls/core-web-layer_en-us.js.
The dojo19 is the project name in my Worklight developer workspace that I referred to above.
Why is it trying localhost? Seems there's a missing step here in deploying the dojo library project into Worklight.
Where are you trying to preview the application when you get the error message?
See the changes in Dojo in Worklight 6.0
If launching the application in emulator/simulator/device, see Billy Rowe's answer in this question
Partial copy/paste:
Step 1: Verify your application works in the Mobile Browser Simulator
with Provide Library Resources checked. If the Console log is showing
resources being served from the server, then these have to be copied
to your application before deploying to AVD or a device
Step 2: After you think you have all Dojo/resources within your
project, uncheck Provide Library Resources and test it again in MBS.
If it fails in MBS, then something is missing in your application that
is in the library/server. You can check Provide Library Resources and
retest to see if it shows you what that is. Not all resources are
shown, e.g. if there's a missing CSS file.
Also I would suggest to do all of this in the Development environment (that is, in Eclipse) before starting to deploy the .war file and .wlapp file etc... (which, BTW, I hope you're doing based on the new instructions for Worklight 6.0)
In the information center, it will show you how to uncheck the Provide Library Resources in the Console Log.
I think what you're running into is:
1) Something is being served from the Dojo Library/Server
2) A bug in 6.0 that used "localhost" instead of the IP of the host (your machine running eclipse). This is fixed in the 6.0 iFix. With this fix, you can run your app external to Studio and still use the Dojo Library/Server. Without this fix, you must have everything you need within your app.
Can you install the iFix and let us know if that fixed the problem?