I'm having a problem that is happening to me in two differentes PC's. For my project I've installed for development the following dependencies: (webpack webpack-cli #babel/core #babel/preset-env #babel/preset-react babel-loader css-loader style-loader html-webpack-plugin) and react & react-dom. The trouble comes when I try to import some stylesheet in any component of my project, the error is: import api from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";. I'm little confused because I checked many times other webpack configurations done by myself and they are the same that I am using now. What is your advice? Thank you!
I had this issue, seems that webpack does not allow multiple definitions of the styles css file.
So, what solved the issue for me is remove the css file from "styles" in angular.json
//....
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist/app-name",
"index": "src/index.html",
"main": "src/app/main.ts",
"polyfills": "src/app/polyfills.ts",
"tsConfig": "tsconfig.json",
"preserveSymlinks": true,
"assets": [
"src/client/img"
],
"styles": [], //don't mention your styles.css here
"scripts": [],
//....
webpack.config.js should include the loaders and it should be enough
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
Related
After running the project scripts declared in angular.json file are not loading
"scripts": [
"node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
"node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js",
"node_modules/#clr/icons/clr-icons.min.js",
"src/assets/js/app-info-parser.min.js",
"node_modules/lz-string/libs/lz-string.min.js"
],
Tried to to re-install few library but it does not seems to be working.
You should add them under build architect
"architect": {
"build": {
"options": {
"scripts": []
After run the project,
they should be part of the scripts.js file.
I built a library project (Vue 3, Vite) and I want to include it in a host project via package.json.
But I faced a problem where I can import the components and run a simple programme with those imported components but their styles are gone.
Please let me know what is wrong with my config. It doesn't make sense when I have to manually import css into my host project.
Just to clarify, I don't have any .css source files in my project. style.css was compiled from my *.vue components
This is the vite.config.ts for my library project. Everything that I need exported is in src/.
// Library project
import { defineConfig } from "vite"
import vue from "#vitejs/plugin-vue"
import typescript from '#rollup/plugin-typescript';
const path = require("path")
// https://vitejs.dev/config/
export default defineConfig( {
plugins: [{
...typescript( { tsconfig: "./tsconfig.json" } ),
apply: "build",
declaration: true,
declarationDir: "types/",
rootDir: "/",
}, vue()],
resolve: { alias: { "#": path.resolve(__dirname, "./src") } },
build: {
lib: {
entry: path.resolve(__dirname, "src/index.ts"),
name: "gsd-vue-egui",
// fileName: (format) => `gsd-vue-egui.${format}.js`,
},
rollupOptions: {
external: ["vue"],
output: {
// Provide global variables to use in the UMD build
// Add external deps here
globals: { vue: "Vue" },
},
},
},
server: {
port: 30001,
}
} )
And this is the relevant part of my package.json
{
"name": "gsd-vue-egui",
"private": true,
"version": "0.0.0",
"scripts": {
"preinstall": "npx npm-force-resolutions",
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"test": "npm run test:unit",
"test:unit": "jest --config=jest.config.js test",
"lint:css": "stylelint --formatter verbose --config .stylelintrc \".\" --fix",
"lint:eslint": "eslint --ext js,vue,ts \".\" --fix",
"lint": "npm run lint:css && npm run lint:eslint"
},
...
}
The structure of my dist/ folder after running npm run build is as follows:
dist/
|-components/
| |-Button.vue.d.ts
|-App.vue.d.ts
|-MyLibraryName.es.js
|-MyLibraryName.umd.js
|-index.d.ts
|-main.d.ts
|-style.css
You need to manually import your CSS because you are shipping JS and CSS files independently in your package. If you don't want to manually import your CSS, you need to package your SFC files for npm. This is the document for Vue 2, but its idea can totally apply to Vue 3.
Here are some points to note:
You must ship your .vue files along with your npm package by NOT adding the /src folder to the .npmignore file
In your host project, import your .vue file directly from your package import YourComponent from 'your-package/src/your-component.vue'
This approach will not work for anyone who wishes to use the component directly in a browser via the <script> tag, anyone who uses a runtime-only build or build processes which don’t understand what to do with .vue files
Some components might provide side effects like directives, or extend other libraries with additional functionality
Manually importing CSS files will never be a bad idea and almost all the Vue packages I know use that approach
I have been creating single page applications in Angular for some time, and now I would like to create a single page application but without using the entire framework.
I would like to have one .html file, and one javascript file, which would be compiled typescript file, say index.ts. And inside index.ts I would import things from other typescript files.
Are there any projects online which are similar to what I want to achive, and is it possible to setup npm project like this at all?
Edit:
After some time, this is what I accomplished:
My project structure:
├── bundle.js
├── functions.ts
├── index.html
├── index.ts
├── package.json
├── style.css
├── tsconfig.json
└── webpack.config.js
package.json
{
"name": "rxjs6-demo",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"start": "webpack-dev-server --open"
},
"devDependencies": {
"ts-loader": "^5.3.1",
"typescript": "^3.2.2",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"rxjs": "^6.4.0"
}
}
tsconfig.json
{
"compilerOptions": {
"outDir": ".",
"noImplicitAny": false,
"sourceMap": true,
"module": "es6",
"target": "es6",
"allowJs": true
},
"include": ["*.ts"],
"exclude": []
}
webpack.config.json
module.exports = {
entry: './index.ts',
output: {
filename: 'bundle.js'
},
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: '.'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
}
};
index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
running npm start will start a webpack-dev-server which recompiles my application each time any typescript file changes. Inside index.ts I can import stuff from other .ts files. But what I couldn't accomplish is making webpack-dev-server reload my app in the browser when html or css files change.
Any help or general suggestions about the structure of my application will be greatly appreciated.
With the current setup, Webpack is not processing your .html and .css files, so it stands to reason that it's also not monitoring them for changes. Rather than adding link tags into your .html file for the .css files, you can instruct Webpack to process the .css files using css-loader and style-loader.
First, you need to install css-loader and style-loader. e.g.:
npm i -D css-loader style-loader
css-loader is responsible for processing CSS files and style-loader is responsible for injecting them into the DOM. When using this approach, the output bundle.js (in your example) will contain the transpiled JavaScript and the CSS, with the CSS itself being wrapped up in JavaScript and DOM manipulation.
Next, you need to add a rule to webpack.config.js:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
This rule, which sits in the rules array alongside your existing ts-loader rule, instructs Webpack to process .css files first using css-loader and then style-loader.
Lastly, you can add an import into your index.ts file:
import './style.css';
That should be all that's needed for Webpack to start processing and monitoring your .css file. For additional files, you can add more import statements as shown above.
As for .html files, there's a good answer for that here that should help. There's also a great tutorial/online book on the styling topic (and almost everything else you could need) by SurviveJS here. The book also covers things like building for production, which allows for extracting the CSS content out into a separate file for production builds, etc.
I have an angular 6 app, I'm trying to setup my own style library...
This is how looks angular.json file:
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/adm-auth-frontend",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"src/styles.scss"
],
"scripts": [
"src/assets/scripts/index.js"
]
},
"configurations": {
As you can see, the project was setup with sass and its working good.
The problem is that I need some scripts files, I've added those files on the scripts sections but when I run execute ng serve get the following error and still now working :(
See error
I've tried to add it on webpack config file by using ng eject but..
The `eject` command has been temporarily disabled, as it is not yet compatible with the new `angular.json` format. The new configuration format provides further flexibility to modify the configuration of your workspace without ejecting. Ejection will be re-enabled in a future release of the CLI.If you need to eject today, use CLI 1.7 to eject your project.
index.js file:
#import './spec/settings/index.scss';
#import './spec/tools/index.scss';
#import 'bootstrap/scss/bootstrap.scss';
#import './spec/index.scss';
#import './vendor/index.scss';
How can I add these .js files?
Angular scripts added on angular.json file are run only once
when angular took over the application it will read those scripts once and loaded
so it is not recommend to use js files with angular cus they are not functioning again unless manually re-triggered upon change to the HTML.
instead use typescript libraries like ng-bootstrap or
Temporary solution is add manual tag on index.html,
this worked but isn't good enough.
I'm currently working on an Angular (Angular 4.2.5) project and have been able to add a few third party modules. However, in most cases, if the third party module required me to include a script (like a .js file), I had to add it to my index.html file.
For example, this is what is in my index.html for Bootstrap:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
This was also the case for my CSS files but recently found that I could import them into my style.css. Here's an example of what exists in that file for bootstrap as well:
#import '~bootstrap/dist/css/bootstrap.min.css';
Now when I look online, I see that I should be able to add the path to the script in question to my angular-cli.json file but every time I have done that, the third party component fails. Only when I add the [script] tag for that component into index.html does it work.
I've tried several online guides but none seem to work. I'm certain I'm missing some minor setting somewhere to ensure that I'm using the angular-cli.json path listed but I can't seem to find it.
Some details in the event you need it:
#angular/cli: 1.2.0
node: 6.10.0
os: win32 x64
#angular/animations: 4.2.5
#angular/common: 4.2.5
#angular/compiler: 4.2.5
#angular/core: 4.2.5
#angular/forms: 4.2.5
#angular/http: 4.2.5
#angular/material: 2.0.0-beta.7
#angular/platform-browser: 4.2.5
#angular/platform-browser-dynamic: 4.2.5
#angular/router: 4.2.5
#angular/compiler-cli: 4.2.5
[Edit 07/08/2017]
To be clear, I do have the following in my angular-cli.json but it still doesn't work unless I have it included in my index.html.
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "ang2-crm",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/bootstrap.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
You can either import them via styles.css or index.html using a link.
Additionally, you can import scripts in your angular-cli.json under scripts: []
You can add all scripts in scripts array in .angular-cli.jaon and css files in styles array.
For example if you want to add jquery.min.js.:-
Install jquery package by npm install jquery --save
Then add entry in scripts array as:-
scripts:[../node-modules/jquery/dist/jquery.min.js]