I downloaded an Aurelia project for testing purpose. After restoring the packages (npm install) and running the application (au run --watch). Now I see Start watching... I was curious about doing some changes (for example in contact-list.html) and seeing the website adjusting after pressing F5 (because of watching). It does not work. My changes are not reflecting in the running website. In the shell prompt where it is watching, nothing happened.
You can test by yourself with the project zipped below.
Zip of the Aurelia project
If I create a new Aurelia project from scratch (au new) and following the wizard, the watching works pretty well.
I don't know why it does not work in the project I downloaded (code provided by a Book for learning Aurelia).
What book is this?
Part of the problem is that the version of the CLI you are using is 2 years old. I would recommend getting the latest version of the CLI, creating a new project that uses RequireJS
au new
give new project a name
choose custom (3)
choose RequireJS (2)
choose Babel (1)
choose defaults for the rest
copy the src folder from your zip file over to it the newly created project
You'll need to run npm install bootstrap#3.3.6 --save or yarn add bootstrap#3.3.6 to pull down bootstrap.
Copy the link to bootstrap's css from your zip file's index.html to the new project
Delete the Promise.config line in src/main.js.
Then just run au run (--watch is no longer needed). It should work.
Related
I was recently assigned a new project that uses Angular5 on frontend and Laravel on backend. I had no experience with Angular5 so I went through this entire tutorial without any issues. There is no backend and ng serve is used to serve the project. Only when I make updates to components/html/scss/etc files do I see changes to the served local UI - no changes to the local project UI are observed when I make changes to the main.js file within the dist folder after ng build, but changes made to the components/etc. are observed as updates in main.js after ng build. I was under the impression this is the expected behavior.
However, for my inherited project (which I put on my local machine via a simple git clone), the opposite is true. When I run locally, I use php artisan serve. All edits to blades are reflected in the served local project. However, for the "Angular-controlled" portion of the project, only when I make updates to the main.bundle.js file (without using ng build nor ng serve) within the dist folder do changes register in the served local UI - no changes are observed on the local project UI when I make edits to the components/html/etc files.
Can somebody please tell me what the heck I am missing here? What do I need to do to have edits to my local components/html/scss/etc. files reflected in the served local UI on the inherited project?
The inherited project was git cloned so this is how it was before I made any edits. I would imagine that development work is supposed to be done on components/etc. directly, not on .js files within the dist folder!
PS - No 404- or 500-level errors when inspecting the inherited project
In the project directory, updating npm using npm update and then running ng serve did the trick.
I'm a newbie to both IntelliJ and Aurelia. I did my last web project almost a decade ago, and I find myself a bit lost between all those new libraries. That said, my question is probably of rather trivial nature:
I've downloaded the Aurelia skeleton project [1], imported the sources into a new node js project in IntelliJ and started index.html. Voila. Browser opens, shows the site.
Then I changed something (added a new route to src/app.js).
I hit the run button to show index.html again: No changes. Hm?
I rebuild the project in IntelliJ, and retried. Still my changes aren't shown.
I run gulp watch on the command line, open the browser, and my changes are shown.
So, I'm asking two things: What needs to be done to really refresh the build within IntelliJ?
And secondly, when did it become a sport to create inter-depending Javascript libraries with blurry names? Just kidding... (though I'm not laughing)
[1] https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-esnext/src/child-router.js
I found it out myself. You need to put 'gulp build' to the pre-launch list of the run configuration. This is because the sources get transpiled and copied to the dist directory, from where the server is actually running.
Just building the sources from IntelliJ isn't enough.
Project rebuild start automatically after any files was changed in project directory. You do not need to build it from IDE-- only save your changes and wait a few seconds to refresh.
Of cause it will work only when you run project build with watch statement like gulp watch (e.g. run gulp watch and your project will rebuild automatically).
But if there were some errors in code -- gulp process will stop and you must restart it again. I recommend you change IDE's settings to disable automatically saving to files and use <CTRL+S> buttons to save data manually.
Can I create the navigation-skeleton project using aurelia-cli (v 1.0)?
When I copy the skeleton (also v 1.0) into a folder and then run
au start --watch
I get an error
Cannot read property 'getTaskMetada' of null
I've also tried using the cli to create a new project first, then copying the skeleton over the resulting folder structure - no go.
I'm excited by Aurelia, but still low on the learning curve.
No you cannot. At least the way you are approaching it. The Aurelia-CLI uses requireJS and npm as opposed to JSPM and SystemJS. If you would like, simply run au new from the CLI and follow the project setup and choose yes for install dependencies. You should then be able to copy over the skeletons CSS JS and HTML and mimic the file structure in your new cli project. Once you have paths correct for css and everything it should run just fine. You will see that aurelia.json is the new config.json from the skeletons. Do your bundling and referencing there.
Refer to this on how to properly configure libraries for bundling in aurelia.json and how to refrence css with <require> tags in cli projects.
It sort of is possible using generators like this:
au new # (Select 2 or 3 with typescript)
npm install #generator/skeleton-navigation -D
au generate skeleton-navigation
au run --watch
I get a lot of gulp errors about duplicate identifiers but the app does run.
Be aware though that this generator will overwrite your source code!
Source: https://github.com/aurelia/cli/issues/477
I made a project using GULP and I downloaded several modules with the NPM cmd. For a new project, should I copy/paste my old project with the files "gulpfile.js", "package.json" and the folder "node_module" or i have to redownload all the modules ? I tried to copy/paste and it worked perfectly, but maybe there is an another way to do it (like download each module with one command line) ?
Thank you !
Copying your old package.json file into your new project is perfectly reasonable when you also use a copy of your existing gulpfile.
Now, instead of copying your node_module folder just run npm install. It does exactly the same thing as copying and pasting but with the added bonus of checking package versions, deprecated dependencies, and so on...
Quick tip: If you ever run into problems as I have deleting/removing packages given that theirs paths might be longer than what the OS allows use the tool rimraf. Install it globally and then you can call rimraf on anything. CAUTION! this tool will erase everything no questions asked
I am a semi noob in web development.
I just started playing around with angular2 today. And i ran into a problem..
If I were to install angular2 with npm to my local computer, which file is the js file that should be linked to the html page that show up on the client?
In their guide, i see a file called /node_modules/angular2/bundles/angular2.sfx.dev.js. But i don't even see this file at all.
Is there some script that i should run to build that file? Or is the file renamed? I am really confused.
I tried some file /angular2/bundles/angular2.js, but it doesn't even export ng variable to window!
I see that in https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js, eventually ng gets exported. But what changed in alpha 53? (the version i get for doing npm install angular2)
In my projects, I a using
"node_modules/angular2/bundles/angular2.dev.js"
You might additionally need to install/add systemjs, just in case you are using the systemjs library.