I had started with intention to bring UI of adminLTE into Jhipster gateway app. For this, I followed following steps:
getting repository from https://github.com/TwanoO67/bootstraping-ngx-admin-lte.
copying required dependency from package.json of AdminLTE to package.json of jhipster app. It downloaded adminLTE module in node_module folder.
copying source code, tweaking/changing, solving errors where ever required.
I could successfully bring the code from admin folder of adminLTE under jhipser app, and I could achieve the following result.
Now the problem is it is complaining about AdminLTE is not defined. AdminLTE is defined in script.js in "assets/js/scripts.js"
I am looking for ways to make this file available to my code in any.component.ts. One way I tried is, including in script tag in index.html and adding following line to CopyWebpackPlugin in wepack.common.js.
{ from: './src/main/webapp/assets', to: 'assets' }
This successfully loads the file in browser and init function in script.js also gets called. But then it complains about use of jQuery in script.js.
After fixing this, I think I would be successful in bringing the AdminLTE to jhipster app.
you can use jhipster-adminLTE,it's jhipster admin lte theme with angular-dashboard-framework.
It is very hard to apply ngx-admin to a JHisper project. Since JHipster uses webpack to build but ngx-admin don't. But I did at last. I share my work on my github you can follow the instructions. I hope it helps.
Related
Preact guide says
To alias any package in webpack, you need to add the resolve.alias section to your config. Depending on the configuration you're using, this section may already be present, but missing the aliases for Preact.
But using any of the official templates (default, typescript, material web components, etc...) doesn't generate any webpack.config.js file and preact has no eject command like react to access the full project configuration.
So, few things:
Firstly, Preact and Preact-CLI are two separate items.
You're quoting the section from our docs labeled "Integrating into an existing pipeline". This means adding Preact to an existing React application of yours, but, if you're using one of our templates, then this is a new project, not an existing one.
preact has no eject command like react to access the full project configuration.
There is no way to "eject" React. What you're referring to is the build tool called "Create React App".
We do allow for full configuration of the Webpack config with a preact.config.js. With this, you can edit any parts of the config that you'd like: change plugin options, add loaders, remove plugins, etc., without owning the configuration yourself. You can just comment out your changes in your config and you're back to the default config.
We believe CRA's "eject" is a poor API and therefore don't match it.
I'm currently working on a React application that's consuming a React library we also develop.
Currently, the process is to copy over the dist folder of the library over to the node_modules folder of the application.
To resolve the tedious nature of this, I thought the solution would be simple: to npm link the package in our application, and have the JSX/React components run through the application's babel-loader. That way, we'd also get webpack's dev server to watch for changes in the library and refresh automatically.
The problem with this is that the library's babel settings are different from those of the consuming application. For instance, root imports in the library (e.g. import ~/some-module) are supposed to resolve from the root folder of the library, but instead, they resolve to the root folder of the application, resulting in errors, because the only babel configuration it uses is the .babelrc from the application.
I tried adding separate webpack config rules to make exceptions for the library, but now it feels kind of hacky. In addition to that, the webpack dev server runs incredibly slow to boot up, presumably because it's running a babel transformation on the library too.
Is there an easier way to do this? Like telling webpack that "for this library in node_modules, use its own configuration file, and respect all of its own babel settings and relative imports?"
I am new to Angular2 and just published a very basic app to Azure web app. I searched before posting this question and found couple of references
http://abusanad.net/2016/07/24/publish-angular-2-app-from-visual-studio-to-azure/
Deploy Angular 2 App to Azure
After following the steps in these articles, I accessed my WebApp and I see errors in browser console with 404 not found files.
System.import('main.js').catch(function(err){ console.error(err); });
Image of Exception details attached here
I also checked the versions of npm(3.10.8) & nodejs(v6.9.1) in my webapp. Seems like its good.
Any help is appreciated ! Thanks.
After adding the engines version to package.json, the issue got fixed :)
"engines":{"node":6.9.1} (In my case, this is the version)
Link for reference on how to specify the engines version:
https://learn.microsoft.com/en-us/azure/nodejs-specify-node-version-azure-apps
It looks like your server can't find the external libraries that your website is referencing, such as System.js. The list of files in your screenshot seems to have been flattened out - the original directory structure of your node_modules folder has been lost. Did you perform some step which caused this? Did you run npm install in your wwwroot folder like the tutorial advised?
Looking a bit further in the future, you will want to investigate a build process for your front-end code using a tool such as Webpack or Rollup, to stop you from deploying tons of separate source files.
Edit: Just noticed that the directory in your screenshot is (probably) wwwroot/core-js/client. Can you show us wwwroot instead?
I am currently working on two related projects. One is a Phoenix based website and API, while the other is an Angular2 application that among other things uses the API provided by Phoenix. I now want the Angular2 application to be used by the Phoenix project. The problem is that I don't know what the best approach is. I am very new to Angular2 and NPM, and know very little of how it actually works outside of basic usage. These are the ways I can think of solving my problem:
Put the Angular2 project into the Phoenix project, making it one project. I have no idea how to do this, but I will probably get there through trial and error as both use Node.js so it should be doable.
Publish the Angular2 project to NPM, and then import it to the Phoenix project. How much work would be needed on the Phoenix side? Would it be the same as just running the index.html in the Angular2 project? Would I need some kind of Angular2 "shell" around it?
Run the Angular2 application as it's own thing, and just link to it through the Phoenix website.
Importing it as a node module sounds like the best approach, but can it be done for full applications, or is it intended for support libraries only?
I am unsure if this is the "right" way to do it but this is what I did in the end:
I compiled my entire Angular2 project into app.js, vendor.js, and common.js, I then moved it all to web/assets/. After that I simply created a new html and referenced the files in question.
The biggest challenged was finding something to compile it all into these 3 files. I ended up using a stripped down version of: https://github.com/AngularClass/angular2-webpack-starter
I think you would want to leverage brunch.io, which ships with phoenix to handle your front end dependencies. There are skeletons which are essentially templates that create different front end configs but I don't see one that provides angular2. In this case I would say use bower to install the js packages you want ie:
bower install -S angular2
With this you can use brunch as a processing pipeline and it will handle minification, linting etc. and you will still be working within the "recommended" approach to managing front end assets in Phoenix.
I need to develop a mobile application using worklight. While i was going through few sample source code, I observed a gulpfile where they defined few Task/Watch in it. There was also a package.json where they have defined devDependencies property.
I like to know how a hybrid app project (when developed using Worklight or any other tool/framework) use the gulpfile, package.json, node.js, bowerrc. How is the controls passed across all these components when implemented for a hybrid app developmen and What will be the first point of execution in this sequence of execution workflow. As I believe wlEnvInit() inside main.js is the starting point of execution for a worklight project.
I tried google but could'nt find any explanation on the same.
The Gulp file you see is part of a default Ionic project. It handles compiling Sass files and running the bower install command to install dependancies. If you are using Sass in your project, then this would be useful to you, but it does not directly relate to MobileFirst.
As you know, when you update your common code, you need to do a build/deploy to get the code deployed to your mobile platforms. So if using Sass, then you need to remember that while the Gulp file may compile the CSS, you still need to "mfp bd" to deploy it to MF.
Does this answer your question?