I am working on an existing project which used webpack for front end asset compilation. I would like to add an angular app to this project. The angular app will be contained to a specific part of the site initially. Ideally I would like to use the CLI for the build but it isn't clear in the docs whether I can run the angular CLI commands within my existing webpack.config.js.
My folder directly is roughly as follows. Webpack imports from the webpack driectory and outputs the assets into an assets directory.
/
|-/webpack
|-/webpack-module-1
|-/another-module
|-/some-other-webpack-module
[|- IDEALLY ANGULAR-CLI APP WOULD GO HERE]
|-/assets
|-/js
|-/css
|-webpack.config.js
|-package.json
Is there a way of importing angular-cli app into webpack config?
Update
As a workaround I am using concurrently to run the angular-cli commands alongside the webpack ones and updated the outputPath of the angular app. I'm going to leave the question open in the hope somebody has a more elegant solution.
Related
is it a good idea to remove react storybook from the JS bundle? obviously it isn't needed for any client facing part of my apps. so should I remove it from the bundle for the app and include it in the storybook bundle?
According to their official documentation, we should use npx sb init.
When checking the package.json file of the frontend project, this will install storybook under the dev-dependencies. https://storybook.js.org/docs/react/get-started/install
Hence, when creating a production build (such as with npm run build under create-react-app), it will automatically be excluded in the bundle.
What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance
npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save
You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2
When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.
While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve
Is there an article that describes how a deployed aurelia web application differs than an application that runs locally on gulp. This must be a general question that applies not only to aurelia. There is a js library that I'm using that hangs the browser. That never happens when I run the app locally which makes me think that there is something really different that the deployed app does not have.
You are correct, this is not so much Aurelia specific, but build-tool specific. When you run your app locally, you will be using npm dependencies that are installed in /node_modules directory and resources from local file system (like CSS, images etc). When you bundle your application for deployment you need to bundle everything needed to run the app (including dependencies and resources).
For every bundler you can configure what to bundle and create different bundles. There are good explanations on how to bundle for both Aurelia CLI project (bundle configuration is in aurelia_project/aurelia.json) and JSPM project (bundle configuration is in bundle.js).
Just make sure that all necessary files and modules are bundled. Often the problem is not with bundling itself, but stuff that cannot be bundled. There are some very stubborn libraries (eg some assets of Bootstrap or some jQuery-based plugins) that will not work when bundled. Then you need to include them in deployment separately. In JSPM configuration it means you will have to export them together with bundles. Export basicly means "select all files that will be used to run the app in production" and those files are going to be copied to /export directory in case of JSPM. In CLI installation you will need to add copyFiles section to aurelia.json to export extra files.
Check this article on how bundling exactly works and this one to understand what is the role of aurelia-bundler in the process (hint: aurelia-bundler is a part of framework that creates ready-to-use Gulp tasks for you).
I'm trying to build an application that have to run on Windows(PC), Android and iOS.
For this, I will use Electron (for Windows) and React Native (for mobile plateforms). Both will be built with React and Redux. This way, I will be able to implement the logic in Redux reducers and middlewares and use them in both projects.
From now, I have done a POC for the Electron app using webpack. The reducers are currently directly in the app code. I want to extract the Redux relative code in a seperate package to allow me using it in a the React Native project.
I can make an npm package for my Redux module containing the reducers and the middlwares but this way, when I will compile my application, webpack will not compile my seperate package, it will use the precompiled version.
So What I want is to be able to make a separate package but still compile it at application compile time (because it is still in developpement and the dev is very closely related to main application dev).
Do I have to do it only with npm or with webpack as well ?
I'm pretty new to the Javascript dev stack.
I think you have different ways to handle that problem.
You can use NPM package. But in code of package, you will store not only original source code, but compiled code too. I mean before publish that package, you'll need to compile it in normal ES5 code.
I think you can use submodule system provided by Git. You should have separate repository with common code of your reducers. And in each project (Electron, RN, etc.), you will have a directory with git submodule. Webpack should compile code in that directory normally without any problems.
UPD:
About submodules you can read nice article here: https://git-scm.com/book/en/v2/Git-Tools-Submodules#Starting-with-Submodules
In few words, in project it will looks like:
cd yourProjectFolder
git submodule add https://github.com/TalAter/awesome-service-workers submoduleDirectoryName
It will clone repository to your project, and create .gitmodules file. Code from submodule will not exists in current project repository. In remote repository it will contain only link to submodule, but on your machine, you will have full code and you will be able to compile it.
I am using Yeoman 1.0 beta and not interested in the express-stack branch. What, then, is the recommended/best way to use Yeoman to scaffold an Angular project within Express?
I tried running yo angular --minsafe in the root directory of the Express project (where app.js and package.json are), but Yeoman was trying to override package.json, and the Angular files didn't go into the public subdirectory properly. Also I am not sure if I can just go manually moving the Angular files around without breaking Bower and Grunt functionalities.
Would be great to have some advice, thanks!
This project seems to cover all of the requirements (and even has optional support for MongoDB): https://github.com/DaftMonk/generator-angular-fullstack
I've just tried it locally and it works:
npm install -g generator-angular-fullstack
yo angular-fullstack [appname]
See the GitHub page for more info.
If you install Angular first through Bower, then add Express to package.json and run npm install - you'll have an Express server fire-up the /dist directory. (Edit app.js to route to /dist and let angular handle routing)
See this SO question for more information: Yeoman inside ExpressJS
This is a comparison of alternatives for starting an AngularJS app. Several of them involve Express too.
http://dancancro.com/comparison-of-angularjs-application-starters/
After reading MANY blogs and answers, I managed to get it all working...
Check out this repo: https://github.com/malixsys/malix-yae
When changes are made to html/server or lib, the server is restarted and the page should refresh
When changes are made to HTML or JS files under html/client, the server is not restarted but the page should refresh
When changes are made to CSS files under html/client, the new stylesheet should be injected directly without refreshing