I am trying to open, build and run someone else's Angular 4 project but I am not able to view the project when I run it my way. I don't see what is going wrong or what I should do now. I already had everything in place to use NPM and NodeJS
The steps I took were:
Open up the project
npm install
ng serve
The project compiles the right way. (I have an own Angular app and I know how this looks like) The console is showing:
'** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **'.
Then, when I opened up a web browser, I navigated to localhost:4200 and a web page with the following text were shown:
'Cannot GET /'
And on the console was the following text:
'GET http://localhost:4200/ 404 (Not Found)'
The project should work fine but I am not able to navigate to a working URL on the web page. Routing is set-up another way as I am used to doing this. In app.module.ts the following is implemented:
app.module.ts
const appRoutes: Routes = [
{ path: '', redirectTo: 'tree', pathMatch: 'full' },
{ path: 'admin', component: AdminPanelComponent, canActivate: [AuthGuard],
children: [{path:'', component: PanelComponent},{path: 'add', component:
AddTreeComponent}, {path:'manage-trees', component:ManageTreesComponent},
{path:'manage-users', component: ManageUsersComponent}, {path:'view-trees',
component: ViewTreeComponent}]},
{path:'tree', component: TreeComponent},
{path:'error', component: ErrorComponent},
{path:'unauthorized', component: UnauthorizedComponent},
{path:'login', component: LoginComponent},
{path:'entire-tree', component: EntireTreeComponent},
{ path: '**', component: PageNotFoundComponent },
];
Also opening up a web page like; localhost:4200/tree does not work. When I let angular stop serving the web page, the web page displays: "this site can't be reached'. So I think there is running something at localhost:4200... Also, another project of this person behaves the same way.
Does anybody know what is going on?
EDIT
app.module.ts
RouterModule.forRoot(appRoutes, { useHash: true })
Package.json
{
"name": "xxx",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.0",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"angular-oauth2-oidc": "^1.0.20",
"angular-polyfills": "^1.0.1",
"angular2-jwt": "^0.2.3",
"angular2-spinner": "^1.0.10",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ngx-bootstrap": "^1.8.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.2.4",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "2.5.45",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
I also see an icon next to the tab name with the label: "Error".
OBSERVATION:
New observation:
After I ran npm install -g angular-cli I wasn't able to run ng serve. (You have to be inside an angular-cli project in order to use the build command after reinstall of angular-cli)
Then I ran npm install -g #angular/cli#latest and I was able to use ng serve again.
OBSERVATION 2:
After building the app with: 'ng build ...' there is no index.html in the 'dist' folder... When I set the website online, there is just a folder structure instead of a nice website. I think that's because there is no index.html.
The way I resolved this error was by finding and fixing the error that the console reported.
Run ng build in your command line/terminal, and it should display a useful error, such as the example in red here: Property 'name' does not exist on type 'object'.
For me it also was problem with path, but I had percentage sign in the root folder.
After I replaced %20 with space, it started to work :)
The problem was that I ran the commands within the folder /project/src/app. Navigating back to the project folder so to /project and running ng serve from there solved my problem.
I had the same error caused by build errors. I ran ng build in the directory of my application which helped me correct my errors
I had the same problem with an Angular 9.
In my case, I changed the angular.json file from
"aot": true
To
"aot": false
It works for me.
Check if in index.html base is set
<head>
<base href="/">
...
</head>
I was using export class TestCalendar implements OnInit{} but i did not write the function
ngOnInit() {
/* Display initial */
}
. After running the command ng serve , i found out that i was not using ngOnInit(){} . Once i implemented, it started working fine. Hope it helps someone.
Just figured out the reason when we type "ng serve" INSIDE OUR PROJECT..
for example C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve
could not resolve module C:\Users\EdgeTech1\Desktop\C
results: failed compiled
root cause:
My folder name was C# Project..
Note: I tried to remove the # in my Project Name, I rename C# Project to CSharp instead and I tried to open cmd prompt again, typed the same thing..
for example:
C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve
and my project compiled successfully.. so as much as possible avoid ASCII characters in naming projects files.
I had the same problem with an Angular 6+ app and ASP.NET Core 2.0
I had just previously tried to change the Angular app from CSS to SCSS.
My solution was to go to the src/angularApp folder and running ng serve. This helped me realize that I had missed changing the src/styles.css file to src/styles.scss
I was referring to one of my provider with two different casing. One of them was wrong but only the webpack compiler was complaining. I had to step into the ClientApp folder and use ng build or ng serve to see the errors. (ASP.NET Core SPA with Angular 5)
Check baseHref is set to "/" ( angular.cli )
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"baseHref": "/"
if it didn't work, check if your base href in your index.html is set to "/"
For me the issue was with #Component Selector path was pointing to wrong path. After changing it solved the issue.
#Component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html',
providers: [ToolbarService, GroupService, FilterService, PageService, ExcelExportService, PdfExportService]
})
This error can apparently happen for a number of reasons. Here is my experience for those who land here after searching for "Cannot GET /"
I experienced this error when I installed ng-bootstrap v6 into an Angular 8 project. I downgraded ng-bootstrap to v5 and it seems to be okay now, since ng-bootstrap v6 is only compatible with Angular 9.
This happened while working in Visual Studio 2019 with the Angular .NET Core template. At the same time, the output panel of Visual Studio displayed this esoteric sounding error: "TS1086: An accessor cannot be declared in ambient context," which led me here, which, after a little reading, made me think it was a versioning issue. It appears that it was.
I fixed it by changing "#ng-bootstrap/ng-bootstrap": "^6.0.0"," to "#ng-bootstrap/ng-bootstrap": "^5.0.0" in the package.json file and rebuilding.
if you changed any name or file component , check if it is the right name
#NgModule({
declarations: [
NewNameComponent
],
imports: [
CommonModule,
],
exports:[
NewNameComponent
]
})
export class YourModule { }
Generally it is a versioning issue. Node.js v8 cannot compile with angular-cli 6.0 or later. angularcli v6 and above will work for lastest node versions. Please make sure if your node version is v8, then you need to install angular-cli upto 1.7.4.
enter ng -v command in cmd and check the cli and node versions.
See this answer here. You need to redirect all routes that Node is not using to Angular:
app.get('*', function(req, res) {
res.sendfile('./server/views/index.html')
})
You can see the errors after stopping debbuging by choosing the option to display ASP.NET Core Web Server output in the output window.
In my case I was pointing to a different templateUrl.
First, delete existing files package.lock.json and node_modules from your project.
Then, the first step is to write npm cache clean --force. Second, also write this command npm i on the terminal. This process resolve my error. :D
Many answers dont really make sense but still have upvotes, makes me currious why that would still work in some cases.
In angular.json
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"deployUrl": "/",
"baseHref": "/",
worked for me.
For me the problem was that I had saved my project folder under C:\Users\... which indeed is a problem. After I saved it under C:\ then npm install and ng serve --open it worked just fine!
In my angular.json file the deployUrl was set to static/ang.
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"deployUrl": "/static/ang/",
....
This was causing my application to get served from localhost:4200/static/ang
Removing deployUrl fixed it for me.
EDIT:
I shifted deployUrl to under configurations since it was important when building for production. (Since my lazy loaded chunks were not getting served on the static url).
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
....
....
},
"configurations": {
"deployUrl": "/static/ang/",
Bumped into same issue, I tried this:
-ng build
And it worked!
Another problem may be that you're importing the component instead of it's module.
imports: [
YourComponent, // <-- Should be YourComponentModule
]
For me the problem was that the Angular project was not getting compiled when executing because of some undelared variable in the ts file which was binded to an html tag.
You can use ng serve --verbose true to display the build log in terminal to check where the application is breaking.
The weird thing that I was experiencing was that I could make changes to the components in Visual Studio 2019 while the app was running and see my changes but, when I restarted the app, I got the Cannot Get / error. Instead of running IIS Express, I chose to run the app using Angular JS and the build window showed me that there was an error in app.component.ts. It turned out to be an extra } at the end of the file. Not sure how it got there but, when I removed it, the app works fine.
For me the issue was that my local CLI was not the same version as my global CLI - updating it by running the following command solved the problem:
npm install --save-dev #angular/cli#latest
Deleting node modules folder worked for me.
Delete the node modules folder
Run npm install.
Re-run the application and it should work.
Related
I am using the parcel (v2.0.1) localhost server with hot module replacement to develop a simple HTML/SASS/JS-based web app. The HMR is working fine most of the time, but from time to time, especially when making significant changes to the code, ALL server updating stops working -- i.e. not only does HMR not work, but I can't even get the server to reflect the changes by reloading the browser page completely or even stopping and restarting the server. To make sure I wasn't just missing something simple I made changes to the code that would DEFINITELY break certain features and restarted the server, but the page still worked as normal.
I have also tried deleting the .parcel-cache and dist folders and re-running parcel and that has not worked either. Restarting my computer has not worked either. The only mention I've seen of this problem is this github discussion.
Has anyone had a similar problem? Thanks!
Here is the package.json file:
{
"name": "",
"version": "1.0.0",
"description": "",
"source": "index.html",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#parcel/transformer-sass": "^2.0.1",
"parcel": "^2.0.1"
},
"dependencies": {
"core-js": "^3.19.3",
"fractional": "^1.0.0",
"regenerator-runtime": "^0.13.9"
}
}
I solved this problem with the following code:
"start": "parcel index.html && parcel watch index.html",
Put this in your script tag:
type="module"
Met the same issue: parcel stops working. Especially for me, it happens when I leave a project for day-two and when returned it's broken yet. Even full reinstall (including package.json removing) can't fix the problem. After reinstall, previous broken state is still preserved: it runs recent working code version (I don't understand from where it get the correct code, all data was removed) and doesn't react on any changes except syntax error which cause throwing related errors.
I have been following this tutorial online: https://www.youtube.com/watch?v=TOb1c39m64A.
I am about 10 minutes in, where we are starting the webpack dev server for the first time. I do this and when I travel to: http://localhost:8080/ I receive a white webpage with just the text Cannot GET /.
These are the only packages I have installed so far:
"devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" }
I have a script called "start" that runs webpack serve, which runs successfully and displays:
<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/
As per the tutorial I have no webpack config, I have however messed around with other webpack things in other coding projects, could one of these be using my 8080 port? I work in firefox mostly but this issue persists across all browsers.
I have also looked at my hosts file and added a line, if you think it could help I will paste it here.
As requested here is my package.json (most of it already posted above):
{ "private": true, "scripts": { "start": "webpack serve", "watch": "webpack --watch", "build": "webpack" }, "devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" } }
Seems even in 7 months the tutorial has gone out of date.
Fix for anyone like me who is following it on a windows pc.
Added a webpack.config.js file in my root directory that looked like this:
module.exports = {
mode: "development",
devServer: {
static: "./dist",
},
};
In the tutorial it uses contentBase as the key in the devServer object, a property that appears to have been deprecated in a recent update, so static is used as a replacement.
Now everything is served to localhost and it works.
You just have to create "public" directory in root folder and move your html, css and images files and folder there and your error will be resolved
My current site is build with html+css (scss) and using a NPM build script (see below). I now want to add a few JS libraries to my website (for example: lozad).
So far I've downloaded the dependencies for it. As I'm not familiar with JS, I don't understand the other steps I need to take. I tried following the documentation but it's not working so far.
I now assume that this is because my current NPM build script doesn't track JS, so any JS wouldn't be shown on my devserver. So maybe it did work, but just not in test?
Can anyone point me in the direction of what I need to do to make it working, and/or how to update my NPM script?
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server --browser=firefox",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
},
"devDependencies": {
"autoprefixer": "^9.6.0",
"concat": "^1.0.3",
"node-sass": "^4.12.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.1.2",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"aos": "^2.3.4",
"lozad": "^1.9.0",
}
}
You just need to give the relative path to the dependency and run the script like so:
"scripts": {
...
"lozad": "npm run ./node_modules/lozad/index.js --argument"
}
Note that this is only assumed data. The real path and file are probably called something else (Just look into the node:modules folder for lozad).
According to this article, you can also omit the path and the npm rum when there is a .bin folder for that dependency, but I have not tested that.
Edit
In case you meant on how to use the library locally.
You have to add the package to your dependencies (Like you did) and then call
npm install
in your project directory. It will install all your dependencies specified in package.json.
You can omit the manual "add dependency to file" step by simply calling:
npm install --save lozad
After that you can use it in your project like so:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require('lozad')
If you don't know which one to use, just try them - your IDE will tell you if something is wrong.
When you imported the library, you can use it like described at the Usage Description.
This is an angular app. I have a bower.json with a lot of libraries put like this:
"dependencies": {
"angular": "^1.4.0",
"bootstrap": "^3.2.0",
...
"angular-socket-io": "^0.7.0",
"socket.io-client": "^1.7.2"
I run
bower install
and I can see that in the "bower_components"-folder there are folders and files for both "angular-socket-io" and "socket.io-client".
When I then run this command:
grunt serve
I can see that this one is included:
<script src="bower_components/angular-socket-io/socket.js"></script>
However, I cannot find any trace of "socket.io-client". Why? Am I supposed to include this manually? I wonder why then. All the other bower cmopoenents are beeing added autmatically of "grunt serve".
PS: This causes the error "io is not defined" when I try to instantiate a socket frmo a factory.
I guess it was an issue with versions.
Im running angular 1.4.
Having this line:
"socket.io-client": "^0.7.10",
seems made the trick. Before I used latest version of socket.io-client (1.7). And I got incompatibility error.
But now the socket-client is being loaded.
With almost every npm package that I'm trying to use with vue.js 1.0 I receive this error:
{ Error: Cannot find module '!!./../../../node_modules/css-loader/index.js!./../../../node_modules/vue-loader/lib/style-rewriter.js!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./dashboard.vue' from '/Users/jamie/Code/forum/node_modules/vue-html5-editor/dist'
at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:46:17
at process (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:173:43)
at ondir (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:188:17)
at load (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:69:43)
at onex (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:92:31)
at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:117:15)
It drives me nuts! I'm using vue.js with browserify. Looked everywhere on the web:
https://github.com/webpack/css-loader/issues/240
https://github.com/webpack/css-loader/issues/180
https://github.com/webpack/css-loader/issues/295
https://github.com/webpack/css-loader/issues/163
Nothing seems to work! What am I doing wrong!?
2 packages where I've this problem:
https://github.com/lian-yue/vue-upload-component/
https://github.com/PeakTai/vue-html5-editor
My gulpfile:
const elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
require('laravel-elixir-stylus');
elixir(mix => {
mix.browserify('main.js');
mix.styles([
'./node_modules/normalize-css/normalize.css',
'./node_modules/nprogress/nprogress.css',
'./node_modules/sweetalert/dist/sweetalert.css',
]);
mix.stylus('app.styl');
});
A solution would really help me out.
--EDIT--
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-stylus": "^2.0.3",
"vue-html5-editor": "^0.5.1"
},
"dependencies": {
"browserify": "^13.1.0",
"laravel-elixir-vueify": "^2.0.0",
"normalize-css": "^2.3.1",
"nprogress": "^0.2.0",
"stylus": "^0.54.5",
"sweetalert": "^1.1.3",
"vue": "^1.0.26",
"vue-resource": "^0.9.3",
"vue-router": "^0.7.13",
"vue-spinner": "^1.0.2",
"vue-upload-component": "^2.0.0-beta"
}
}
Those are webpack packages and you are using browserify. If you need to use webpack packages you should be using webpack as your bundler.
I did have a go at installing the vue-upload-component package to see how easy it would be with browserify and elixir but it's awkward to say the least. I didn't get it working because it uses babel transforms to compile the vue files, so first you need to pull them in manually and then you would likely need to write an elixir extension to use those transforms to get it to work. Obviously each webpack package will be different so you would need to do that each time you install one, which is hardly convenient.
I had some luck changing the configuration output of the Vue component I wanted to use to use webpack -p instead of just webpack.
I could then take that output without the hot module code and put it through browserify:
browserify file.js --standalone SomeLibrary > file.browser.js
Where file.js is the webpack -p output, SomeLibrary is the name you want on the global window scope from the browserify packaging, and file.browser.js is your resultant file to include in your project.