While trying to publish Angular components on npm, I am not quite sure which folders and files should be included in the versioning process and which should be in the .gitignore.
I use the Angular CLI for publishing. The main code is in ./projects/nls-ngx-module/src/** and for transpiling I use the native angular command ng build --prod from inside the project folder. Inside dist/ a new folder arrives with the project title. Fine.
After transpiling, another node_modules folder is added to the project folder, which is not ignored by default. It only contains a .cache folder with subfolders and files. And that irritates me, because in other sample projects they do not appear, but they have not been ignored manually in the .gitignore either.
Folder structure
├── ...
├── projects
│ └── nls-ngx-module
│ ├── karma.conf.js
│ ├── ng-package.json
│ ├── ng-package.prod.json
│ ├── package.json
│ ├── src
│ │ ├── lib
│ │ │ ├── ...
│ │ ├── public_api.ts
│ │ └── test.ts
│ ├── tsconfig.lib.json
│ ├── tsconfig.spec.json
│ └── tslint.json
├── src
│ ├── app
│ │ ├── ...
│ ├── assets
│ ├── browserslist
│ ├── environments
│ │ ├── ...
│ ├── ...
├── ...
.gitignore
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
package-lock.json
# System Files
.DS_Store
Thumbs.db
Examples taken from:
mrsan22/NgxMatTypeahead
faxemaxe/ngx-cli-lib-demo
No, no modification of the .gitignore file has to be done. The ng build command was executed in the wrong directory.
Do not run ng build --prod or any similiar ng build command outside the root directory of the application. The node_modules folder is only created inside the projects directory when you run the ng build command inside the subfolders of the projects diretory.
Note
The ng build command distributes all necessary dependencies listed inside the package.json. Therefore there has to be a node_modules folder to bundle the built library correctly.
Related
I develop my website using Nuxt3 and deploy it following the instructions here: https://v3.nuxtjs.org/getting-started/deployment#static-hosting
I successfully get dist and node server hosted web (running npx serve -o dist) also works well, But directly opening index.html in brower leads to a webpage rendered without any CSS and images.
I checked the generated html and found the assets path is like:
<link rel="modulepreload" href="/_nuxt/entry-1f8b74a8.mjs" as="script" crossorigin>
while my dist folder looks like:
dist
├── _nuxt
│ ├── entry-1f8b74a8.mjs
│ ├── entry.ff9830ad.css
│ ├── index-a3c0d3be.mjs
│ ├── index-e5b9c659.mjs
│ ├── index.072137e3.css
│ ├── lcdp-c28417d3.mjs
│ ├── manifest.json
│ ├── paper-b4b64fe8.mjs
│ └── paper.6897f003.css
├── imgs
│ ├── bg1.png
│ ├── bg2.png
│ └── other images...
└── index.html
I guess maybe the reason is that the assets path is wrong? What is the correct way to do the static website generation using nuxt3?
OP achieved to properly deploy the app on Vercel, it's better than Github Pages on every way anyway.
I am doing pretty much this tutorial. Basically you have a pom which controls two modules, the frontend module and the backend module.
Environment: IDE: Intellij, spring-boot, Vue.js
I initialized the frontent module using vue init webpack frontend. I added the pom to the backend module which copies the assets into the backend module asset/public folder. After mvn clean install all the content is in the ressources/public folder, but when I view the browsers sources it does not show any of them.
The resources folder looks like this:
└── resources
├── application.properties
└── public
├── index.html
└── static
├── css
│ ├── app.30790115300ab27614ce176899523b62.css
│ └── app.30790115300ab27614ce176899523b62.css.map
└── js
├── app.b22ce679862c47a75225.js
├── app.b22ce679862c47a75225.js.map
├── manifest.2ae2e69a05c33dfc65f8.js
├── manifest.2ae2e69a05c33dfc65f8.js.map
├── vendor.42fc6c515ccdfe89bd76.js
└── vendor.42fc6c515ccdfe89bd76.js.map
I just noticed that running java -jar backend/target/backend-0.0.1-SNAPSHOT.jar solves the problem. But when I start the application using intellij it does not work out.
Full tree (directories only):
├── fileconverter
│ ├── backend
│ │ ├── src
│ │ └── target
│ ├── frontend
│ │ ├── build
│ │ ├── config
│ │ ├── node
│ │ ├── node_modules
│ │ ├── src
│ │ ├── static
│ │ ├── target
│ │ └── test
│ └── target
│ ├── classes
│ └── test-classes
Okay, as I am having two modules IntelliJ used the classpath of the whole project instead of the backend module.
After changing the path in the configuration to: Use classpath of module: backend everything works fine.
In the folder generated by ng build simple-lib, I see a more complex structure than my other node modules. Instead of an index.js exporting and importing other members, I see a bundles, esm2015, esm5, and public_api.d.ts.
I see the compiled versions of simple-lib in both the esm5 and esm2015 folders. I'm wondering how the esm .js files are used and when esm2015 would be used instead of esm5. From what I understand, esm2015 allows for smaller bundles and tree-shaking, but I'm not sure when the choice is made about which module to use. I'm hoping to generate a lib that I can use in a node project and any help to understand if and how that would be possible would be appreciated. Thanks.
$ tree simple-lib/
simple-lib/
├── bundles
│ ├── simple-lib.umd.js
│ ├── simple-lib.umd.js.map
│ ├── simple-lib.umd.min.js
│ └── simple-lib.umd.min.js.map
├── esm2015
│ ├── lib
│ │ ├── simple-lib.component.js
│ │ ├── simple-lib.module.js
│ │ └── simple-lib.service.js
│ ├── public_api.js
│ └── simple-lib.js
├── esm5
│ ├── lib
│ │ ├── simple-lib.component.js
│ │ ├── simple-lib.module.js
│ │ └── simple-lib.service.js
│ ├── public_api.js
│ └── simple-lib.js
├── fesm2015
│ ├── simple-lib.js
│ └── simple-lib.js.map
├── fesm5
│ ├── simple-lib.js
│ └── simple-lib.js.map
├── lib
│ ├── simple-lib.component.d.ts
│ ├── simple-lib.module.d.ts
│ └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json
While updating my angular version, I think I may have found the answer. The library that will be used is dependent on the browser requesting the application - The esm5 build will be used for older browsers that require more polyfills and the esm2015 libraries will be used for newer browsers that require fewer polyfills
"The CLI's build command now automatically creates a modern ES2015 build with minimal polyfills and a compatible ES5 build for older browsers, and loads the appropriate file based on the browser. You may opt-out of this change by setting your target back to es5 in your tsconfig.json. Learn more on angular.io."
From https://update.angular.io/#7.1:9.0
As per the "Angular Package Format" specs -
In today’s JavaScript landscape, developers will consume packages in
many different ways. For example, some may use SystemJS, others could
use Webpack. Still, others might consume packages in Node or maybe in
the browser as a UMD bundle or through global variable access.
Read more from this link - https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview
I have many applications in a mono git repository. I'd like to share some libraries between my applications.
Here is is my directory structure:
.
├── libs
│ └── messages
| ├── package.json
| ├── src
| ├── tsconfig.json
| └── ...all other good things for a library
├── main
│ ├── config
│ ├── dist
│ ├── node_modules
│ ├── package.json
│ ├── package-lock.json
│ ├── src
│ └── tsconfig.json
├── README.md
└── server
├── main.ts
├── node_modules
├── package.json
├── package-lock.json
├── setupEnvVars.js
├── src
└── tsconfig.json
I want to add the library "message" to my project "main" so I tried to add it this way:
{
"name": "me",
"version": "1.0.0",
"main": "index.js",
"private": true,
"dependencies": {
"#me/messages": "../libs/messages/"
}
}
I'm stuck because it doesn't work (but doesn't throw errors either). Can you help me? Thanks!
I'd need to see more about the content of each package.json files and the project overall, but here are some elements which may help you get a goo structure that would accomplish what you have set yourself to do.
If you really want to go the proper monorepo way, you might want to have a look at https://github.com/lerna/lerna which will work well enough for Node 8 and up (e.g. auto-symlink of file dependencies, which is useful during development).
Another way to solve this issue in TypeScript is using paths:
tsconfig.json
{
"compilerOptions": {
// path
"baseUrl": ".",
"paths": {
"#lib/*": ["./*"],
"#shared/*": ["../shared/*"]
}
}
However, depending on how you build and run your projects, paths are sometimes not processed properly. You may need to use tsconfig-paths if you run your project using ts-node, or tsconfig-paths-webpack-plugin if you are using TypeScript as part of a webpack project.
Im newbie to Angular and trying to setup angular phonecat application.
I have downloaded the code from here
https://docs.angularjs.org/tutorial/
and installed a nodejs.
Now, I'm not sure how to map the angular application to run with nodejs.
From other links, I see everyone run a webserver.js file but I don't see anything under the scripts directory.
scripts]$ tree .
.
├── private
│ ├── old
│ │ ├── format-json.sh
│ │ ├── goto_step.bat
│ │ ├── goto_step.sh
│ │ ├── README.md
│ │ ├── ScrapeData.js
│ │ └── snapshot.sh
│ ├── push-to-github.sh
│ ├── README.md
│ ├── retag.sh
│ ├── test-all.sh
│ └── update-gh-pages.sh
└── update-repo.sh
How can I run the application in nodejs.
If you look at the page you linked, you are supposed to run npm start in the main directory after installing NPM dependencies with npm install.
EDIT: After checking their package.json, you can actually just run npm start. It will also run dependency installation.