CODEWITHSUNDEEP
node.jsangular
ClintMc
ClintMc

Reputation: 23

Node/Express with Angular 2

I am trying to build the ToDo app with the MEAN stack and I can't get the Express server to connect to Angular 2. I believe it has something to do with where I have my index.html view relative to the Angular installation, but I can't figure it out.

The error I am getting is the HTML on index.html is rendering but not picking up the logic behind the selector so my assumption is my tags are wrong or something. I have tried every which way to adjust the tags, but I can't get it to work when running server.js. I know it is something silly but been working on this for a while.

Server.js

    var express = require('express');
    var path = require('path');
    var bodyParser = require('body-parser');

    var index = require('./routes/index');
    var todos = require('./routes/todos');

    var app = express();

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

    app.use(express.static(path.join(__dirname,'client'))); //folder where angular will be

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

    app.use('/', index);
    app.use('/api/v1/', todos);

    app.listen(3000, function(){
        console.log('Server started on port 3000...');
    });

Index.html (in Views folder)

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="src/systemjs.config.js"></script>
    <script>
      System.import('src/main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent FROM SERVER SIDE content here ...</my-app>
  </body>
</html>

app.module.ts

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

    import { AppComponent }  from './app.component';

    @NgModule({
      imports:      [ BrowserModule ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

Below are the two errors I am getting in the console:

GET http://localhost:3000/src/app/app.module 404 (Not Found) scheduleTask @ zone.js:1960 ZoneDelegate.scheduleTask @ zone.js:349

(404 Not Found) loading http:…pp.module" from http://localhost:3000/src/main.js", originalErr:

ZoneAwareError}

Any help would be much appreciated, I can't get past this.

It is not liking something about the reference in this line and getting lost somewhere in zone.js, but I can't get it right. I am using the starter kit from angular.io and using their file layout.

System.import('src/main.js').catch(function(err){ console.error(err); });

Upvotes: 1

Views: 3086

Answers (3)

Eman Jayme
Eman Jayme

Reputation: 240

if you are following the TRAVERSY MEDIA: (original Source is EDUONIX) https://www.youtube.com/watch?v=PFP0oXNNveg&t=2304s

after creating the 'client' folder. Skip the whole JSON Part.

  1. Open Terminal
  2. git clone https://www.github.com/angular/quickstart client
  3. npm install
  4. npm start (this will give you the complete start of the angular front-end)
  5. ctrl + C (close the webserver)
  6. npm run build
server.js

var express = require ('express');
var path = require ('path');
var bodyParser = require ('body-parser');

var index = require ('./routes/index');
var todos = require ('./routes/todos');

var app = express();
//View Engine
app.use(express.static( path.join(__dirname, 'client') ) );
app.use(express.static( path.join(__dirname, 'client/src')));
app.use(express.static( path.join(__dirname, 'client/bower_components')));

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



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

app.use('/', index);
app.use('/api/v1', todos);

app.listen(3000, function() {
    console.log ('server started on port 3000');

/routes/index.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.render('index.html');
});

module.exports = router;

Last but not the least:
make sure this route would execute:
http://localhost:3000/api/v1/todos
yes? (you did it)

Upvotes: 0

CyberMessiah
CyberMessiah

Reputation: 1268

I have encountered the same problem with the new version of Quickstart. The fact that it has a different structure (src folder added) affects how express will behave. In my scenario I have NOT altered this portion.

        System.import('src/main.js').catch(function(err){ console.error(err); });

Instead I left it as default (I believe angular handles where to look for it).

       System.import('main.js').catch(function(err){ console.error(err); });

I have added one more static route. Make sure you have both, one of them will not suffice.

    app.use(express.static(path.join(__dirname, 'client')));   
    app.use(express.static(path.join(__dirname, 'client/src')));

Upvotes: 0

ClintMc
ClintMc

Reputation: 23

I was able to fix by adding two more static routes to the express server so it looked in every folder.

app.use(express.static(path.join(__dirname, 'client')));    // folder where angular will be installed
app.use(express.static(path.join(__dirname, 'client', 'src')));
app.use(express.static(path.join(__dirname, 'client', 'src', 'app')));

This fixed the issue.

Upvotes: 1

Related Questions