I'm trying to use Angular2 with laravel 5.2 so I'm trying to configure gulp to compile typescript file.
This is my package.json file:
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"bootstrap-sass": "^3.0.0",
"#angular/common": "2.0.0-rc.5",
"#angular/compiler": "2.0.0-rc.5",
"#angular/core": "2.0.0-rc.5",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.5",
"#angular/platform-browser": "2.0.0-rc.5",
"#angular/platform-browser-dynamic": "2.0.0-rc.5",
"#angular/router": "3.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.2",
"#angular/upgrade": "2.0.0-rc.5",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
},
"dependencies": {
"elixir-typescript": "^2.0.0"
}
}
This is my tsconfig.json (that I put into resources/assets/typescript):
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
and at the end I have my gulpfile.js:
var elixir = require('laravel-elixir');
var elixirTypscript = require('elixir-typescript');
elixir(function(mix) {
mix.sass('app.scss');
mix.typescript('main.ts', 'public/js/');
mix.copy('node_modules/#angular', 'public/js/angular');
mix.copy('node_modules/when/es6-shim', 'public/js/es6-shim');
mix.copy('node_modules/es6-promise', 'public/js/es6-promise');
mix.copy('node_modules/rxjs', 'public/js/rxjs');
mix.copy('node_modules/systemjs', 'public/js/systemjs');
mix.copy('node_modules/zone.js', 'public/js/zone.js');
});
When I start gulp from console I get a lot of errors, such as:
/var/www/chat/laravel/node_modules/#angular/common/src/directives/ng_class.d.ts(81,34): error TS2304: Cannot find name 'Set'.
[14:59:24] gulp-notify: [Laravel Elixir] TypeScript Compilation Failed!: /var/www/chat/laravel/node_modules/#angular/common/src/directives/ng_class.d.ts(81,34): error TS2304: Cannot find name 'Set'.
{ [TypeScript error: /var/www/chat/laravel/node_modules/#angular/common/src/directives/ng_class.d.ts(81,34): error TS2304: Cannot find name 'Set'.]
name: 'TypeScript error',
.....
It seems that it tries to compile all the typescript stuff in node_modules. I used the field "exclude" in tsconfig.json but it doesn't seem work.
i had the same issue but fixed it here.
https://github.com/axiskafi/angular2-laravel5
your package.json and gulp file needs some modification. Follow the given link and instruction, it will solve your problem.
Related
Just upgrade Nativescript to version 7 and getting the errors below, not sure why nativescript is throwing this error.
This is my package.json:
"dependencies": {
"#angular/animations": "^10.2.4",
"#angular/common": "^10.2.4",
"#angular/compiler": "^10.2.4",
"#angular/core": "^10.2.4",
"#angular/forms": "^10.2.4",
"#angular/platform-browser": "^10.2.4",
"#angular/platform-browser-dynamic": "^10.2.4",
"#angular/router": "^10.2.4",
"#nativescript/angular": "^10.1.7",
"#nativescript/core": "^7.1.0",
"#nativescript/webpack": "^4.0.0",
"#nstudio/nativescript-cardview": "^2.0.1",
"#types/jest": "^24.0.18",
"base-64": "^0.1.0",
"js-base64": "^2.5.2",
"nativescript-admob": "^4.0.0",
"nativescript-clipboard": "^2.0.0",
"nativescript-drop-down": "^5.0.6",
"nativescript-pdf-view": "^2.4.3",
"nativescript-permissions": "^1.3.11",
"nativescript-plugin-firebase": "^10.6.3",
"nativescript-theme-core": "^1.0.6",
"nativescript-toast": "^2.0.0",
"nativescript-ui-calendar": "^7.0.2",
"nativescript-ui-listview": "^9.0.4",
"nativescript-ui-sidedrawer": "^9.0.3",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.4.0",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular-devkit/schematics": "^10.2.1",
"#angular/cli": "^10.2.1",
"#angular/compiler-cli": "^10.2.4",
"#nativescript/android": "7.0.1",
"#nativescript/schematics": "^10.1.0",
"#nativescript/types": "^7.0.4",
"#ngtools/webpack": "^10.2.1",
"#schematics/angular": "^10.2.1",
"#schematics/update": "^0.11.4",
"node-sass": "^4.13.1",
"typescript": "^3.9.7"
},
I also tried typescript 4 but that yields more errors.
Anyone come across this issue below:
Make sure your tsconfig.json contains
"skipLibCheck": true
it appears to be coming in by default if you're generating a new project but is not being added during update process. Adding it fixed the issue for me and now I'm able to compile the app with no issues.
Below is an example of my tsconfig file:
{
"compilerOptions": {
"module": "esnext",
"target": "es2017",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": [
"es2017",
"dom"
],
"baseUrl": ".",
"paths": {
"~/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"platforms"
]
}
It is a Nativescript bug. The solution was implemented 5 days ago but there was no new release since 11 days. In the meantime you can fix it yourself. Here is the solution:
https://github.com/NativeScript/NativeScript/pull/9136/commits/619fd49186f58d4d11d0554458af1210108c89d1
I have two angular 9.1.1 project. The first one is to create an angular element and the other one is to use that element.
Node: v12.16.2
NPM: 6.14.4
package.json
{
"name": "angular-element",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:elements": "ng build --prod --output-hashing none && node build-elements.js"
},
"private": true,
"dependencies": {
"#angular/animations": "~9.1.1",
"#angular/common": "~9.1.1",
"#angular/compiler": "~9.1.1",
"#angular/core": "~9.1.1",
"#angular/elements": "^10.0.0-next.2",
"#angular/forms": "~9.1.1",
"#angular/platform-browser": "~9.1.1",
"#angular/platform-browser-dynamic": "~9.1.1",
"#angular/router": "~9.1.1",
"#webcomponents/custom-elements": "^1.4.1",
"document-register-element": "^1.7.2",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.901.1",
"#angular/cli": "~9.1.1",
"#angular/compiler-cli": "~9.1.1",
"#angular/language-service": "~9.1.1",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"concat": "^1.0.3",
"fs-extra": "^9.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
tsconfi.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
Code to concatenate build files in single file
const fs = require('fs-extra');
const concat = require('concat');
var f = []
var css = ""
fs.readdir("./dist/angular-element", function(err, items) {
for (let index = 0; index < items.length; index++) {
if(items[index].includes(".js")) {f.push("./dist/angular-element/" + items[index]);}
else if (items[index].includes(".css")) {
css = "./dist/angular-element/" + items[index];
}
}
build(f);
});
function build(files) {
fs.ensureDir('elements')
concat(files, 'elements/elements.js');
if(css != "") fs.copyFile(css, 'elements/styles.css')
}
Note:
Element works properly when you create dev build after dynamically embedding element. But it gives error while create production build using --prod in angular9.1.1
Code to dynamically adding element is:
private loader: boolean = false;
load(): void {
if (this.loader) { return; }
const path = '../../../../assets/libs/temp-web/elements.js';
const script = document.createElement('script');
script.src = path;
document.body.appendChild(script);
this.loader = true;
}
Error:
But in --prod build it gives an error.
I am not sure. You are doing everything corrent. I followed steps and I am able to create web component using angular elements.
can someone help me in this issue?
I am getting the '[launcher]: ChromeHeadless have not captured in 60000 ms, killing.' when the pipeline (Jenkins) is trying to exec the tests with karma (Puppeteer using ChromeHeadless)
We have as demmand of the client to change the launcher from Phantomjs to ChromeHeadless;
We've tried a lot of things and nothing works until now and i have no idea how to solve it.
some informations about the project configurations:
We use angular 7, karma dependencies and puppeteer as follow :
package.json
{
"name": "xxxxxxxx",
"version": "0.0.0",
"license": "my",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test -c karma.conf.js -cc --browsers MyChromeHeadless",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {
"#angular-devkit/build-angular": "^0.13.9",
"#angular/animations": "7.2.15",
"#angular/common": "7.2.15",
"#angular/compiler": "7.2.15",
"#angular/core": "7.2.15",
"#angular/forms": "7.2.15",
"#angular/http": "7.2.15",
"#angular/platform-browser": "7.2.15",
"#angular/platform-browser-dynamic": "7.2.15",
"#angular/router": "7.2.15",
"#ng-bootstrap/ng-bootstrap": "1.0.0-beta.4",
"#ngx-translate/core": "^8.0.0",
"angl-spawebbgrl": "^6.2.0",
"angular2-text-mask": "^8.0.4",
"angular2-tinymce": "2.1.2",
"angular2-ui-switch": "^1.2.0",
"bootstrap": "^3.3.7",
"core-js": "2.4.1",
"font-awesome": "^4.7.0",
"intl": "^1.2.5",
"jquery": "^3.4.1",
"moment": "^2.24.0",
"ng2-bs3-modal": "^0.10.4",
"ng2-translate": "^5.0.0",
"ngx-bootstrap": "1.9.3",
"ngx-toastr": "^6.5.0",
"puppeteer": "^2.0.0",
"rxjs": "6.5.3",
"rxjs-compat": "^6.0.0-rc.0",
"text-mask-addons": "^3.7.0",
"tslib": "^1.9.0",
"xlsx": "^0.12.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"#angular/cli": "^7.3.9",
"#angular/compiler-cli": "^7.2.15",
"#angular/language-service": "^7.2.15",
"#types/jasmine": "3.4.6",
"#types/jasminewd2": "2.0.8",
"#types/node": "8.10.59",
"bower-art-resolver": "^2.0.10",
"chai": "4.2.0",
"codelyzer": "3.0.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "^4.4.1",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "3.1.0",
"karma-cli": "2.0.0",
"karma-coverage": "^2.0.1",
"karma-coverage-istanbul-reporter": "2.1.0",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.4.2",
"karma-junit-reporter": "2.0.1",
"karma-mocha": "^1.1.1",
"karma-sinon": "1.0.5",
"mocha": "^6.2.2",
"mocha-junit-reporter": "1.23.1",
"protractor": "^6.0.0",
"selenium-webdriver": "^3.6.0",
"sinon": "1.17.5",
"ts-node": "3.0.4",
"tslint": "5.3.2",
"typescript": "^3.1.1"
},
"optionalDependencies": {
}
}
Our karma configuration:
karma.conf.js
module.exports = function (config) {
const process = require('process');
process.env.CHROME_BIN = require('puppeteer').executablePath();
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-coverage'),
require('karma-coverage-istanbul-reporter'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('#angular-devkit/build-angular/plugins/karma')
],
files:[
'src/test.ts'
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true,
dir: 'coverage',
'report-config': { html: { subdir: 'html'} }
},
reporters: ['progress', 'kjhtml', 'coverage'],
port: 9876,
logLevel: config.LOG_DEBUG,
autoWatch: false,
singleRun: true,
browsers: ['MyChromeHeadless'],
customLaunchers: {
MyChromeHeadless: {
base: 'ChromeHeadless',
flags: [
'--no-sandbox',
'--proxy-auto-detect'
]
}
}
});
};
This error occurs when jenkins try to exec the tests, but locally runs everything ok. This problem is specific of the pipeline that is running over a linux machine;
Has someone to help me to get '[launcher]: ChromeHeadless have not captured in 60000 ms, killing.' fixed?
Any advice will be welcome. Tkx!
Just checking, but are you sure a valid version of Chrome is installed on the pipelined machine, and that the path is set so the launcher can find it?
It sounds like the laucher is timing out just trying to fire up HC, and the most obvious issue whould be it not being able to find a version to run.
i discovered how to solve this issue.
The client has a proxy-blocker to manage the networking configurations. So i provided the proxy as server in the customLauncher flag and works perfectly, but only in the pipeline, locally the tests stopped. but it's just take off the proxy that runs locally.
Before: This way the tests runs locally, but do not works in the jenkins pipeline (npm run test)
browsers: ['MyChromeHeadless'],
customLaunchers: {
MyChromeHeadless: {
base: 'ChromeHeadless',
flags: [
'--no-sandbox',
'--proxy-auto-detect'
]
}
}
After: This way the tests runs in the pipeline, but do not works locally cuz i'm not under the client networking with access to the proxy provied
browsers: ['MyChromeHeadless'],
customLaunchers: {
MyChromeHeadless: {
base: 'ChromeHeadless',
flags: [
'--no-sandbox',
'--proxy-bypass-list=*',
'--proxy-server=http://proxy.your.company'
]
}
}
I have been researching on this issue but was not able to find any solution below is the error that i get while running the ng test build in Continues Integration build command prompt.
"message": "An error was thrown in afterAll\nUncaught [object Object] thrown",
"str": "An error was thrown in afterAll\nUncaught [object Object] thrown"
Below is my karma config.js:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: [
'jasmine', '#angular-devkit/build-angular'
],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma'),
require('karma-trx-reporter')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: [
'html', 'lcovonly', 'cobertura'
],
fixWebpackSourcePaths: true
},
junitReporter: {
outputDir: require('path').join(__dirname, '../coverage'),
outputFile: 'cobertura-coverage.xml'
},
reporters: [
'progress', 'kjhtml', 'trx'
],
// the default configuration
trxReporter: {
outputFile: 'test-results.xml',
shortTestName: false
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
Below is my Package.json:
{
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test --code-coverage --watch=false --browsers=ChromeHeadless",
"lint": "ng lint",
"e2e": "ng e2e",
},
"private": true,
"dependencies": {
"#angular/animations": "^7.1.0",
"#angular/common": "^7.1.0",
"#angular/compiler": "^7.1.0",
"#angular/core": "^7.1.0",
"#angular/forms": "^7.1.0",
"#angular/http": "^7.1.0",
"#angular/platform-browser": "^7.1.0",
"#angular/platform-browser-dynamic": "^7.1.0",
"#angular/router": "^7.1.0",
"#ng-bootstrap/ng-bootstrap": "^4.0.1",
"#types/applicationinsights-js": "^1.0.7",
"applicationinsights-js": "^1.0.20",
"core-js": "^2.5.7",
"moment": "^2.22.2",
"moment-es6": "^1.0.0",
"oidc-client": "^1.5.4",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.1",
"#angular/cli": "^7.0.4",
"#angular/compiler-cli": "^7.1.0",
"#angular/language-service": "^7.1.0",
"#types/jasmine": "^3.3.0",
"#types/jasminewd2": "^2.0.6",
"#types/node": "^10.12.10",
"codelyzer": "~4.5.0",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-junit-reporter": "^1.2.0",
"karma-trx-reporter": "^0.4.0",
"protractor": "^5.4.1",
"ts-node": "~7.0.1",
"tslint": "~5.11.0",
"tslint-consistent-codestyle": "^1.14.1",
"tslint-defocus": "^2.0.5",
"tslint-eslint-rules": "^5.4.0",
"tslint-origin-ordered-imports-rule": "^1.1.2",
"tslint-rxjs-subject-restrictions-rule": "^1.0.4",
"tslint-sonarts": "^1.8.0",
"typescript": "3.2.4",
"webpack-dev-server": "^3.1.10"
}
}
How to log the specific file name that is causing this issue as it is very difficult to debug looking at this error.
any suggestion is highly appreciated.
and also i am aware that in local i don't see any such errors while running "ng test"/"npm run package"(Headless chrome).But only i get to see this error in Continuous Integration build console command prompt.
I also faced a similar issue, which occurs intermittently when we run ng test locally, as well.
The question question helped in resolving this issue:
Karma Start Fails - HeadlessChrome - ERROR Uncaught [object Object]
I am using asp.net core,typescript and angular2 for building a website. IDE is Visual studio 2015 Update3.
The issues:
Error message:
cannot find module '#angular/core'
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
But the project still can be built successed.
I have two projects using the same code structure and this issue only happens in one project.
Have any idea? Thanks!
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"noEmitOnError": false,
"noImplicitAny": false,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"moduleResolution": "node"
},
"exclude": [
"wwwroot",
"node_modules"
//"typings/index.d.ts"
],
"compileOnSave": true
}
package.json
{
"version": "1.0.1",
"name": "asp.net",
"private": true,
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"#angular/http": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/router": "3.0.0-beta.1",
"#angular/router-deprecated": "2.0.0-rc.2",
"#angular/upgrade": "2.0.0-rc.4",
"angular2-in-memory-web-api": "0.0.14",
"reflect-metadata": "^0.1.3",
"core-js": "^2.4.0",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean": "0.3.2",
"gulp-jshint": "2.0.1",
"gulp-uglify": "1.5.4",
"gulp-uglifycss": "1.0.6",
"gulp-concat": "^2.6.0",
"gulp-rename": "^1.2.2",
"jshint": "2.9.2",
"jshint-stylish": "2.2.0",
"pump": "1.0.1"
}
}
Update:
I copied the same codes to a new project. everything works fine.
how can the project recognise the variable #angular and know which folder should be found?
Update:
I fixed this issue, but i don't know why.
there was a folder named 'src' under 'project/bin' folder. the src folder contains some DLL files. The DLL files cannot be deleted because "the source file names are larger than is supported by the file system", after i change the name shorter and delete the folder src. This issue is fixed.