W
W
whiteleaf2017-10-07 16:27:10
Angular
whiteleaf, 2017-10-07 16:27:10

Can't link node.js and angular 4. How to solve it?

I need to make a MEAN Stack application, but I can't connect Node(express) and angular cli.
I took the following video as a basis, but slightly changed it. Instead of mongojs - mongoose, and I'm trying to use the angular cli, but something doesn't work.
produces the following after ng build:

GET http://localhost:3000/inline.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/polyfills.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/styles.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/vendor.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/main.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/inline.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/polyfills.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/styles.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/vendor.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/main.bundle.js 404 (Not Found)

Seems like it should work.
server.js
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var index = require('./server/routes/index');
var tasks = require('./server/routes/tasks');

var port = 3000;

var app = express();


// View engine
app.set('views',path.join(__dirname,'dist'));
app.set('view engine','ejs');
app.engine('html', require('ejs').renderFile);

// Set Static Folder
app.use(express.static(path.join(__dirname, 'client')));

// Body Parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.use('/', index);
app.use('/api', tasks);

app.listen(port, function(){
  console.log('Server is running on port: '+ port);
});

.angular-cli.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "todo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

I beg you to help me figure this out.
Thanks in advance!

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question