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
Related
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I am using Vue 2 (doesn't really matter which version exactly).
I want to test some things that happen behind the hood in Vue. So I decided to add console.log('test123') in Vue's files in node_modules. It turns out that the console log never fires. I put that in all files of Vue in node_modules, even in all files of dist's folder of Vue.
How can I achieve this ? If I fork the repo, then I'd have to upload new versions each time on my repo and then run npm install. I know that will work but wanted to achieve this without forking.
Any ideas what I am missing ?
there are many ways .. but i feel more comfortable using this method :
you can download any npm package in a seperated folder next to your project...
open the folder of the package then run this in the terminal:
npm link
then open the project folder and run
npm link ../package-path # link the dir of your dependency
References
npm-link
How to test an npm package locally
I am using VS 2019 for Core 3.1 development and I installed Font Awesome whith Yarn:
yarn add #fortawesome/fontawesome-free
However, whenI try to reference it in my HEAD section like this:
<script defer src="~/lib/#fortawesome/fontawesome-free/js/all.js"></script>
I get the following error:
the 'fortawesome' doesnt exist in actual context
Package managers like yarn, npm, etc. just add the packages to your project. They generally aren't ready to deploy directly at that point, but rather require a build pipeline to create the actual JS/CSS resources. The #fortawesome/fontawesome repo is an exception in that 1) it's not actually a package and 2) the files are already "built". Even then, though, they still won't be in the right location.
I'm not overly familiar with yarn, but npm, for example, puts everything in a node_modules directory. That directory is not served by default, and should not be served, because it contains "raw" stuff. You'd need a separate build pipeline (using npm scripts, webpack, gulp, etc.) to build/copy assets into a directory that is served (i.e. wwwroot). That is likely the piece you are missing.
For this, since there's no build actually required, you just need to have the assets copied to something like wwwroot/lib and then you'll be able to reference it via the script tag on the page. That can be done with any tool like npm, webpack, gulp, grunt, etc. so you'll just have to research and pick the one that fits your needs best.
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.
I have recently included Angular 2 in my project. After setup, facing issue for namespace webdriver. On Google I found the solution here. But here it is asking to execute below npm command.
npm install #types/selenium-webdriver#2.53.36 --save-dev
Now, I want to know, where I will execute this above command, so that the required files will get included in my project.
Inside the VS IDE, I haven't found any console area like as for nuget, where I execute the command and files get included in project.
Please help.
add a nmp configuration file
add all of the #angular dependencys that you will be needing
add system.config file in the root of the project
add tsconfig.json to the root of the project
add tslint.json to root of project
then add your app.component .module .route and other files.
in system.config.js add your #angular/core and others like
'#angular/core': 'npm:#angular/core#2.1.1/bundles/core.umd.js'
after doing this your can run your project and your _layout page is where you will add all of your <script> and other angular files.