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
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"
}
}
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" />
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
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
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"
]