Angular2 in sails application configuration

Question

I am trying to correctly create an angular2 application within a sails application.

I want the AngularApp to run under /management url

What I have done:

Create an ManagementController.js:

module.exports = {
    index: function (req, res) {
        res.locals.layout = 'layouts/angular';
        return res.view('angular/angular-start.ejs');
    }
};

Created an angular layout under views/layouts/angular.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Reloyalty Administration Dashboard</title>

    <!-- Viewport mobile tag for sensible mobile support -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="/favicon.ico">

    <!-- Common Scripts-->
    <script src="/common/js/jquery-1.11.3.min.js"></script>

    <!--SCRIPTS-->
    <!--SCRIPTS END-->

    <script>
        // SystemJS
        // config goes here 
    </script>

    <!-- end AngularJS 2-->
</head>

<body>

<%- body %>


</body>
</html>

Created a view under views/angular/angular-start.ejs

Loading...
Created a folder assets/management where my angular app will be
Created the assets/management/app folder
Added to copy.js:

grunt.config.set('copy', { dev: { files: [{ expand: true, cwd: './assets', src: ['/', '!/.coffee', '!/.ts', '!/.less' ], dest: '.tmp/public' }] }, build: { files: [{ expand: true, cwd: '.tmp/public', src: ['/'], dest: 'www' }] }, angular_node_deps: { files: [{ expand: true, cwd:'.', src: [ './node_modules/es6-shim/es6-shim.min.js', './node_modules/systemjs/dist/system-polyfills.js', './node_modules/systemjs/dist/system.src.js', './node_modules/zone.js/dist/zone.js', './node_modules/reflect-metadata/Reflect.js', './node_modules/rxjs//.js', './node_modules/@angular/core/bundles/core.umd.js', './node_modules/@angular/compiler/bundles/compiler.umd.js', './node_modules/@angular/common/bundles/common.umd.js', './node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', './node_modules/@angular/platform-browser/bundles/platform-browser.umd.js' ], dest: '.tmp/public/js' }] } });

What do I do now to have a it running correctly ... I have been trying all day to make this work so i prefer not to post my code right now but just follow your instructions, since I have made so many changes in my code that I do not understand it.

Francesco Borzi Francesco Borzi · Accepted Answer · 2017-05-12T17:25:48

I'm not really sure about what you're doing but I recently succeeded in embedding a simple Angular app into an existing app.

What I've done was simply generating a new project using AngularCLI and then embedding the bundled *.js files (the ones generated by the ng build command) and the root html template inside the existing app, and it worked out of the box.

Angular2 in sails application configuration

1 Answers