Here is my vite.config.js
`
import {
defineConfig
} from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';
export default defineConfig({
plugins: [
laravel([
'resources/js/app.js'
]), ],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});
`
app.js code
import '../../swiper/swiper-bundle';
import '../../jquery/dist/jquery';
I try to import packages that installed vs npm but I am not able to import those packages files in the app.js file
Related
How to use laravel vite with custom package development. I tried to add my path to vite.config.js but am getting an error.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
// input: ['../Packages/Plugin/Customers/public/css/styles'],
refresh: true,
}),
],
});
I tried to duplicate this in my package folder but same error. Can you please assist.
I followed Kamlesh login, I was able to create vite.config.js file inside my custom package as shown below.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/asset/css/settings.css',
'resources/asset/js/custom.js',
'resources/asset/js/ecstore_profile.js',
'resources/asset/js/general_settings.js',
]),
],
resolve: {
alias: {
'settings': '/resources/asset/css/settings.css',
'custom': '/resources/asset/js/custom.s',
'profile': '/resources/asset/js/ecstore_profile.js',
'general': '/resources/asset/js/general_settings.js',
},
},
});
Then I added each file to the vite.config.js file. Then run build inside the custom package and publish this to laravel public folder. all working fine.
I'm using the #casl package to make a permission-based system with Laravel JWT, I'm following this one https://www.npmjs.com/package/#casl/ability
My main.js file.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { abilitiesPlugin } from '#casl/vue';
import ability from './services/ability';
createApp(App)
.use(abilitiesPlugin, ability, {
useGlobalProperties: true
})
.use(router)
.mount('#app');
The error:
I create a login.component.spec.ts for my loginComponent. However, when I run tns test android, the TestBed.createComponent(LoginComponent) failed. The error is below:
NativeScript / 29 (10; Android SDK built for x86) LoginComponent
Should create the app FAILED
Failed: StaticInjectorError(DynamicTestModule)[TestComponentRenderer
-> InjectionToken DocumentToken]:
StaticInjectorError(Platform: core)[TestComponentRenderer ->
InjectionToken DocumentToken]: document is not defined
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [
'TestComponentRenderer', InjectionToken DocumentToken ] }) at Jasmine
I cannot find any result in website about my problem. Thanks for helping.
I tried to include http module since someone said the undefined document may because of http. However, it still does not work.
This is code for login.component.spec.ts:
import "core-js";
import "zone.js/dist/zone";
import "zone.js/dist/proxy";
import "zone.js/dist/sync-test";
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";
import "zone.js/dist/jasmine-patch";
import "zone.js/dist/long-stack-trace-zone";
import { ComponentFixture, async, TestBed} from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { NO_ERRORS_SCHEMA, DebugElement} from '#angular/core';
import { RouterTestingModule } from '#angular/router/testing';
import { Router } from '#angular/router';
import { ActivatedRoute } from "#angular/router";
import { RouterExtensions } from "nativescript-angular/router";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting }
from '#angular/platform-browser-dynamic/testing';
import { LoginComponent } from '~/pages/login/login.component';
describe ('LoginComponent', () => {
beforeEach(async( () => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
providers: [],
declarations: [
LoginComponent
],
schemas: [
NO_ERRORS_SCHEMA]
}).compileComponents();
}));
it('Should create the app', async( () => {
const fixture = TestBed.createComponent(LoginComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});
You are using the BrowserDynamicTestingModule which is not valid for {N}. You are suppose to use NativeScriptTestingModule form nativescript-angular/testing.
I want to speed up compile time. Right not it takes around 40s and I have no idea how make it faster.
I tried set isolatedModules to true in config but in result I have an error:
error TS1208: Cannot compile namespaces when the '--isolatedModules' flag is provided.
I'm using webpack-stream to have task in gulp.
My Gulpfile.js task
gulp.src('./tsScripts/users')
.pipe(webpack(
{
entry: {
"core_users": "./Orchard.Web/Modules/Core/tsScripts/users/users.ts",
"resources_product": "./Orchard.Web/Modules/Resources/tsScripts/products/product.ts",
"resources_products": "./Orchard.Web/Modules/Resources/tsScripts/products/products.ts",
"xrm_contractors": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.ts",
"xrm_contractors_create": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.create.ts",
"xrm_contractors_edit": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.edit.ts",
"xrm_contractors_details": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.details.ts",
"resources_inventory": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.ts",
"resources_inventory_create": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.create.ts",
"resources_inventory_edit": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.edit.ts",
"resources_inventory_details": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.details.ts",
"phx_productRegistry": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.ts",
"phx_productRegistry_create": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.create.ts",
"phx_productRegistry_edit": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.edit.ts",
"phx_productRegistry_details": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.details.ts",
"vendor": "./Orchard.Web/Modules/Core/tsScripts/vendor.ts",
"polyfills": "./Orchard.Web/Modules/Core/tsScripts/polyfills.ts"
},
output: {
path: __dirname,
filename: "./[name].js"
},
resolve: {
extensions: ['', '.ts', '.js'],
unsafeCache: true,
},
cache: true,
devtool: 'eval',
module: {
loaders: [
{
test: /\.ts/,
loaders: ['ts-loader'],
exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/],
options: {
transpileOnly: true
}
},
]
},
plugins: [
new wpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}),
new wpack.optimize.CommonsChunkPlugin(
{
name: "vendor",
minChunks: Infinity
})
]
}
))
.pipe(gulp.dest('Scripts/main/'));
vendor.ts
///<reference path="./typings/globals/core-js/index.d.ts"/>
///<reference path="./node_modules/#types/jquery/index.d.ts"/>
///<reference path="./node_modules/#types/select2/index.d.ts"/>
import 'zone.js/dist/zone';
import '#angular/common';
import '#angular/compiler';
import '#angular/core';
import '#angular/forms';
import '#angular/http';
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/router';
import 'jquery';
import 'angular2-datatable';
import 'angular2-modal';
import 'rxjs';
import 'datatables'
import 'select2'
Everything works fine, but waiting ~40s for every build... It's too long. I tried set jquery as external, but it gave me 1-3s.
Maybe external angular2? Or maybe I did something wrong and webpack is looking for files in my entire solution.
Thank you in advance for any help.
During development you can use webpack watch mode which enables incremental compilation.
I'm trying to import socket.io.client into an Angular2 app using webpack and I'm having no luck.
'socket.io-client' has no default export
I have done the following...
npm install socket.io-client --save
typings install socket.io-client --save --ambient
vendor.ts
import 'socket.io-client';
webpack.config
resolve : {
alias: {
'socket.io-client': path.join(__dirname, 'node_modules', 'socket.io-client', 'socket.io.js')
}}
module :{
noParse: [path.join(__dirname, 'node_modules', 'socket.io-client'),
...
}
entry: {
'vendor': './src/vendor.ts',
...
}
component.ts
import io from 'socket.io-client';
Webpack Error