1

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:

  1. Create an ManagementController.js:
module.exports = {
    index: function (req, res) {
        res.locals.layout = 'layouts/angular';
        return res.view('angular/angular-start.ejs');
    }
};
  1. 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>
  1. Created a view under views/angular/angular-start.ejs

    Loading...

  2. Created a folder assets/management where my angular app will be

  3. Created the assets/management/app folder

  4. 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.

1 Answer 1

0

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.