_lazy_route_resource lazy namespace object - angular5

I'm using angular compiler:
const AngularCompilerPlugin = require('#ngtools/webpack').AngularCompilerPlugin;
With these compiler options:
"angularCompilerOptions": {
"genDir": "./build/compiled",
"outDir": "./build/compiled",
"skipMetadataEmit": true,
"debug": true},
Relevant part of my package.json is:
"#ngtools/webpack": "^6.0.0",
"#angular/router": "^5.2.0",
"webpack": "4.8.3",
"webpack-cli": "2.1.4",
And my angularCompilerPlugin config is:
new AngularCompilerPlugin({
tsConfigPath: 'path-to-tsconfig.webpack.json',
entryModule: 'path-to-app.module#AppModule',
sourceMap: true
}),
With these configurations, I'm getting:
ERROR in ./$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve 'path-/alerts/module.ngfactory.js' in 'path-to-app-folder/$$_lazy_route_resource'
# ./$$_lazy_route_resource lazy namespace object
# ./node_modules/#angular/core/esm5/core.js
# multi core-js/shim classlist.js reflect-metadata zone.js/dist/zone jquery/dist/jquery rxjs/Rx lodash jquery.panzoom moment moment-timezone #angular/common #angular/core #angular/http #angular/router #angular/forms semantic
Please any direction or help.

I was able to resolve this error by adding the Lazy Module .ts paths to my ts.config-aot.json in the files section:
{
"compilerOptions": {
"target": "es5", //most browsers currently understand this version of Javascript
"experimentalDecorators": true, //Angular2 uses Component,Injectable etc
"emitDecoratorMetadata": true, //Required for Angular2 to use the metadata in our components
"types": [
"node",
"jasmine"
],
"lib": [
"es2015",
"es2015.iterable",
"dom"
]
},
"exclude": [
"node_modules"
],
"files": [
"src/app/app.module.ts",
"src/main.ts",
"src/app.d.ts",
"src/app/sandbox/sandbox.module.ts",
"src/app/supplier-xchange/supplier-xchange.module.ts",
"src/app/company-profile/company-profile.module.ts",
"src/app/bom/bom.module.ts",
"src/app/custom-price-column/custom-price-column.module.ts",
"src/app/neca/neca.module.ts"
]
}

Related

Definition for rule '#typescript-eslint/no-shadow' was not found

Not sure what's going on here.
I am working on migrating from tslint to eslint. The basic migration seems to have gone smoothly (well, "smoothly" -- got some kinds in the rules that need to get worked out apparently), but I've run across this and I have no idea how to get past it:
1:1 error Definition for rule '#typescript-eslint/no-shadow' was not
found #typescript-eslint/no-shadow
I've modified the .eslintrc.js file like so (parts snipped for brevity):
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": [
"eslint-plugin-import",
"#angular-eslint/eslint-plugin",
"#typescript-eslint",
"#typescript-eslint/tslint"
],
"rules": {
// Many unrelated plugins, all rules, none mentioning no-shadow
"no-shadow": "off",
"#typescript-eslint/no-shadow": ["error", { "hoist": "all" }],
// Many other unrelated plugins, all rules, none mentioning no-shadow. But I thought
// This next one may be helpful.
"#typescript-eslint/tslint/config": [
"error",
{
"rules": {
"import-spacing": true,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
]
}
};
The versions of the plugins I'm working with are (copied from package.json):
"eslint-plugin-import": "^2.19.1",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
I'm at a loss as to what's going on, and my google searches have turned up nothing aside from "use "no-shadow": "off", which I do.
v2.34.0 of the typescript-eslint packages is 9 months old.
Upgrade to a more recent version of typescript-eslint.
#typescript-eslint/no-shadow was added in v4.0.0

mocha cannot compile ES6, even with correct options

I'd like to run mocha on a test directory. My tests are written in ES6, therefore I added babel to compile them. Although, even after adding all required modules, and adding a mocha.opts file inside of my test directory, I still get this error
{ import sinon from 'sinon';
^^^^^
SyntaxError: Unexpected identifier
mocha.opts :
--slow 2000
--timeout 15000
--require #babel/register
--recursive test/src
package.json command:
"test": "mocha"
modules :
"#babel/cli": "^7.2.3",
"#babel/core": "^7.3.4",
"#babel/plugin-transform-runtime": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#babel/register": "^7.4.0",
"#babel/runtime": "^7.3.4",
If anything, I also added a .babelrc file in my test directory
{
"presets": ["#babel/preset-env"],
"plugins": [
[
"#babel/plugin-transform-runtime",
{
"helpers": true,
"regenerator": true
}
]
]
}
Did I miss something ?
I had exactly the same issue, and your question gave me the answer. My .babelrc file looks like this:
{
"presets": ["#babel/preset-env"],
"comments": false,
"env": {
"test": {
"presets": [
"#babel/preset-env"
]
},
// ...Other environment settings...
},
"plugins": ["#babel/plugin-transform-runtime"]
}
Removing the helpers and regenerator parameter worked for me.

How to workaround the "Unexpected Token Operator (>)" error when packaging a React app?

I am having some problems building the distributable package for a React app.
I'm trying to execute the following sentence:
rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/prod.js
And receiving this error:
ERROR in a86e50ffd4893c44fdfd.app.js from UglifyJs Unexpected token:
operator (>) [a86e50ffd4893c44fdfd.app.js:10679,43]
The line indicated in that trace corresponds to one of the libraries being loaded as dependencies, and not to the actual code of my app. This is the line itself (line 10679 corresponds to the declaration of the const method with the arrow function):
const DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES = '';
/* unused harmony export DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES */
const getAllColumnLabels = (columnLabels) => {
const columnNames = [];
columnLabels.forEach((value) => {
columnNames.push(value.label);
});
return columnNames;
};
At first I thought it could be related to Babel config, but it is identical to another project which is building correctly. The content of my .babelrc file is shown below, loaded using babel-preset-env:
{
"presets": [
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true
}
]
]
}
An additional test to rule out some possibilities has been done using the default presets for Babel, though no success was achieved with this test.
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
The settings in tsconfig.json could also be of interest, so i'm showing them here even though they also are identical to the ones in this another project mentioned above, which builds correctly:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react",
"noLib": false,
"allowJs": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
},
"compileOnSave": true,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
I've tried to delete node_modules and re-install the dependencies, also played setting uglify to false in the env for Babelrc, but surprisingly (at least, to me!) it didnt help.
There is a thread in the webpack-contrib Github site which is marked as closed but I didnt find anything that helped me.
Any ideas? I have some experience with npm but this issue certainly is blocking me.
Thanks!
Updating webpack to version 4 (currently 4.17) solved the problem. A few other dependencies needed to be updated to work properly with webpack 4, most importantly the Extract Text Webpack Plugin hasn't at this moment a stable release that works with webpack4, but the 4.0.0-beta works around the issue and may be used until a better replacement is found.

Module build failed: Error: index.ts is missing from the TypeScript compilation

Description of the project: My project is downloading to node_module via package.json
Package.json
....
dependencies:{
....
"#myllc/application-core": "git+ssh://git#bitbucket.org/myllc/application-core.git",
"#myllc/application-shared":"git+ssh://git#bitbucket.org/myllc/application-shared.git",
}
....
Gotting error when doing "npm build":
ERROR in ./node_modules/#myllc/application-core/index.ts Module
build failed: Error:
/var/www/frontend-skeleton/node_modules/#myllc/application-core/index.ts is missing from the TypeScript compilation. Please make sure it is in
your tsconfig via the 'files' or 'include' property. The missing file
seems to be part of a third party library. TS files in published
libraries are often a sign of a badly packaged library. Please open an
issue in the library repository to alert its author and ask them to
package the library using the Angular Package Form at
(https:// goo.gl/jB3GVv).
This appear after upgrade from Angular4 to Angular5:
Tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es2016",
"dom"
],
"typeRoots": [
"node_modules/#types"
]
}
}
I tried to add
"include": [
"./node_modules/#myllc/**/*"
]
but there appear same error at deeper folder .ts file. Also founding
https://github.com/angular/angular-cli/issues/8284
but nothing solved this error.
What is the solution?
The solution is found in index.ts is not part of the compilation. #8284 by tapaz1 :
2 tsconfig.json files, one at the root of the app, and the other inside the src folder (one level down from the root) named tsconfig.app.json that extends the main tsconfig.json. I explicitly added the package that I needed that wasn't being transpiled by Typescript in the "include" array, and like a lot of people here I was getting the *.spec.ts files included despite having them in "exclude" option, so I removed it from the tsconfig.json. The fix was adding the "exclude" option to the second (extended) tsconfig.app.json file.
tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../dist",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"../node_modules/your_package/**/*.spec.ts"
]
}

How to configure WebStom with Webpack for Angular2 (cannot find module)?

I am using WebStorm and webpack and since my tsconfig is set to node_modules, WebStorm does not recongnize the paths for any of my modules and thus the TypeScript that is bundled with WebStorm emits errors as you can see in my attachments...
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"moduleResolution": "node",
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitHelpers": false,
"sourceMap": true,
"noResolve": false
},
"filesGlob": [
"./**/*.ts",
"!./node_modules"
],
"exclude": [
"node_modules",
"typings"
],
"compileOnSave": true,
"buildOnSave": true
}
Errors in Webstorm:
wondering if there is a way to make Webstorm be Webpack and ng2 aware using TypeScript...
TX
Sean
tx for the reply... it was just fixed in WebStorm latest EA... version 144.3143.5 regards