I am trying to create Angular 2 sample ngc and JIT compiler. With JIT compiler i can run the sample but with ngc compiler am facing issue with component.html file path.
npm run ngc
ejangular2-systemjs-starter#1.0.0 ngc E:\AOT\seed-application-changes\sample-AOT
"node" copy-dist-files.js && rollup -c rollup-config.js && ngc -p tsconfig-aot.json
Error: Compilation failed. Resource file not found: E:/AOT/seed-application-changes/sample-AOT/src/src/app.
component.html
at ModuleResolutionHostAdapter.readResource (E:\AOT\seed-application-changes\sample-AOT\node_modules\#a
ngular\compiler-cli\src\compiler_host.js:291:19)
at CompilerHost.loadResource (E:\AOT\seed-application-changes\sample-AOT\node_modules\#angular\compiler
-cli\src\compiler_host.js:230:85)
at Object.get (E:\AOT\seed-application-changes\sample-AOT\node_modules\#angular\compiler\bundles\compil
er.umd.js:26365:111)
at DirectiveNormalizer._fetch (E:\AOT\seed-application-changes\sample-AOT\node_modules\#angular\compile
r\bundles\compiler.umd.js:13744:47)
at DirectiveNormalizer.normalizeTemplateAsync (E:\AOT\seed-application-changes\sample-AOT\node_modules\
#angular\compiler\bundles\compiler.umd.js:13790:25)
Below are my configuration.
sample structure
rollup.config.js
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'
export default {
entry: 'src/main.js',
dest: 'aot/build.js', // output a single application bundle
sourceMap: false,
format: 'iife',
onwarn: function(warning) {
// Skip certain warnings
// should intercept ... but doesn't in some rollup versions
if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
// intercepts in some rollup versions
if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
// console.warn everything else
console.warn( warning.message );
},
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: 'node_modules/rxjs/**',
}),
uglify()
]
}
tsconfig-aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"src/app.module.ts",
"src/main-aot.ts"
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
}
package.json
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w",
"ngc": "\"node\" copy-dist-files.js && rollup -c rollup-config.js && ngc -p tsconfig-aot.json",
"serve": "lite-server -c bs-config.aot.json"
},
Related
I need my webdriver tests use a specified chromedriver in a directory.
The problem is that when I run the tests it always uses a different chromedriver exe that was set as a default.
Command: "wdio run wdio.ci.conf.ts"
I get : "chromedriver: Starting ChromeDriver 97.0.4692.71"
ChromeDriver 97 is found in \node_modules\chromedriver\lib\chromedriver\chromedriver.exe
However in the wdio.ci.conf.ts file I set it to
services:[ ['chromedriver',{
chromeDriverCustomPath:"src\\main\\cucumber-webdriver-io\\node_modules\\webdriver-manager\\selenium\\chromedriver.exe"
}]],
At this location Im expecting it to pick an older version of chrome driver, 95.0.4638.69
I need it to run an older version as the corporate Jenkins environment has upgraded Chrome yet. In Jenkins I get the error:
WARN webdriver: Request failed with status 500 due to session not created: This version of ChromeDriver only supports Chrome version 97
[INFO] [0-0] Current browser version is 95.0.4638.69 with binary path /usr/bin/google-chrome
Thanks for your help
wdio.ci.conf.ts (removed the comments to be more brief)
const report = require('multiple-cucumber-html-reporter');
export const config: WebdriverIO.Config = {
autoCompileOpts: {
autoCompile: true,
tsNodeOpts: {
transpileOnly: true,
project: 'tsconfig.json'
}
}
},
specs: [
'./features/**/*.feature'
],
exclude: [
// 'path/to/excluded/files'
],
maxInstances: 10,
capabilities: [{
maxInstances: 5,
//
browserName: 'chrome',
'goog:chromeOptions':{
args: [ '--disable-dev-shm-usage', '--headless', '--no-sandbox', '--ignore-certificate-errors', '--test-type','--auth-server-whitelist=*bp.com', '--window-size=1440,1024', '--start-maximized']
},
acceptInsecureCerts: true,
}],
logLevel: 'info',
bail: 0,
baseUrl: 'http://localhost',
waitforTimeout: 10000,
connectionRetryTimeout: 120000,
connectionRetryCount: 3,
services:[ ['chromedriver',{
chromeDriverCustomPath:"src\\main\\cucumber-webdriver-io\\node_modules\\webdriver-manager\\selenium\\chromedriver.exe"
}]],
framework: 'cucumber',
reporters: ['cucumberjs-json'],
cucumberOpts: {
// <string[]> (file/dir) require files before executing features
require: ['./features/step-definitions/*-steps.ts'],
// <boolean> show full backtrace for errors
backtrace: false,
// <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
requireModule: [],
// <boolean> invoke formatters without executing steps
dryRun: false,
// <boolean> abort the run on first failure
failFast: false,
// <boolean> hide step definition snippets for pending steps
snippets: true,
// <boolean> hide source uris
source: true,
// <boolean> fail if there are any undefined or pending steps
strict: false,
// <string> (expression) only execute the features or scenarios with tags matching the expression
tagExpression: '',
// <number> timeout for step definitions
timeout: 60000,
// <boolean> Enable this config to treat undefined definitions as warnings.
ignoreUndefinedDefinitions: false
},
onComplete: function(exitCode, config, capabilities, results) {
report.generate({
jsonDir: '.tmp/json/',
reportPath: '.tmp/report/'
});
},
}
package.json
{
"name": "cucumber-webdriver-io",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wdio": "wdio run wdio.conf.ts",
"wdio-ci": "wdio run wdio.ci.conf.ts",
"postinstall": "rimraf -rm node_modules/wdio-html-nice-reporter/node_modules/#wdio/types"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"cucumber": "^7.0.0-rc.0",
"expect-webdriverio": "^3.1.4",
"multiple-cucumber-html-reporter": "^1.18.3"
},
"devDependencies": {
"#types/chai": "^4.3.0",
"#types/node": "^17.0.12",
"#types/webdriverio": "^5.0.0",
"#wdio/cli": "^7.16.13",
"#wdio/cucumber-framework": "^7.16.13",
"#wdio/local-runner": "^7.16.13",
"#wdio/spec-reporter": "^7.16.13",
"#wdio/types": "^7.16.13",
"chai": "^4.3.6",
"chromedriver": "^97.0.2",
"cucumber-html-reporter": "^5.5.0",
"fs-extra": "^10.0.0",
"ts-node": "^10.4.0",
"typescript": "^4.5.5",
"wdio-chromedriver-service": "^7.2.6",
"wdio-cucumberjs-json-reporter": "^4.2.0",
"webdriver-manager": "^12.1.8",
"webdriverio": "^7.16.13"
}
}
Missed spelled
chromeDriverCustomPath >> chromedriverCustomPath
I tried to start my project with npm run start:prod command but got
Error: Cannot find module {path to my project}\dist\main.js'.
I have tried to rename the path to all my files in the project from src/myController to ../myController .
My package.json (scripts)
"scripts": {
"build": "tsc -p tsconfig.build.json",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "ts-node -r tsconfig-paths/register src/main.ts",
"start:dev": "concurrently \"wait-on dist/main.js && nodemon\" \"tsc -w -p tsconfig.json\" ",
"start:debug": "nodemon --config nodemon-debug.json",
"prestart:prod": "rimraf dist && npm run build",
"start:prod": "node dist/main.js"
My tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"noImplicitAny": false,
"removeComments": true,
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"sourceMap": true,
"rootDir": ".",
"outDir": "../dist",
"baseUrl": "./src"
},
"include": [ "./src/**/*.ts", ],
"exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/__test__/*"]
}
The actual output:
nest-typescript-starter#1.0.0 prestart:prod
{path to my project}
rimraf dist && npm run build
nest-typescript-starter#1.0.0 build
{path to my project}
tsc -p tsconfig.build.json
nest-typescript-starter#1.0.0 start:prod
{path to my project}
node dist/main.js
internal/modules/cjs/loader.js:584
throw err;
^
Error: Cannot find module
{path to my project}\dist\main.js'
Okeey, I was a little dumb. The answer is very easy. In package.json you need change line from "start:prod": "node dist/main.js" to "start:prod": "node dist/src/main.js". In tsconfig.json you need change "outDir": "../dist" to "outDir": "./dist"
you can just add a new command:
under the scripts in package.json :
"start:live": "rimraf dist && nest build && node dist/src/main",
then you can run:
npm run start:live
I can not deploy my functions when I try to import a .json credential file.
When running firebase init functions I selected the TypeScript
option.
Then I put my functions in TypeScript and tried loading the .json
file with the credentials of my project in order to use
firebase-admin.
/functions (Directory)
tsconfig.json
{
"compilerOptions": {
"lib": ["es6"],
"module": "commonjs",
"noImplicitReturns": true,
"outDir": "lib",
"sourceMap": true,
"target": "es6",
"types" : [ "node" ],
"esModuleInterop": true,
"resolveJsonModule": true,
},
"compileOnSave": true,
"include": [
"src",
"./typings.d.ts"
]
}
typings.d.ts:
declare module "*.json" {
const value: any;
export default value;
}
package.json:
{
"name": "functions",
"scripts": {
"lint": "tslint --project tsconfig.json",
"build": "tsc",
"serve": "npm run build && firebase serve --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"main": "lib/index.js",
"dependencies": {
"firebase-admin": "~6.0.0",
"firebase-functions": "^2.0.3"
},
"devDependencies": {
"tslint": "~5.8.0",
"typescript": "~2.8.3"
},
"private": true
}
functions/src/
-- serviceAccountKey.json
-- index.ts
index.ts:
import * as admin from 'firebase-admin';
import * as serviceAccount from './serviceAccountKey.json';
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "DATABASE-URL"
});
If I remove the import works normally, I can not deploy when I import the file.
Error:
i deploying functions
Running command: npm --prefix "functions" run lint
> functions# lint Z:\functions
> tslint --project tsconfig.json
Running command: npm --prefix "functions" run build
> functions# build Z:\functions
> tsc
tsconfig.json(11,5): error TS5023: Unknown compiler option 'resolveJsonModule'.
+ functions: Finished running predeploy script.
i functions: ensuring necessary APIs are enabled...
+ functions: all necessary APIs are enabled
i functions: preparing functions directory for uploading...
Error: Error parsing triggers: Cannot find module './serviceAccountKey.json'
Try running "npm install" in your functions directory before deploying.
You should use require() (not import) to pull in the contents of a JSON file. If you really must use import (I don't recommend it), read this.
If I remove the import works normally, I can not deploy when I import the file.
A few tsconfig options are missing:
"esModuleInterop": true,
"resolveJsonModule": true,
When I tried to run unit tests using mocha, I got the following error:
> plan#1.0.0 test /root/project/plan
> NODE_PATH=app/scripts:test mocha
/root/project/plan/test/specHelper.js:3
import chai from 'chai';
^^^^^^
SyntaxError:
Unexpected reserved word
------------------------
Apparently mocha fails to apply babel to the new es6 syntax.
Here is the content of the specHelper file:
import chai from 'chai';
import sinonChai from 'sinon-chai';
import chaiEnzyme from 'chai-enzyme';
chai.use(sinonChai);
chai.use(chaiEnzyme());
chai.config.includeStack = true;
GLOBAL.expect = chai.expect;
GLOBAL.AssertionError = chai.AssertionError;
GLOBAL.Assertion = chai.Assertion;
GLOBAL.assert = chai.assert;
Here is the content of mocha.opts
--reporter min
--ui bdd
--compilers js:babel-register,less:test/ignoreCompiler,css:test/ignoreCompiler
--recursive
When I run webpack to build source code, I do not encounter any issue.
NODE_ENV=production webpack -p --config webpack.config.js
Module part in the Webpack.config.js
config.devtool = 'cheap-module-eval-source-map';
config.entry.push('webpack-dev-server/client?http://127.0.0.1:8892');
config.entry.push('webpack/hot/only-dev-server');
config.entry.push('react-hot-loader/patch');
config.output.publicPath = 'http://127.0.0.1:8892/';
config.module.rules.push({
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/,
include: [path.join(__dirname, 'app'), path.join(__dirname, 'test')],
});
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new webpack.NoErrorsPlugin());
Content in .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["last 2 versions", "ie >= 10"]
}
}],
"react",
"stage-0"
],
"env": {
"es": {
"presets": [["env", { "loose": true, "modules": false }], "react", "stage-0"]
},
"test": {
"presets": [
["env", {
"targets": {
"node": "7.10.1"
}
}],
"react",
"stage-0"
]
}
}
}
What did I missed in term of configuration and caused this SyntaxError?
I followed a piece of code building and app that collect data from last.fm using angular2, typescript and firebase.
the source code can be found here: https://github.com/vtts/mytunes
QUESTION how can I cast the results from the json calls?
Source code on github
https://github.com/vtts/mytunes/blob/master/app/music/services/music.srv.ts
I receive the following errors:
app/music/services/music.service.ts(29,39): error TS2339: Property 'results' does not exist on type 'Response'.
app/music/services/music.service.ts(51,36): error TS2339: Property 'album' does not exist on type 'Response'.
package.json
{
"name": "mytunes",
"version": "1.0.0",
"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": {
"angular2": "2.0.0-beta.15",
"bootstrap": "^3.3.6",
"es6-shim": "^0.35.0",
"firebase": "^2.4.2",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.26",
"zone.js": "0.6.10"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^0.7.12"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "js"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Last.fm REST API
I am using the following REST APIs:
http://www.last.fm/api/show/album.search
http://www.last.fm/api/scrobbling
Instead of reusing the variable res which is typed as Response
res = res.json();
create a new one
let result = res.json();
and then use result for the following lines instead of res