Unhandled Promise Rejection in Angular 2 - angularjs

Few minutes ago, i just run into a 404 error in my angular 2 app. There are no errors in my terminal although there are some 404 errors in my console. I have included bootstrap in my node_modules in the angular-cli.json file. However, i dont't know where the unhandled promise rejection is coming from. Any idea on how to resolve this issue?
**404 error**
Unhandled Promise rejection: Failed to load ../bootstrap/css/bootstrap.min.css ; Zone: <root> ; Task: Promise.then ; Value: Failed to load ../bootstrap/css/bootstrap.min.css undefined
ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Failed to load ../bootstrap/css/bootstrap.min.css
at resolvePromis…, rejection: "Failed to load ../bootstrap/css/bootstrap.min.css", promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}
GET http://localhost:4200/css/local.css 404 (Not Found)
**angular-cli**
{
"project": {
"version": "1.0.0-beta.28.3",
"name": "frontend"
},
"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": "app",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
],
"scripts": [
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}

You made mistake in your app.dashboard.html as below,
Which should be as

Related

Nextjs React Rollup Module You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

I have been trying everything I can find online to solve this error. Based on what I have read this module is configured correctly, but still errors. I am using yalc to link to the main project. Using npx rollup -c --bundleConfigAsCjs to compile.
Error
./node_modules/test-wordpress/dist/index.d.ts
Module parse failed: Unexpected token (3:8)
You may need an appropriate loader to handle this file type, currently no loaders are
configured to process this file. See https://webpack.js.org/concepts#loaders
| import { sendForm } from "./ContactForm7";
| import { getPage } from "./Wordpress";
> declare const _default: {
| getPage: typeof getPage;
| sendForm: typeof sendForm;
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"jsx": "react",
"module": "esnext",
"sourceMap": true,
"declaration": true,
"outDir": "dist"
},
"include": [
"src"
, "src/index.tsx"
]
}
rollup.config.cjs
import typescript from '#rollup/plugin-typescript';
export default {
input: {
Wordpress: 'src/Wordpress.tsx',
ContactForm7: 'src/ContactForm7.tsx'
},
output: {
dir: 'dist',
format: 'cjs',
sourcemap: true,
},
plugins: [
typescript()
],
external: ['react'],
};
package.json
{
"name": "test-wordpress",
"version": "1.0.2",
"description": "Wordpress test project",
"main": "./dist/index.d.ts",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/test-project/wordpress.git"
},
"author": "Paul Winter",
"license": "ISC",
"bugs": {
"url": "https://github.com/test-project/wordpress/issues"
},
"homepage": "https://github.com/test-project/wordpress#readme",
"devDependencies": {
"#types/node": "^18.11.18",
"rollup": "^3.9.1",
"rollup-plugin-typescript": "^1.0.1"
},
"dependencies": {
"#rollup/plugin-typescript": "^11.0.0",
"axios": "^1.2.2",
"memory-cache": "^0.2.0"
}
}

Nx shared asset library

I want my React app in my Nx monorepo to retrieve all the assets in my asset library called common-assets.
I managed to do it with my NextJS app like so :
project.json of my NextJS app
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/clients",
"projectType": "application",
"implicitDependencies": ["common-assets"],
"targets": {
"build": {
"executor": "#nrwl/next:build",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"root": "apps/clients",
"outputPath": "dist/apps/clients",
"assets": [
{
"input": "libs/common/assets/src/lib",
"glob": "**/*",
"output": "assets"
}
]
},
...
}
I tried to do the exact same thing for my react App by modifying the asset key in the project.json
project.json of my React app :
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/sellers/src",
"projectType": "application",
"implicitDependencies": ["common-assets"],
"targets": {
"build": {
"executor": "#nrwl/web:webpack",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"compiler": "babel",
"outputPath": "dist/apps/sellers",
"index": "apps/sellers/src/index.html",
"baseHref": "/",
"main": "apps/sellers/src/main.tsx",
"polyfills": "apps/sellers/src/polyfills.ts",
"tsConfig": "apps/sellers/tsconfig.app.json",
"assets": [
"apps/sellers/src/favicon.ico",
"apps/sellers/src/assets",
{
"input": "libs/common/assets/src/lib",
"glob": "**/*",
"output": "src/assets"
}
],
"styles": ["apps/sellers/src/styles.scss"],
"scripts": [],
"webpackConfig": "#nrwl/react/plugins/webpack"
},
"configurations": {
"development": {
"extractLicenses": false,
"optimization": false,
"sourceMap": true,
"vendorChunk": true
},
"production": {
"fileReplacements": [
{
"replace": "apps/sellers/src/environments/environment.ts",
"with": "apps/sellers/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false
}
}
},
"serve": {
"executor": "#nrwl/web:dev-server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "sellers:build",
"hmr": true
},
"configurations": {
"development": {
"buildTarget": "sellers:build:development"
},
"production": {
"buildTarget": "sellers:build:production",
"hmr": false
}
}
},
"lint": {
"executor": "#nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["apps/sellers/**/*.{ts,tsx,js,jsx}"]
}
},
"test": {
"executor": "#nrwl/jest:jest",
"outputs": ["coverage/apps/sellers"],
"options": {
"jestConfig": "apps/sellers/jest.config.ts",
"passWithNoTests": true
}
}
},
"tags": []
}
But it's not working...
I kept assets into image folder and
"assets": [
"apps/boost/src/favicon.ico",
"apps/boost/src/assets",
{
"input": "libs/common-assets/assets/src/lib/images",
"glob": "**/*",
"output": "assets"
}
],
I'm able to use it into other project as well
<img alt="logo" src="/assets/logo.png" />
Do this:
{
"input": "./libs/common-assets/src/lib/images",
"glob": "**/*",
"output": "/assets/"
}
Then access it with:
<img alt="logo" src="assets/logo.png" />

Problem installing react#18 - why can I not install the package?

I can't install react#18 because i get the following error
Raw JSON explanation object:
{
"code": "ERESOLVE",
"current": {
"name": "react",
"version": "18.0.0",
"whileInstalling": {
"name": "cap",
"version": "0.1.0",
"path": "/Users/dheld/pollopi/cap"
},
"location": "node_modules/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react",
"spec": "^18.0.0",
"from": {
"location": "/Users/dheld/pollopi/cap"
}
}
]
},
"currentEdge": {
"type": "prod",
"name": "react",
"spec": "^18.0.0",
"from": {
"location": "/Users/dheld/pollopi/cap"
}
},
"edge": {
"type": "peer",
"name": "react",
"spec": "<18.0.0",
"error": "INVALID",
"from": {
"name": "#testing-library/react",
"version": "12.1.5",
"whileInstalling": {
"name": "cap",
"version": "0.1.0",
"path": "/Users/dheld/pollopi/cap"
},
"location": "node_modules/#testing-library/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "#testing-library/react",
"spec": "^12.0.0",
"from": {
"location": "/Users/dheld/pollopi/cap"
}
}
]
}
},
"strictPeerDeps": false,
"force": false
}
I already tried to install #testing-library/react globally and in the folder but both doesn't work
React 16 I can install without any problems
What you see in the code segment is the output of the file eresolve-report.txt
Maybe someone has a solution for :)
Thanks so much!!!
What I understand from the error message, is that the #testing-library/react package requires a React version prior to 18. So you cannot install React 18, at least while it's not supported by testing-library.
You could try the following:
npm install react-html-parser --legacy-peer-deps

Angular ng serve not work:The serve command requires to be run in an Angular project, but a project definition could not be found

When I used ng serve in my Angular project (in to correct place) its show this error in cmd.
The serve command requires to be run in an Angular project, but a project definition could not be found.
I try this also
Angular Cli Error: The serve command requires to be run in an Angular project, but a project definition could not be found
but this also not work for me.
I tried also to delete node-module and reinstall, but not work. When I used npm start it work.
Why? What is the problem?
My angular-cli.json code here
"project": {
"version": "1.0.0-beta.28.3",
"name": "angular-src"
},
"apps": [
{
"root": "src",
"outDir": "../public",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
ng update #angular/cli --migrate-only --from=<WhateverVersionYouAreCurrentlyOn>
e.g.
ng update #angular/cli --migrate-only --from=1.7.3
getting ref from here https://github.com/angular/angular-cli/issues/12215#issuecomment-433593036
Make sure that you are in the project directory in the terminal before
running "ng serve".
Let's say your folder structure is as follows:
|-Documents
|---my_projects
|-----angular_project
Make sure that your terminal is in "angular_project" for example. i.e
username#PC_NAME:~/Documents/my_projects/angular_project$ ng serve

ENOENT: no such file or directory for node_modules\jquery\dist\jquery.min.js'

I am not sure what I am doing wrong:
I am following the tutorial here, but I keep getting the following error:
ENOENT: no such file or directory, open
'C:\Users\andrewkp\Documents\VSCode\Projects\node_modules\jquery\dist\jquery.min.js'
Error: ENOENT: no such file or directory, open
'C:\Users\andrewkp\Documents\VSCode\Projects\node_modules\jquery\dist\jquery.min.js'
Here is my angular.json file.
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"MyProjectName": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/MyProjectName",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "MyProjectName:build"
},
"configurations": {
"production": {
"browserTarget": "MyProjectName:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "MyProjectName:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"MyProjectName-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "MyProjectName:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "MyProjectName"
}
After reviewing my error carefully:
C:\Users\andrewkp\Documents\VSCode\Projects\node_modules\jquery\dist\jquery.min.js'
I noticed that I was navigating to far back, as I can see above the path it is trying to read from is totally wrong, not including my project name at all.
The fix was to change:
"styles": [
"src/styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
To:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Resources